/* Polarum Design System — design tokens
   Source of truth: reference/Polarum Foundations.dc.html
   Naming: role, not appearance. Components reference semantic tokens only. */

:root {
  /* ---------- Ink — neutral (carries ~80% of every screen) ---------- */
  --ink-0:   #FFFFFF;
  --ink-25:  #FBFBFC;
  --ink-50:  #F6F7F9;
  --ink-100: #EDEFF3;
  --ink-200: #DFE3EA;
  --ink-300: #C6CCD8;
  --ink-400: #A0A9BA;
  --ink-500: #7B8598;
  --ink-600: #5C6577;
  --ink-700: #434B5C;
  --ink-800: #2B3141;
  --ink-900: #191E2A;
  --ink-950: #0D1017;

  /* ---------- Indigo — primary / interactive ---------- */
  --indigo-50:  #F1F1FB;
  --indigo-100: #E2E2F7;
  --indigo-200: #C6C5F0;
  --indigo-300: #A19FE4;
  --indigo-400: #7E79D6;
  --indigo-500: #5D55C4;
  --indigo-600: #4A42A8;
  --indigo-700: #3A3388;
  --indigo-800: #2B2665;
  --indigo-900: #1D1946;
  --indigo-950: #12102C;

  /* ---------- Polaris gold — brand only. Never a UI action. ---------- */
  --gold-50:  #FDF7EA;
  --gold-100: #F9EBCB;
  --gold-200: #F1D89C;
  --gold-300: #E7C06A;
  --gold-400: #D9A441;
  --gold-500: #BE8A2A;
  --gold-600: #9A6E20;
  --gold-700: #78551B;
  --gold-800: #573D16;
  --gold-900: #3A2810;

  /* ---------- Verdant — success ---------- */
  --success-50:  #E9F6EF;
  --success-100: #CDEADB;
  --success-300: #6DC198;
  --success-500: #1E8E5A;
  --success-600: #17754A;
  --success-700: #115637;
  --success-900: #08301F;

  /* ---------- Solar — warning ---------- */
  --warning-50:  #FDF0E3;
  --warning-100: #F9DDBF;
  --warning-300: #E8A356;
  --warning-500: #C2610A;
  --warning-600: #A15008;
  --warning-700: #7A3D06;
  --warning-900: #472303;

  /* ---------- Ember — danger ---------- */
  --danger-50:  #FCEDEB;
  --danger-100: #F7D5D1;
  --danger-300: #E28A80;
  --danger-500: #C0362C;
  --danger-600: #9E2A22;
  --danger-700: #7A1F19;
  --danger-900: #45110D;

  /* ---------- Signal — info ---------- */
  --info-50:  #E9F2FA;
  --info-100: #CBE0F3;
  --info-300: #69A8DC;
  --info-500: #1668B8;
  --info-600: #125596;
  --info-700: #0D3F6F;
  --info-900: #07233D;

  /* ---------- Semantic (what components reference) ---------- */
  --bg-page:         var(--ink-25);
  --bg-surface:      var(--ink-0);
  --bg-sunken:       var(--ink-50);
  --bg-inverse:      var(--ink-950);
  --fg-default:      var(--ink-900);
  --fg-muted:        var(--ink-600);
  --fg-subtle:       var(--ink-500);
  --fg-on-accent:    var(--ink-0);
  --border-default:  var(--ink-200);
  --border-strong:   var(--ink-300);
  --accent-default:  var(--indigo-500);
  --accent-hover:    var(--indigo-600);
  --accent-subtle:   var(--indigo-50);
  --brand-gold:      var(--gold-400);
  --success-default: var(--success-500);
  --warning-default: var(--warning-500);
  --danger-default:  var(--danger-500);
  --info-default:    var(--info-500);

  /* Focus ring — 3px, 28% accent, outside the control */
  --focus-ring: 0 0 0 3px rgba(93, 85, 196, .28);

  /* ---------- Data visualisation (use in sequence, never reorder) ---------- */
  --viz-1: #5D55C4;
  --viz-2: #1668B8;
  --viz-3: #1E8E5A;
  --viz-4: #D9A441;
  --viz-5: #C0362C;
  --viz-6: #7B8598;

  /* ---------- Type families ---------- */
  --font-sans: Archivo, "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale — size / line-height / weight / width / tracking ---------- */
  --display-xl: 600 72px/1.02 var(--font-sans);   /* font-stretch 125%, -0.01em */
  --display-lg: 500 56px/1.04 var(--font-sans);   /* font-stretch 118%, -0.01em */
  --display-md: 500 44px/1.08 var(--font-sans);   /* font-stretch 112% */
  --heading-1:  500 34px/1.15 var(--font-sans);   /* font-stretch 112% */
  --heading-2:  600 26px/1.25 var(--font-sans);
  --heading-3:  600 21px/1.30 var(--font-sans);
  --heading-4:  600 17px/1.40 var(--font-sans);
  --body-lg:    400 18px/1.65 var(--font-sans);
  --body-md:    400 15px/1.60 var(--font-sans);
  --body-sm:    400 13px/1.55 var(--font-sans);
  --label:      600 13px/1.30 var(--font-sans);
  --eyebrow:    600 11px/1.30 var(--font-sans); /* uppercase, +0.14em */
  --mono-md:    400 13px/1.55 var(--font-mono);

  /* ---------- Spacing — 4px base ---------- */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- Radius ---------- */
  --radius-xs:   4px;    /* tags, badges, kbd, inline code */
  --radius-sm:   8px;    /* inputs, buttons, small controls */
  --radius-md:   12px;   /* panels, menus, toasts, list rows */
  --radius-lg:   16px;   /* cards, modals, sheets */
  --radius-xl:   24px;   /* hero surfaces, feature tiles, app icon */
  --radius-full: 999px;  /* pills, avatars, round icon buttons */

  /* ---------- Elevation ---------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(13,16,23,.06);
  --shadow-sm: 0 2px 6px rgba(13,16,23,.07), 0 1px 2px rgba(13,16,23,.05);
  --shadow-md: 0 6px 16px rgba(13,16,23,.10), 0 2px 4px rgba(13,16,23,.05);
  --shadow-lg: 0 16px 32px rgba(13,16,23,.13), 0 4px 8px rgba(13,16,23,.06);
  --shadow-xl: 0 28px 56px rgba(13,16,23,.18), 0 8px 16px rgba(13,16,23,.08);

  /* ---------- Motion ---------- */
  --duration-instant: 80ms;   /* colour and opacity on hover */
  --duration-fast:    140ms;  /* toggle, checkbox, chip */
  --duration-base:    200ms;  /* dropdown, tooltip, tab */
  --duration-slow:    300ms;  /* modal, drawer, sheet */
  --duration-slower:  480ms;  /* page and route transition */
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-popover: 400;
  --z-toast:   500;
  --z-tooltip: 600;

  /* ---------- Layout ---------- */
  --bp-sm:  480px;   /* 4 col */
  --bp-md:  768px;   /* 8 col */
  --bp-lg:  1024px;  /* 12 col */
  --bp-xl:  1280px;  /* 12 col, max 1280 */
  --bp-2xl: 1536px;  /* 12 col, bleed 1440 */
  --content-max: 1280px;
}

/* ---------- Dark theme ----------
   DERIVED, NOT YET SIGNED OFF. The ramps are fixed; this remap is a
   starting point. Re-verify every pair against the contrast floors in
   README before shipping dark mode. */
[data-theme="dark"] {
  --bg-page:        var(--ink-950);
  --bg-surface:     var(--ink-900);
  --bg-sunken:      #12161F;
  --bg-inverse:     var(--ink-0);
  --fg-default:     #F4F5F8;
  --fg-muted:       var(--ink-400);
  --fg-subtle:      var(--ink-500);
  --fg-on-accent:   var(--ink-0);
  --border-default: #262C3A;
  --border-strong:  #38404F;
  --accent-default: var(--indigo-400);
  --accent-hover:   var(--indigo-300);
  --accent-subtle:  rgba(93,85,196,.18);
  --focus-ring: 0 0 0 3px rgba(126,121,214,.40);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}