/* ============================================================
   BATUMIREALESTATE.INFO - DESIGN TOKENS v1.1
   Single source of visual truth. Light = default.

   ROLE SEPARATION (the fix that makes dark mode work):
   - --ink is the dark BRAND color (constant-ish). It is NOT used
     directly for text anymore.
   - --heading / --text / --text-muted are TEXT roles that flip.
   - --surface-invert is the dark PANEL bg (header/hero/footer/CTA);
     it stays dark in both themes, --on-invert is its (light) text.
   No component hard-codes a hex for a themeable role - reference a var.
   ============================================================ */
:root{
  /* Core palette */
  --ink:        #0C3437;  /* Black Sea Ink - brand anchor */
  --ink-2:      #14545A;  /* Ink 400 - chart primary, hovers */
  --ink-soft:   #E3ECEA;  /* Ink 100 - tinted fills, table headers */
  --fog:        #F3F4F0;  /* Sea Fog - page background */
  --card:       #FFFFFF;  /* cards, tables, forms */
  --saperavi:   #7E2536;  /* Saperavi - accent. CTAs & key highlights ONLY */
  --saperavi-2: #641C2B;  /* CTA hover */
  --verdigris:  #1E6B62;  /* Verdigris - links, secondary actions, positive data */
  --brass:      #A87B2F;  /* Brass - Delivery Index badge, premium markers */

  /* Text roles (these flip in dark) */
  --heading:    #0C3437;  /* h1-h4, card titles, stat figures, table heads */
  --text:       #1E2A29;  /* body */
  --text-muted: #5A6A67;  /* captions, breadcrumbs, meta */
  --hairline:   #D9DED9;  /* borders, dividers, chart grid */
  --row-hover:  #FAFBF8;  /* table row hover */

  /* Inverted (dark) surfaces - header / hero / footer / lead-cta */
  --surface-invert:     #0C3437;  /* the dark panel bg */
  --surface-invert-2:   #0A2C2F;  /* nav dropdown / nested */
  --on-invert:          #EAF1EF;  /* text on inverted surfaces */
  --on-invert-strong:   #F6F8F5;  /* headings on inverted surfaces */
  --on-invert-muted:    #8FB0AB;  /* eyebrows/meta on inverted surfaces */
  --invert-hairline:    #1B3E41;  /* dividers on inverted surfaces */
  --invert-border:      #2C5559;  /* control borders on inverted surfaces */

  /* Semantic (distinct from brand accent) */
  --ok:         #1E7B4F;
  --warn:       #B07C10;
  --error:      #C2452D;

  /* Data-viz categorical order */
  --viz-1: #14545A; --viz-2: #7E2536; --viz-3: #A87B2F;
  --viz-4: #2E7D6B; --viz-5: #5A7184; --viz-6: #9AA5A0;

  /* Type */
  --font-display: "Newsreader", Georgia, serif;
  --font-ui:      "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm */
  --radius: 6px;
  --shadow: 0 1px 2px rgba(12,52,55,.06), 0 4px 16px rgba(12,52,55,.06);
  --maxw: 1080px;

  /* Spacing scale (8px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px;
}

/* ------------------------------------------------------------
   DARK THEME - a proper, contrast-checked palette (WCAG AA body).
   Surface hierarchy (dark→light): surface-invert < fog < card < ink-soft,
   so panels anchor, the page sits above them, and cards lift clearly.
   ------------------------------------------------------------ */
[data-theme="dark"]{
  /* brand anchor stays dark; it's a surface color, not text */
  --ink:        #0C3437;
  --ink-2:      #2E7D6B;   /* lifted so it reads on dark */
  --ink-soft:   #17383B;   /* table-head / tint fill (light text sits on it) */
  --fog:        #0A1F22;   /* page background */
  --card:       #103034;   /* cards / tables / forms - clearly above bg */

  --saperavi:   #B8556A;   /* CTA - lifted but keeps white-text AA */
  --saperavi-2: #A54A5E;
  --verdigris:  #63BEB1;   /* links - lifted */
  --brass:      #CBA05C;

  /* text roles flip to light */
  --heading:    #F1F6F4;
  --text:       #D8E3E0;
  --text-muted: #90A4A1;
  --hairline:   #24393B;
  --row-hover:  rgba(255,255,255,.035);

  /* inverted panels: go a touch darker than the page so they still anchor */
  --surface-invert:     #081A1C;
  --surface-invert-2:   #0C2427;
  --on-invert:          #E7EFEC;
  --on-invert-strong:   #F4F8F6;
  --on-invert-muted:    #7FA39E;
  --invert-hairline:    #1C3336;
  --invert-border:      #29484B;

  --ok:    #4FB07E;
  --warn:  #D2A23E;
  --error: #E0745C;

  --shadow: 0 1px 2px rgba(0,0,0,.30), 0 6px 22px rgba(0,0,0,.38);
}