/*
 * Serenia design tokens.
 *
 * Three tiers, per the token architecture we follow:
 *   1. Primitives  — raw ramps. Never referenced by a component.
 *   2. Semantic    — named by role. The only tier components may use.
 *   3. Component   — scoped to one component, defined next to it.
 *
 * Ramps are OKLCH so steps move in perceived lightness at a constant hue.
 * One neutral ramp, one accent ramp, and only the status ramps we actually render.
 */

:root {
  /* ---------- Primitives: neutral ------------------------------------------ */
  /* Barely cool. A tinted gray reads as dirt once it sits next to a photo. */
  --n-0: oklch(1 0 0);
  --n-25: oklch(0.988 0.0015 250);
  --n-50: oklch(0.977 0.002 250);
  --n-100: oklch(0.962 0.003 250);
  --n-150: oklch(0.945 0.004 250);
  --n-200: oklch(0.922 0.005 250);
  --n-300: oklch(0.871 0.006 250);
  --n-400: oklch(0.755 0.008 250);
  --n-500: oklch(0.629 0.011 250);
  --n-600: oklch(0.513 0.013 250);
  --n-700: oklch(0.412 0.014 250);
  --n-800: oklch(0.305 0.013 250);
  --n-850: oklch(0.245 0.012 252);
  --n-900: oklch(0.195 0.011 252);
  --n-950: oklch(0.145 0.01 252);
  --n-1000: oklch(0.105 0.009 252);

  /* ---------- Primitives: accent ------------------------------------------- */
  /* Accent means "interactive". It is never used for decoration or on static text. */
  --a-50: oklch(0.968 0.014 250);
  --a-100: oklch(0.935 0.031 250);
  --a-200: oklch(0.884 0.056 250);
  --a-300: oklch(0.808 0.09 250);
  --a-400: oklch(0.702 0.13 250);
  --a-500: oklch(0.602 0.166 250);
  --a-600: oklch(0.523 0.171 250);
  --a-700: oklch(0.448 0.148 250);
  --a-800: oklch(0.374 0.118 250);
  --a-900: oklch(0.296 0.087 250);

  /* ---------- Primitives: status ------------------------------------------- */
  --ok-50: oklch(0.96 0.026 155);
  --ok-100: oklch(0.918 0.055 155);
  --ok-500: oklch(0.585 0.129 155);
  --ok-600: oklch(0.492 0.113 155);
  --ok-700: oklch(0.41 0.094 155);

  --warn-50: oklch(0.965 0.032 82);
  --warn-100: oklch(0.923 0.072 82);
  --warn-500: oklch(0.71 0.135 68);
  --warn-600: oklch(0.585 0.122 62);
  --warn-700: oklch(0.472 0.1 58);

  --bad-50: oklch(0.962 0.022 25);
  --bad-100: oklch(0.918 0.048 25);
  --bad-500: oklch(0.598 0.194 25);
  --bad-600: oklch(0.514 0.19 25);
  --bad-700: oklch(0.432 0.163 25);

  /* ---------- Semantic: surfaces ------------------------------------------- */
  --surface-canvas: var(--n-50);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-inset: var(--n-150);
  --surface-overlay: oklch(1 0 0 / 0.86);
  --surface-scrim: oklch(0.145 0.01 252 / 0.42);
  --surface-selected: var(--a-50);

  /* ---------- Semantic: text ---------------------------------------------- */
  --text-primary: var(--n-950);
  --text-secondary: var(--n-700);
  --text-tertiary: var(--n-600);
  --text-on-accent: var(--n-0);
  --text-on-inverse: var(--n-100);
  --text-link: var(--a-700);

  /* ---------- Semantic: lines --------------------------------------------- */
  /* `hairline` separates, `border` outlines a control, `strong` marks a state. */
  --line-hairline: var(--n-200);
  --line-border: var(--n-300);
  --line-strong: var(--n-500);

  /* ---------- Semantic: action -------------------------------------------- */
  --action-solid: var(--a-600);
  --action-solid-hover: var(--a-700);
  --action-solid-active: var(--a-800);
  --action-quiet: var(--a-50);
  --action-quiet-hover: var(--a-100);
  --action-ink: var(--a-700);
  --focus-ring: var(--a-500);

  --danger-solid: var(--bad-600);
  --danger-solid-hover: var(--bad-700);
  --danger-ink: var(--bad-700);
  --danger-quiet: var(--bad-50);

  /* ---------- Semantic: status -------------------------------------------- */
  --status-ok-ink: var(--ok-700);
  --status-ok-quiet: var(--ok-50);
  --status-ok-line: var(--ok-100);
  --status-warn-ink: var(--warn-700);
  --status-warn-quiet: var(--warn-50);
  --status-warn-line: var(--warn-100);
  --status-bad-ink: var(--bad-700);
  --status-bad-quiet: var(--bad-50);
  --status-bad-line: var(--bad-100);
  --status-neutral-ink: var(--n-700);
  --status-neutral-quiet: var(--n-100);
  --status-neutral-line: var(--n-200);

  /* ---------- Semantic: inverse chrome (sidebar) -------------------------- */
  --chrome-bg: var(--n-950);
  --chrome-raised: var(--n-900);
  --chrome-hover: oklch(1 0 0 / 0.07);
  --chrome-text: var(--n-100);
  --chrome-muted: var(--n-400);
  --chrome-line: oklch(1 0 0 / 0.1);

  /* ---------- Typography -------------------------------------------------- */
  --font-ui:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Restrained scale. Five sizes cover almost everything. */
  --type-caption: 0.8125rem; /* 13 */
  --type-ui: 0.875rem; /* 14 */
  --type-body: 1rem; /* 16 */
  --type-lead: 1.0625rem; /* 17 */
  --type-h3: 1.25rem; /* 20 */
  --type-h2: 1.5rem; /* 24 */
  --type-h1: 2rem; /* 32 */
  /* At least 2.5x body, or it is only bold body text. */
  --type-display: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-display: -0.022em;
  --tracking-heading: -0.014em;
  --tracking-caps: 0.055em;

  /* ---------- Space: 4px base --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Page gutter grows with the viewport instead of stepping at a preset width. */
  --gutter: clamp(1rem, 0.55rem + 2.1vw, 2.5rem);

  /* ---------- Radius ------------------------------------------------------ */
  /* Concentric: an outer radius equals its inner radius plus the padding between. */
  --radius-2: 0.375rem;
  --radius-3: 0.5rem;
  --radius-4: 0.625rem;
  --radius-5: 0.75rem;
  --radius-6: 0.875rem;
  --radius-7: 1rem;
  --radius-8: 1.25rem;
  --radius-pill: 999px;

  /* ---------- Elevation --------------------------------------------------- */
  /* Depth is a shadow. A line is structure. Never both for the same job. */
  --shadow-raised: 0 0 0 1px oklch(0 0 0 / 0.055), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.035);
  --shadow-raised-hover:
    0 0 0 1px oklch(0 0 0 / 0.075), 0 1px 2px -1px oklch(0 0 0 / 0.08), 0 4px 10px 0 oklch(0 0 0 / 0.055);
  --shadow-overlay: 0 0 0 1px oklch(0 0 0 / 0.06), 0 12px 28px -8px oklch(0 0 0 / 0.16), 0 4px 8px oklch(0 0 0 / 0.06);
  --shadow-float: 0 0 0 1px oklch(0 0 0 / 0.07), 0 24px 60px -12px oklch(0 0 0 / 0.26);
  --shadow-image-ring: 0 0 0 1px oklch(0 0 0 / 0.1);

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --duration-tap: 120ms;
  --duration-ui: 180ms;
  --duration-panel: 240ms;

  /* ---------- Sizing ----------------------------------------------------- */
  --control-h: 2.75rem;
  --control-h-lg: 3rem;
  /* 44px is the recommended touch target; phones step this up to 48px in base.css. */
  --hit-min: 2.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --measure: 68ch;
  --content-max: 90rem;
  --sidebar-w: 15.5rem;
  --sidebar-w-collapsed: 4.25rem;

  /* ---------- Z-index: a fixed scale, no ad-hoc values -------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-dialog: 400;
  --z-toast: 500;
  --z-skip: 600;
}

[data-theme='dark'] {
  --surface-canvas: var(--n-1000);
  --surface-raised: var(--n-950);
  --surface-sunken: var(--n-900);
  --surface-inset: var(--n-850);
  --surface-overlay: oklch(0.195 0.011 252 / 0.9);
  --surface-scrim: oklch(0.105 0.009 252 / 0.6);
  --surface-selected: oklch(0.296 0.087 250 / 0.35);

  --text-primary: var(--n-50);
  --text-secondary: var(--n-400);
  --text-tertiary: var(--n-500);
  --text-on-accent: var(--n-1000);
  --text-on-inverse: var(--n-100);
  --text-link: var(--a-300);

  --line-hairline: oklch(1 0 0 / 0.09);
  --line-border: oklch(1 0 0 / 0.16);
  --line-strong: oklch(1 0 0 / 0.34);

  /* Dark mode is not a mechanical inversion: vividness drops and the ramp widens. */
  --action-solid: var(--a-400);
  --action-solid-hover: var(--a-300);
  --action-solid-active: var(--a-200);
  --action-quiet: oklch(0.296 0.087 250 / 0.4);
  --action-quiet-hover: oklch(0.374 0.118 250 / 0.5);
  --action-ink: var(--a-300);
  --focus-ring: var(--a-400);

  --danger-solid: var(--bad-500);
  --danger-solid-hover: oklch(0.66 0.19 25);
  --danger-ink: oklch(0.76 0.15 25);
  --danger-quiet: oklch(0.432 0.163 25 / 0.28);

  --status-ok-ink: oklch(0.8 0.13 155);
  --status-ok-quiet: oklch(0.41 0.094 155 / 0.26);
  --status-ok-line: oklch(0.585 0.129 155 / 0.34);
  --status-warn-ink: oklch(0.84 0.13 78);
  --status-warn-quiet: oklch(0.472 0.1 58 / 0.28);
  --status-warn-line: oklch(0.71 0.135 68 / 0.34);
  --status-bad-ink: oklch(0.76 0.15 25);
  --status-bad-quiet: oklch(0.432 0.163 25 / 0.26);
  --status-bad-line: oklch(0.598 0.194 25 / 0.34);
  --status-neutral-ink: var(--n-300);
  --status-neutral-quiet: oklch(1 0 0 / 0.07);
  --status-neutral-line: oklch(1 0 0 / 0.12);

  --chrome-bg: oklch(0.125 0.009 252);
  --chrome-raised: var(--n-900);
  --chrome-hover: oklch(1 0 0 / 0.08);
  --chrome-text: var(--n-100);
  --chrome-muted: var(--n-400);
  --chrome-line: oklch(1 0 0 / 0.1);

  /* Layered depth shadows are invisible on dark surfaces: one ring does the job. */
  --shadow-raised: 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-raised-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
  --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.1), 0 16px 40px -12px oklch(0 0 0 / 0.6);
  --shadow-float: 0 0 0 1px oklch(1 0 0 / 0.1), 0 28px 70px -14px oklch(0 0 0 / 0.7);
  --shadow-image-ring: 0 0 0 1px oklch(1 0 0 / 0.1);
}

@media (prefers-contrast: more) {
  :root {
    --text-secondary: var(--n-800);
    --text-tertiary: var(--n-700);
    --line-hairline: var(--n-400);
    --line-border: var(--n-500);
    --action-solid: var(--a-700);
  }

  [data-theme='dark'] {
    --text-secondary: var(--n-200);
    --text-tertiary: var(--n-300);
    --line-hairline: oklch(1 0 0 / 0.28);
    --line-border: oklch(1 0 0 / 0.42);
  }
}