/* ============================================================
   GeoatlasDV - Design Tokens
   Direction: "Clean Studio" - cool-grey canvas, floating white
   cards, violet accent, soft shadows, precise sans-serif.
   (Inspired by modern proptech/analytics dashboards.)
   ============================================================ */
:root {
  /* --- Surfaces --- */
  --canvas:     #F1F1F4;   /* app background (cool light grey) */
  --paper:      #F1F1F4;   /* alias */
  --panel:      #FFFFFF;   /* floating cards */
  --panel-2:    #F6F6F9;   /* inset / sunk surfaces */
  --panel-3:    #FBFBFD;   /* subtle raise */
  --ink:        #1B1B23;   /* primary text (cool near-black) */
  --ink-2:      #56565F;   /* secondary text (AA ~7:1) */
  --ink-3:      #9C9CAA;   /* tertiary: decorative/icons only, NOT small text */
  --ink-muted:  #6E6E7B;   /* muted TEXT that still meets WCAG AA (~4.7:1) */
  --hair:       #ECECF1;   /* hairlines */
  --hair-2:     #E0E0E7;   /* stronger borders */

  /* --- Brand / accent (violet) --- */
  --accent:     #7A5AF8;
  --accent-ink: #5B3FD6;   /* darker accent for text */
  --accent-wash:#EEEAFE;   /* tint wash */
  --accent-2:   #12B5A5;   /* teal secondary */
  --good:       #2FBF71;

  /* --- Categorical palette (default "Iris") --- */
  --c1: #7A5AF8;  /* violet */
  --c2: #12B5A5;  /* teal */
  --c3: #35B37E;  /* emerald */
  --c4: #F5A623;  /* amber */
  --c5: #F2557E;  /* rose */
  --c6: #3D8BFD;  /* blue */
  --c7: #9B51E0;  /* purple */
  --c8: #17BEBB;  /* cyan */

  /* --- Typography: Inter throughout (big-app standard) --- */
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* used at heavy weight + tight tracking */
  --serif:   var(--sans); /* legacy alias, points to body sans */
  --mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --system:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* native system UI (data table) */

  /* --- Scale / spacing --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --r-sm: 8px;  --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-1: 140ms; --dur-2: 260ms; --dur-3: 480ms;

  /* --- Elevation (soft, cool) --- */
  --sh-1: 0 1px 2px rgba(27,27,35,.05);
  --sh-2: 0 8px 24px -10px rgba(27,27,35,.16);
  --sh-3: 0 20px 48px -18px rgba(27,27,35,.22);
  --sh-card: 0 1px 2px rgba(27,27,35,.04), 0 12px 32px -16px rgba(27,27,35,.14);

  --rail-w: 296px;
  --insp-w: 320px;
  --icon-w: 62px;
}

/* ============================================================
   Dark theme - cool near-black surfaces, muted text, colourful
   data on top (inspired by a dark analytics dashboard). Charts
   read --ink / --hair / --ink-3, so they re-skin automatically.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:  #0F1114;
  --paper:   #0F1114;
  --panel:   #17191D;   /* floating cards */
  --panel-2: #1E2127;   /* inset / sunk surfaces */
  --panel-3: #23272E;   /* subtle raise */
  --ink:     #ECEDEF;   /* primary text */
  --ink-2:   #A7ADB4;   /* secondary text */
  --ink-3:   #6C727A;   /* tertiary: icons / decorative */
  --ink-muted: #99A0A8; /* muted text meeting contrast */
  --hair:    #262A31;   /* hairlines */
  --hair-2:  #333842;   /* stronger borders */

  --accent:     #8B6DF9;
  --accent-ink: #B7A6FC; /* lighter accent for text on dark */
  --accent-wash:#221E33; /* tint wash */

  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 8px 24px -10px rgba(0,0,0,.6);
  --sh-3: 0 20px 48px -18px rgba(0,0,0,.7);
  --sh-card: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -16px rgba(0,0,0,.55);
}