/* Retinue design tokens: the single source of truth for colour, type, space, shape, depth and motion.
   Components (components.css) and pages read these; they never hard-code a value.
   Two themes share one vocabulary:
     night  (default)   the person's world: private, dark, lit by persona colour
     paper  [data-theme=paper]  the business world: daylight paper, same names, different values
   Documented, with live swatches, at /design-system/ and in shared/README.md.
   Layer order is declared here so every later file can slot into it. */
@layer tokens, base, components, page;

/* ---------- Registered property: --p (the active persona colour) can be tweened, so the page's light follows it ---------- */
@property --p { syntax: '<color>'; inherits: true; initial-value: #6ee7b7; }

@layer tokens {

:root {
  /* ---------- 1. Colour primitives (never used directly in components) ---------- */
  --night-950: #07090d; --night-900: #0c1018; --night-850: #10151f; --night-800: #151b28; --night-700: #1d2535;
  --snow-100: #eef1f6; --slate-300: #aab3c3; --slate-400: #9aa4b5; --slate-500: #6b7588;
  --mint-300: #6ee7b7; --blue-300: #7aa2ff; --violet-300: #a78bfa; --amber-300: #fbbf6a; --rose-400: #fb7185;
  --paper-100: #f5f2ea; --paper-75: #faf7ef; --paper-50: #fffdf8; --paper-line: #e4dfd2; --paper-line-2: #d3cdbb;
  --ink-900: #1b1d29; --ink-600: #5b6072; --ink-500: #666b7c; --ink-400: #8a8f9f;
  --indigo-800: #283593; --indigo-600: #3f51d1; --indigo-100: #e8eaf8;

  /* ---------- 2. Semantic colour: night theme (default) ---------- */
  color-scheme: dark;
  --bg: var(--night-950);          /* page */
  --bg-2: var(--night-900);        /* alternate band */
  --surface: var(--night-850);     /* cards, panels */
  --surface-2: var(--night-800);   /* raised inside a surface */
  --surface-3: var(--night-700);   /* hover / pressed */
  --line: rgba(255,255,255,.08);   /* hairline */
  --line-2: rgba(255,255,255,.14); /* control border */
  --ink: var(--snow-100);          /* primary text */
  --mute: var(--slate-400);        /* secondary text, 7.9:1 on bg */
  --soft: #8995aa;                 /* small tertiary text, still >= 4.5:1 */
  --dim: var(--slate-500);         /* decoration and disabled only, never small text */
  --accent: var(--mint-300);       /* brand accent */
  --accent-2: var(--blue-300);
  --accent-3: var(--violet-300);
  --accent-ink: var(--night-950);  /* text on a solid accent */
  --primary: var(--snow-100);      /* primary button fill */
  --primary-hover: #fff;
  --primary-ink: #0a0d12;
  --focus: var(--mint-300);
  --glass: rgba(7,9,13,.72);       /* translucent nav */
  /* Disclosure semantics. The same three colours the person's console uses. */
  --allow: var(--mint-300);  --allow-soft: rgba(110,231,183,.14);
  --coarse: var(--amber-300); --coarse-soft: rgba(251,191,106,.14);
  --deny: var(--rose-400);   --deny-soft: rgba(251,113,133,.14);
  /* Persona colour is injected per element as --p (and --p-soft from usecases.js); these derive the rest.
     --p-lit lifts any persona hue to a luminous tone that reads on night; on paper --p is used as is. */
  --p: var(--mint-300);
  --p-soft: rgba(110,231,183,.14);
  --p-ink: #fff;                   /* text on solid --p */
  --glow: var(--p-lit);            /* ambient light: follows the active persona (set --p on :root to retarget the page) */
  --glow-2: var(--p-lit-2);

  /* ---------- 3. Typography ---------- */
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-micro: 10.5px;                          /* mono labels */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lede: clamp(17px, 1.5vw, 20px);
  --fs-h4: 20px;
  --fs-h3: clamp(24px, 2.2vw, 30px);
  --fs-h2: clamp(36px, 4.8vw, 64px);
  --fs-h1: clamp(46px, 6.4vw, 92px);
  --fs-display: clamp(56px, 11vw, 168px);
  --lh-tight: 1.02; --lh-snug: 1.2; --lh-body: 1.6;
  --tracking-tight: -.02em; --tracking-label: .14em;

  /* ---------- 4. Space: a 4px base on a half-step scale ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-y: clamp(72px, 10vw, 144px);
  --gutter: 20px;
  --wrap: 1160px;
  --nav-h: 64px;
  /* Breakpoints (media queries cannot read variables; keep these in sync by hand):
     sm 640 · md 960 · lg 1200 */

  /* ---------- 5. Shape ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 32px; --r-pill: 999px;
  --arch-w: 380px;  /* a door is a box whose top corners are half its width: see .arch */
  --card-w: 392px;  /* a persona card: see .pcard */

  /* ---------- 6. Depth ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px -10px rgba(0,0,0,.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px -22px rgba(0,0,0,.7);
  --shadow-3: 0 1px 0 rgba(255,255,255,.07) inset, 0 40px 100px -30px rgba(0,0,0,.75);
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);
  --z-base: 0; --z-raised: 10; --z-nav: 50; --z-sheet: 60; --z-toast: 70;

  /* ---------- 7. Motion: one language, three signature moves ----------
     open   an arch or door opens        (clip + rise, --ease-open)
     focus  a value resolves             (blur to sharp, --ease-settle)
     fan    the retinue re-orders        (spring, --ease-spring)
     Everything else uses --dur-base with --ease-settle. */
  --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms; --dur-stage: 900ms;
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-open: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --stagger: 70ms;
  --blur-focus: 10px;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .18 5%, .55 11%, .88 17%, 1.04 23%, 1.08 29%, 1.03 38%, .995 50%, 1 70%, 1); }
}

/* Derived persona tones. Declared on * so they recompute from whichever --p an element (or its ancestor) sets.
   --p-lit lifts any persona hue to a luminous tone that reads on night; --p-lit-2 is its neighbour on the hue wheel. */
* { --p-lit: color-mix(in oklab, var(--p) 45%, white); --p-lit-2: color-mix(in oklab, var(--p-lit) 60%, var(--blue-300)); --p-tint: color-mix(in srgb, var(--p) 16%, transparent); }
@supports (color: oklch(from red l c h)) {
  * { --p-lit: oklch(from var(--p) .78 calc(c * 1.05) h); --p-lit-2: oklch(from var(--p) .76 c calc(h + 52)); }
}

/* ---------- Paper theme: the business world, in daylight ---------- */
[data-theme="paper"] {
  color-scheme: light;
  --bg: var(--paper-100);
  --bg-2: var(--paper-75);
  --surface: var(--paper-50);
  --surface-2: var(--paper-75);
  --surface-3: #f1ecdf;
  --line: var(--paper-line);
  --line-2: var(--paper-line-2);
  --ink: var(--ink-900);
  --mute: var(--ink-600);
  --soft: var(--ink-500);
  --dim: var(--ink-400);
  --accent: var(--indigo-800);
  --accent-2: var(--indigo-600);
  --accent-3: #7a3b8c;
  --accent-ink: #fff;
  --primary: var(--indigo-800);
  --primary-hover: var(--indigo-600);
  --primary-ink: #fff;
  --focus: var(--indigo-600);
  --glow: var(--p-lit);
  --glow-2: var(--p-lit-2);
  --glass: rgba(255,253,248,.82);
  --allow: #1f7a55;  --allow-soft: #e1f3ea;
  --coarse: #9a5b00; --coarse-soft: #fbefd5;
  --deny: #b3303f;   --deny-soft: #fbe4e6;
  --shadow-1: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 16px -10px rgba(30,30,70,.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -24px rgba(30,30,70,.4);
  --shadow-3: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px -40px rgba(30,30,70,.45);
}

/* On paper a persona colour is already dark enough to read: no lift. */
[data-theme="paper"], [data-theme="paper"] * { --p-lit: var(--p); --p-lit-2: color-mix(in oklab, var(--p) 70%, var(--accent-3)); }

/* ---------- Reduced motion: keep every state change, drop the travel ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-stage: 1ms; --stagger: 0ms; --blur-focus: 0px;
  }
}

/* ---------- Compatibility aliases ----------
   The person's console (me/styles.css) and the business console (shared/console.css) still declare their own
   variables. When a console adopts this file, these aliases let its existing rules keep working untouched. */
:root {
  --panel: var(--surface); --panel2: var(--surface-2); --line2: var(--line-2);
  --mint: var(--mint-300); --blue: var(--blue-300); --violet: var(--violet-300); --amber: var(--amber-300); --rose: var(--rose-400);
  --serif: var(--font-serif); --sans: var(--font-sans); --mono: var(--font-mono);
}

}