/* ============================================================================
   Phersona Design System — tokens.css
   The Relationship OS, run by agents. Calm · Confident · Accountable.

   The single consumable source of truth: primitive ramps, semantic tokens
   (light + dark), and the spacing/type/elevation/motion scales. Build
   components against the SEMANTIC tokens only — never hardcode a hex.

   Theming follows 00-foundations: light is the base layer, dark applies on the
   OS preference unless an explicit [data-theme="light"] override is set, and an
   explicit [data-theme="dark"] always wins. Roles are constant across themes —
   only the values flip.

   Palette: Indigo Ink — ink-blue structure · rose action (the one accent) ·
   sage secondary · lavender = AI · amber = caution. All text/background pairs
   verified WCAG 2.2 AA (body >=4.5:1, UI/large >=3:1).
   ========================================================================== */

:root {
  /* --- Primitive ramps (theme-agnostic; reach for these only when no semantic fits) --- */
  --indigo-50:#ECF1FF; --indigo-100:#E0E6FB; --indigo-200:#C2CCF2; --indigo-300:#A3B0E4;
  --indigo-400:#8090CE; --indigo-500:#5E6DAE; --indigo-600:#454F86; --indigo-700:#2A3566;
  --indigo-800:#1A2147; --indigo-900:#0E1430; --indigo-950:#070A16;

  --rose-50:#FFE9EC; --rose-100:#FFDDE1; --rose-200:#FFB6C0; --rose-300:#FF9DA7;
  --rose-400:#DE7E88; --rose-500:#C36571; --rose-600:#AD525E; --rose-700:#87303F;
  --rose-800:#640C23; --rose-900:#38020F;

  --sage-50:#EEF6F1; --sage-100:#CDE6D8; --sage-200:#A9D2BC; --sage-300:#82BA9E;
  --sage-400:#5C9C7C; --sage-500:#3E7C63; --sage-600:#356B54; --sage-700:#2A5544;
  --sage-800:#1F4A35; --sage-900:#143024;

  --lavender-50:#F5F5FF; --lavender-100:#EAEAF7; --lavender-200:#D4D4F1; --lavender-300:#BBBBD7;
  --lavender-400:#9C9BB6; --lavender-500:#83839D; --lavender-600:#696982; --lavender-700:#505068;
  --lavender-800:#333349; --lavender-900:#191927;

  --amber-50:#FBF3E2; --amber-100:#F7E6C8; --amber-200:#F2DCA8; --amber-300:#E8C77E;
  --amber-400:#D2A45E; --amber-500:#B8843E; --amber-600:#9A6B1E; --amber-700:#7A5310;
  --amber-800:#5C4621; --amber-900:#3A2E16;

  --neutral-50:#F4F7FF; --neutral-100:#E8EBF4; --neutral-200:#D4D7E0; --neutral-300:#BBBDC6;
  --neutral-400:#9B9EA6; --neutral-500:#83868E; --neutral-600:#696C73; --neutral-700:#505259;
  --neutral-800:#33353C; --neutral-900:#181A20;

  /* --- Typography --- */
  --font-sans: "Plus Jakarta Sans", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Arabic",
    "Noto Sans SC", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.8125rem; --text-base:.875rem;
  --text-md:1rem; --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem;
  --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* --- Spacing (4px base) --- */
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* --- Radii --- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-field:10px; --radius-lg:12px;
  --radius-xl:16px; --radius-full:9999px;   /* --radius-field: the soft form-field corner (between md and lg) */

  /* --- Control heights / density --- */
  --control-sm:28px; --control-md:32px; --control-lg:40px;
  --row-list:48px; --row-list-compact:36px; --row-table:44px; --row-table-compact:32px;

  /* --- Icon sizes (Lucide; 1.5px stroke) --- */
  --icon-xs:12px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:32px;

  /* --- Motion --- */
  --duration-instant:0ms; --duration-fast:120ms; --duration-base:160ms;
  --duration-slow:240ms; --duration-slower:320ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-entrance:cubic-bezier(.25,1,.5,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --ease-emphasized:cubic-bezier(.3,0,0,1);

  /* --- Data-viz categorical sequence (CVD-verified 2026-06-29; see 01-color.md).
     Theme-agnostic: these hues are tuned to read in both light and dark. Pair every
     series with a label or pattern (Color-Plus-One) — never hue alone. --- */
  --viz-1:#5E6DAE; --viz-2:#806375; --viz-3:#8E8DC4; --viz-4:#B8843E;
  --viz-5:#C36571; --viz-6:#788FA1; --viz-7:#3E7C63;
  --viz-positive:#3E7C63; --viz-negative:#C36571;   /* diverging endpoints (lean on lightness + labels too) */

  /* --- Z-index (semantic layers) --- */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-nav:200; --z-dropdown:1000;
  --z-overlay:1100; --z-drawer:1150; --z-modal:1200; --z-popover:1300;
  --z-toast:1400; --z-tooltip:1500;

  /* --- Breakpoints (reference) & containers --- */
  --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;
  --container-prose:680px; --container-content:960px; --container-wide:1280px;
}

/* ============================================================================
   SEMANTIC TOKENS — light is the base layer
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-sunken:#ECEFF9;          /* cool indigo well / sidebar (no sage tint) */
  --border:#E3E7F0;
  --border-strong:#848AA0;           /* input strokes / structural — >=3:1 on surface */

  --ink:#1B2150;                     /* deep indigo (not near-black) — the theme shows in the text */
  --ink-muted:#4A5184;               /* clearly indigo-blue */
  --ink-subtle:#5C64A0;              /* indigo */

  --brand:#1B2150;                   /* deep indigo; flips to lavender on dark */

  --accent:#AD525E;                  /* rose — the one action colour */
  --accent-hover:#9A4651;
  --accent-active:#87404A;
  --accent-ink:#FFFFFF;

  --accent-2:#3E7C63;                /* sage — secondary / positive emphasis */
  --accent-2-hover:#356B54;
  --accent-2-ink:#FFFFFF;

  --accent-soft:#F4D6DB;    --accent-soft-ink:#7E2E3A;     /* pastel-rose button (R2) */
  --accent-2-soft:#D6ECE0;  --accent-2-soft-ink:#1F4A35;   /* pastel-sage button (S2) */

  --field-border:#B8BECD;   --field-focus:#5E6DAE;         /* form fields — soft border, calm indigo focus ring (never rose) */
  --disabled-bg:#ECEEF4;    --disabled-fg:#797E96;         /* disabled controls — neutral, clearly inert */

  --ai-bg:#C3C3DE;                   /* lavender — AI only */
  --ai-fg:#2C2C63;

  --success-bg:#CDE6D8;              /* sage — healthy / active */
  --success-fg:#1F4A35;
  --warning-bg:#F4E3C3;              /* amber — caution / at-risk */
  --warning-fg:#74510F;
  --alert-bg:#F4D9D6;                /* rose-tint — error / destructive */
  --alert-fg:#8A3340;

  --avatar-bg:#E0E6FB;               /* indigo tint */
  --avatar-fg:#2A3566;

  --focus-ring:#AD525E;
  --overlay:rgba(14,20,48,.22);      /* light, transparent scrim — lean on the blur */
  --selection-bg:rgba(173,82,94,.18);

  /* Elevation — indigo-tinted, light */
  --shadow-xs:0 1px 2px rgba(13,20,69,.06);
  --shadow-sm:0 1px 2px rgba(13,20,69,.06), 0 2px 4px rgba(13,20,69,.05);
  --shadow-md:0 4px 8px rgba(13,20,69,.08), 0 2px 4px rgba(13,20,69,.06);
  --shadow-lg:0 12px 24px rgba(13,20,69,.12), 0 4px 8px rgba(13,20,69,.08);
  --shadow-xl:0 24px 48px rgba(13,20,69,.16);
}

/* --- Dark: follows the OS unless an explicit light override is set --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:#04060C;
    --surface:#0C1024;
    --surface-sunken:#10142E;
    --border:#1C2140;
    --border-strong:#5A63A0;

    --ink:#ECEEF6;
    --ink-muted:#A8ABC8;
    --ink-subtle:#8B8FAE;

    --brand:#C3C3DE;

    --accent:#D58A93;
    --accent-hover:#E09AA2;
    --accent-active:#C77E87;
    --accent-ink:#1A0A0E;

    --accent-2:#79C39E;
    --accent-2-hover:#8AD0AC;
    --accent-2-ink:#06140D;

    --accent-soft:#3F2930;    --accent-soft-ink:#F0C3CA;
    --accent-2-soft:#1C3A2B;  --accent-2-soft-ink:#BCE2CE;

    --field-border:#454D78;   --field-focus:#A3B0E4;
    --disabled-bg:#161A24;    --disabled-fg:#666C8C;

    --ai-bg:#2B2F57;
    --ai-fg:#CBCBE8;

    --success-bg:#14261D;
    --success-fg:#9FD8B8;
    --warning-bg:#2C2410;
    --warning-fg:#E8C98A;
    --alert-bg:#3A1F25;
    --alert-fg:#E8A9B1;

    --avatar-bg:#232A4A;
    --avatar-fg:#C8CEF2;

    --focus-ring:#D58A93;
    --overlay:rgba(0,0,0,.45);
    --selection-bg:rgba(213,138,147,.30);

    /* Depth in dark = lighter surface + border; shadow only reinforces */
    --shadow-xs:none;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 12px rgba(0,0,0,.45);
    --shadow-lg:0 12px 28px rgba(0,0,0,.55);
    --shadow-xl:0 24px 56px rgba(0,0,0,.6);
  }
}

/* --- Explicit dark override (user toggle) always wins --- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:#04060C;
  --surface:#0C1024;
  --surface-sunken:#10142E;
  --border:#1C2140;
  --border-strong:#5A63A0;

  --ink:#ECEEF6;
  --ink-muted:#A8ABC8;
  --ink-subtle:#8B8FAE;

  --brand:#C3C3DE;

  --accent:#D58A93;
  --accent-hover:#E09AA2;
  --accent-active:#C77E87;
  --accent-ink:#1A0A0E;

  --accent-2:#79C39E;
  --accent-2-hover:#8AD0AC;
  --accent-2-ink:#06140D;

  --accent-soft:#3F2930;    --accent-soft-ink:#F0C3CA;
  --accent-2-soft:#1C3A2B;  --accent-2-soft-ink:#BCE2CE;

  --field-border:#454D78;   --field-focus:#A3B0E4;
  --disabled-bg:#161A24;    --disabled-fg:#666C8C;

  --ai-bg:#2B2F57;
  --ai-fg:#CBCBE8;

  --success-bg:#14261D;
  --success-fg:#9FD8B8;
  --warning-bg:#2C2410;
  --warning-fg:#E8C98A;
  --alert-bg:#3A1F25;
  --alert-fg:#E8A9B1;

  --avatar-bg:#232A4A;
  --avatar-fg:#C8CEF2;

  --focus-ring:#D58A93;
  --overlay:rgba(0,0,0,.45);
  --selection-bg:rgba(213,138,147,.30);

  --shadow-xs:none;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 12px 28px rgba(0,0,0,.55);
  --shadow-xl:0 24px 56px rgba(0,0,0,.6);
}

/* ============================================================================
   prefers-contrast: more — strengthen at the TOKEN layer, both themes
   Hairlines gain structural weight, the weakest text tier steps up toward --ink,
   field strokes harden. Theme-agnostic: only remaps to already-theme-correct
   tokens, so it works in light and dark without per-mode duplication.
   (The focus outline widens to 3px in components.css, which owns focus.)
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --border:#848AA0;                /* light: hairlines read at structural strength */
    --ink-subtle:var(--ink-muted);   /* raise the weakest text tier up a notch (both themes) */
    --field-border:var(--border-strong);
    --disabled-fg:var(--ink-muted);  /* disabled controls stay legible */
  }
  [data-theme="dark"] { --border:#5A63A0; }            /* explicit dark toggle */
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --border:#5A63A0; } /* OS dark, no light override */
}

/* ============================================================================
   BASE — minimal element defaults so the tokens render correctly
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--bg);
}

::selection { background: var(--selection-bg); }

h1,h2,h3,h4 { font-weight: var(--weight-semibold); text-wrap: balance; margin: 0; }
h1 { font-size: var(--text-3xl); line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: var(--text-2xl); line-height: 1.25; letter-spacing: -.015em; }
h3 { font-size: var(--text-xl); line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: var(--text-lg); line-height: 1.4; letter-spacing: -.005em; }

.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Script-aware: never track non-Latin; give it room to breathe */
:lang(hi), :lang(mr), :lang(ne) { line-height: 1.6; letter-spacing: 0; }
:lang(ar), :lang(ur), :lang(fa) { line-height: 1.7; letter-spacing: 0; }

/* Reduced motion is a supported mode, not a courtesy */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}