/* ============================================================
   Riyadh Region Municipality — Color Tokens
   Synced from the Claude design system (tokens/colors.css).
   Do not hand-edit: re-sync from the design system instead.
   ============================================================ */

:root {
  /* --- Brand green (primary) --- */
  --green-900: #00301F;
  --green-800: #004630;
  --green-700: #005A3C;
  --green-600: #006A46;   /* PRIMARY — theme dk2 / logo green */
  --green-500: #007A53;
  --green-400: #0E9463;
  --green-300: #55B98C;
  --green-200: #A6DCC3;
  --green-100: #E1F1E9;
  --green-bright: #43B02A; /* leaf-green highlight seen on content slides */

  /* --- Neutrals (warm-tinted grays) --- */
  --ink-950: #0B0C0B;
  --ink-900: #151515;
  --ink-800: #262927;
  --ink-700: #3B3F3C;
  --ink-600: #565B57;
  --ink-500: #6D726E;
  --ink-400: #8B908C;
  --ink-300: #AEB2AF;
  --ink-200: #CFD2CF;
  --ink-100: #E1E2E1;
  --ink-050: #F1F3F1;
  --paper:   #FBFCFB;
  --white:   #FFFFFF;

  /* --- Report accent palette --- */
  --teal-600: #04676A;
  --teal-400: #0E8A8E;
  --cyan-600: #0089AD;
  --cyan-500: #009CC5;
  --sky-500:  #71A5D8;
  --sky-300:  #A6C6E8;
  --amber-600: #C98D1E;
  --amber-500: #E5A92E;
  --amber-300: #F1CB7E;
  --brown-500: #876952;

  /* --- Semantic status --- */
  --success: #007A53;
  --warning: #E5A92E;
  --danger:  #C4443A;
  --info:    #0089AD;

  /* --- SEMANTIC ALIASES — LIGHT (default document surface) --- */
  --bg-base:        #ECEFED;
  --surface-1:      var(--white);
  --surface-2:      #F5F7F5;
  --surface-3:      #E9EDEA;
  --surface-card:   var(--white);
  --surface-glass:  rgba(255, 255, 255, 0.72);

  --border-subtle:  rgba(21, 21, 21, 0.10);
  --border-strong:  rgba(21, 21, 21, 0.18);
  --border-brand:   rgba(0, 106, 70, 0.42);

  --text-strong:    var(--ink-900);
  --text-body:      #2E332F;
  --text-muted:     #5F6562;
  --text-faint:     #8B908C;
  --text-on-accent: var(--white);
  --text-on-amber:  var(--ink-900);

  --accent:         var(--green-600);
  --accent-hover:   var(--green-500);
  --brand:          var(--green-600);
  --brand-hover:    var(--green-700);

  --focus-ring:     var(--green-600);
}

/* --- DARK variant — hero, app chrome, section surfaces --- */
.rm-dark,
[data-theme="dark"] {
  --bg-base:        #06130D;
  --surface-1:      #0B1D14;
  --surface-2:      #123024;
  --surface-3:      #1A4231;
  --surface-card:   rgba(11, 29, 20, 0.72);
  --surface-glass:  rgba(6, 19, 13, 0.55);

  --border-subtle:  rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-brand:   rgba(67, 176, 42, 0.5);

  --text-strong:    #F4F8F5;
  --text-body:      #DCE6DF;
  --text-muted:     #A6B3AA;
  --text-faint:     #7E8B82;
  --text-on-accent: var(--white);

  --accent:         var(--green-bright);
  --accent-hover:   #5BC845;
  --brand:          #1E9E68;
  --brand-hover:    var(--green-400);

  --focus-ring:     var(--green-bright);
}