/* ============================================================
   Volition Design System — Colors & Type
   Source: Colours 1.6.fig (palette), Volition brand notes (type)
   Mobile-first. Never use pure #000 or #FFF.
   ============================================================ */

/* -------- Fonts -------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("./fonts/Outfit-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Outfit-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Outfit-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Outfit-SemiBold.ttf") format("truetype");
}

:root {
  /* ============================================================
     RAW PALETTE — Colours 1.6
     Never reference these directly in product code. Use the
     semantic tokens below. Palette is intentionally softened —
     no pure black, no pure white.
     ============================================================ */

  /* Teal — primary brand, text, dark backgrounds */
  --teal-900: #00232B;   /* Black Teal */
  --teal-800: #003B49;   /* Text dark — primary body text */
  --teal-700: #004752;
  --teal-600: #00595E;
  --teal-500: #0C7E86;
  --teal-400: #579A9E;   /* Interactive borders only */
  --teal-300: #8FBDBF;
  --teal-200: #B8D9DB;
  --teal-100: #EBF1F2;

  /* Lavender */
  --lavender-900: #150C3D;
  --lavender-800: #3A3161;
  --lavender-700: #43396F;
  --lavender-600: #4E4285;
  --lavender-500: #7567B8;
  --lavender-400: #9387CC;   /* Interactive borders only */
  --lavender-300: #B6ACE3;
  --lavender-200: #D4CEF5;
  --lavender-100: #EDEBF5;

  /* Pounamu (greenstone) */
  --pounamu-800: #163D16;
  --pounamu-600: #215C21;
  --pounamu-500: #458D42;
  --pounamu-400: #629E5F;   /* Interactive borders only */
  --pounamu-300: #8EC28C;
  --pounamu-200: #B2D8AF;
  --pounamu-100: #EAF2E4;

  /* Rose */
  --rose-800: #6F1900;
  --rose-600: #991F1F;
  --rose-500: #CC3939;
  --rose-400: #E06969;   /* Interactive borders only */
  --rose-300: #ED9A9A;
  --rose-200: #F5C9C9;
  --rose-100: #F5E6E6;

  /* Sand — warm neutrals, never pure white */
  --sand-400: #999174;   /* Interactive borders only */
  --sand-300: #B8B19A;
  --sand-200: #D6D2C4;
  --sand-100: #F0EEE9;   /* Warm off-white surface */
  --sand-000: #FAF9F7;   /* White Sand — app background, replaces pure white */

  /* ============================================================
     SEMANTIC TOKENS — Volition themes collection (28 vars)
     Source: Design Components 1.7 → Variables → Volition themes.
     Two themes: "Default" (Decision Maker, teal) and "Supporter"
     (lavender). Values verified against Figma Variables panel.
     Bind components to these. Never reference raw palette.
     ============================================================ */

  /* --- Text --- */
  --text-dark:     var(--teal-800);   /* body & headings */
  --text-mid:      var(--teal-600);   /* secondary */
  --text-light:    var(--teal-500);   /* tertiary, captions */
  --text-inverted: var(--sand-000);   /* text on dark/coloured bg */

  /* --- Icon --- */
  --icon:          var(--teal-600);
  --icon-mid:      var(--teal-500);
  --icon-inverted: var(--sand-000);

  /* --- Borders --- */
  --borders:       var(--teal-400);   /* interactive borders */

  /* --- Backgrounds --- */
  --bg-800:        var(--teal-800);   /* dark fill (buttons, headers) */
  --bg-600:        var(--teal-600);
  --bg-200:        var(--teal-200);
  --bg-150:        #D6D2C4;           /* warm neutral @ 50% — unique to Default */
  --bg-100:        var(--sand-100);

  /* --- Panels --- */
  --panel-highlight: var(--sand-000);   /* White sand — raised surfaces */
  --panel-mid:       rgba(250, 249, 247, 0.5);  /* #FAF9F7 @ 50% */
  --panel-lowlight:  var(--bg-100);     /* = Background 100 */
  --panel-shadow:    var(--sand-300);   /* Sand 300 in Default */

  /* --- Status: error / delete --- */
  --error-default: var(--rose-600);
  --error-mid:     var(--rose-500);

  /* --- Focus --- */
  --focus:         var(--teal-900);
  --focus-stroke:  2px;

  /* --- Dividers --- */
  --divider-dark:    var(--teal-400);
  --divider-default: var(--teal-300);

  /* --- Buttons --- */
  --button-base: var(--teal-700);
  --button-mid:  var(--teal-500);

  /* ============================================================
     LEGACY SHORTHAND — kept so existing components keep working
     while we migrate call-sites to the real semantic names above.
     ============================================================ */
  --surface-app:         var(--bg-100);
  --surface-raised:      var(--panel-highlight);
  --surface-sunken:      var(--bg-100);
  --surface-inverse:     var(--bg-800);
  --fg-primary:          var(--text-dark);
  --fg-secondary:        var(--text-mid);
  --fg-tertiary:         var(--text-light);
  --fg-inverse:          var(--text-inverted);
  --fg-link:             var(--button-base);
  --border-subtle:       var(--divider-default);
  --border-default:      var(--divider-dark);
  --border-interactive:  var(--borders);
  --border-focus:        var(--focus);
  --accent-primary:      var(--button-base);
  --accent-primary-hover:var(--text-dark);
  --accent-secondary:    var(--button-mid);
  --accent-light:        var(--button-mid);
  --accent-muted:        var(--bg-200);
  --status-success:      var(--pounamu-600);
  --status-success-bg:   var(--pounamu-100);
  --status-warning:      var(--error-mid);
  --status-warning-bg:   var(--rose-100);
  --status-danger:       var(--error-default);
  --status-danger-bg:    var(--rose-100);
  --status-info:         var(--lavender-500);
  --status-info-bg:      var(--lavender-100);

  /* Focus ring — built from semantic --focus */
  --focus-ring: 0 0 0 var(--focus-stroke) var(--focus);

  /* ============================================================
     SPACING — 8pt grid with 4pt sub-step
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* ============================================================
     RADII — generous, friendly, never sharp
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;   /* default card */
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 9999px;

  /* ============================================================
     ELEVATION — soft, warm-tinted shadows.
     Uses teal-900 at low opacity (never pure black).
     ============================================================ */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 35, 43, 0.06),
            0 1px 1px rgba(0, 35, 43, 0.04);
  --elev-2: 0 2px 4px rgba(0, 35, 43, 0.06),
            0 4px 8px rgba(0, 35, 43, 0.06);
  --elev-3: 0 4px 12px rgba(0, 35, 43, 0.08),
            0 8px 24px rgba(0, 35, 43, 0.06);
  --elev-4: 0 12px 32px rgba(0, 35, 43, 0.12),
            0 24px 48px rgba(0, 35, 43, 0.08);

  /* ============================================================
     TOUCH TARGETS — WCAG 2.5.5 AAA
     ============================================================ */
  --touch-min: 44px;

  /* ============================================================
     MOTION — calm, no bounce. Neurologically considerate.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ============================================================
     TYPE — Mobile-first scale.
     Desktop values are tuned separately; these are the mobile
     source of truth. Sentence case ALWAYS. Never italic.
     ============================================================ */
  --font-family:        "Outfit", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;

  /* Scale — Volition source of truth. Sentence case always. Never italic,
     never all caps, no abbreviations. Paragraph/list spacing is the
     margin-bottom when this size heads a block. */

  /* Headers */
  --fs-hero:    40px;   --lh-hero:    48px;   --sp-hero:   32px;  /* Hero */
  --fs-xxl:     32px;   --lh-xxl:     40px;   --sp-xxl:    24px;  /* XXL / H1 */
  --fs-xl:      24px;   --lh-xl:      32px;   --sp-xl:     16px;  /* XL / H2 */

  /* Body */
  --fs-body-lg: 20px;   --lh-body-lg: 28px;   --sp-body-lg: 16px; /* Body large */
  --fs-base:    18px;   --lh-base:    28px;   --sp-base:    8px;  /* Body base */
  --fs-small:   16px;   --lh-small:   24px;   --sp-small:   8px;  /* Body small */

  /* Legacy / caption */
  --fs-caption: 12px;   --lh-caption: 16px;  /* Caption — use sparingly */
}

/* ============================================================
   THEME: SUPPORTER — lavender family
   Source: Design Components 1.7 → Variables → Volition themes
   (right column). Same 28 roles, re-mapped to lavender. A few
   entries stay identical across themes (White sand, Background 100
   mapping for panel-lowlight, the error/delete rose ramp, and
   Panel mid's #FAF9F7 @ 50%).
   ============================================================ */
[data-theme="supporter"] {
  /* Text */
  --text-dark:     var(--lavender-800);
  --text-mid:      var(--lavender-600);
  --text-light:    var(--lavender-500);
  --text-inverted: var(--sand-000);

  /* Icon */
  --icon:          var(--lavender-600);
  --icon-mid:      var(--lavender-500);
  --icon-inverted: var(--sand-000);

  /* Borders */
  --borders:       var(--lavender-400);

  /* Backgrounds */
  --bg-800:        var(--lavender-800);
  --bg-600:        var(--lavender-600);
  --bg-200:        var(--lavender-200);
  --bg-150:        #D3CEEB;            /* lavender warm neutral @ 50% */
  --bg-100:        var(--lavender-100);

  /* Panels */
  --panel-highlight: var(--sand-000);
  --panel-mid:       rgba(250, 249, 247, 0.5);
  --panel-lowlight:  var(--bg-100);     /* = Background 100 (now lavender-100) */
  --panel-shadow:    var(--lavender-400);

  /* Error / delete — same rose ramp in both themes */
  --error-default: var(--rose-600);
  --error-mid:     var(--rose-500);

  /* Focus */
  --focus:         var(--teal-900);     /* Teal 900 in both themes */
  --focus-stroke:  2px;

  /* Dividers */
  --divider-dark:    var(--lavender-400);
  --divider-default: var(--lavender-300);

  /* Buttons */
  --button-base: var(--lavender-700);
  --button-mid:  var(--lavender-500);

  /* Legacy shorthand re-resolves via cascade — no need to redeclare */
}

/* ============================================================
   DARK MODE — deferred until the light library is stable.
   Kept as a placeholder role-flip for now.
   ============================================================ */
[data-theme="dark"] {
  --surface-app:    var(--teal-900);
  --surface-raised: var(--teal-800);
  --surface-sunken: var(--teal-700);
  --surface-inverse: var(--sand-000);

  --fg-primary:   var(--sand-000);
  --fg-secondary: var(--teal-200);
  --fg-tertiary:  var(--teal-300);
  --fg-inverse:   var(--teal-800);
  --fg-link:      var(--lavender-300);

  --border-subtle:      rgba(255,255,255,0.08);
  --border-default:     rgba(255,255,255,0.16);
  --border-interactive: var(--teal-400);
  --border-focus:       var(--lavender-300);

  --accent-primary:       var(--teal-500);
  --accent-primary-hover: var(--teal-400);
  --accent-secondary:     var(--lavender-300);
  --accent-light:         var(--teal-600);
  --accent-muted:         var(--teal-700);

  --elev-1: 0 1px 2px rgba(0,0,0,0.32);
  --elev-2: 0 4px 12px rgba(0,0,0,0.36);
  --elev-3: 0 8px 24px rgba(0,0,0,0.44);
  --elev-4: 0 24px 48px rgba(0,0,0,0.52);
}

/* ============================================================
   BASE — semantic element styles (source of truth for markup)
   ============================================================ */
html, body {
  background: var(--surface-app);
  color: var(--fg-primary);
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-xxl);
  line-height: var(--lh-xxl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--fg-primary);
  text-wrap: balance;
  margin: 0;
}
h4, .h4 {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--fg-primary);
  margin: 0;
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  text-wrap: pretty;
  margin: 0;
}
.body-large {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.body-small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-secondary);
}
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-tertiary);
}

a, .link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 8%;
  text-underline-offset: 16%;
  text-decoration-skip-ink: auto;
  font-weight: var(--font-weight-medium);
}
a:hover { color: var(--teal-800); }

::selection { background: var(--lavender-200); color: var(--teal-800); }

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* Never italic — per brand */
em, i, cite, address, dfn { font-style: normal; font-weight: var(--font-weight-medium); }