/*
  Unified design tokens. Derived from the Yarpiz CMS token file (the most mature
  token source across the eight audited projects). Every other stylesheet reads
  these custom properties and never uses raw colors, sizes, radii, durations or
  z-index numbers. Rules: unified-design/02-foundations.md.
  Changes against the Yarpiz original are listed in unified-design/07-conflicts-and-decisions.md
  under "Token changes". Verify with: node unified-design/tools/check-tokens.mjs <this file>

  Fonts: load one family per product (see 02-foundations.md "Typography").
  Persian or other RTL products override --font-sans (see 06-rtl-and-persian.md).

  Breakpoints cannot be custom properties. Use these literal values:
    phone   max-width: 650px   (type scale steps down, gutter narrows)
    tablet  max-width: 900px   (sidebars become drawers or top bars, record tables become cards)
    wide    min-width: 980px   (reading rail or side panel appears)
  Between 901px and 979px the layout is single column with no drawer.
  Dense tools with persistent side panels use 1180px instead for the panel to drawer switch.
*/

/* ------------------------------------------------------------ light theme */
:root {
  color-scheme: light;

  /* Families */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "JetBrains Mono", monospace;

  /* Neutrals */
  --ink: #0f172a;          /* headings, strong text */
  --ink-2: #334155;        /* body text */
  --ink-3: #475569;        /* captions, meta, muted text */
  --line: #e2e8f0;         /* hairlines */
  --line-2: #eef2f6;       /* very subtle dividers */
  --control-border: #64748b; /* form control boundary, 3:1 or more */
  --surface: #ffffff;      /* page */
  --surface-2: #f8fafc;    /* inset panels, code */
  --surface-3: #f1f5f9;    /* hover washes, neutral callout */

  /* Brand accent (blue by default). --accent is for fills,
     rules and marks. Text, links, focus rings and button fills use the
     darker --accent-ink. */
  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-ink-hover: #1e40af;
  --accent-soft: #eff6ff;
  --accent-line: #bfdbfe;
  --on-accent: #ffffff;

  /* Important callouts: violet, so they stay distinct from the brand blue. */
  --important-ink: #6d28d9;
  --important-soft: #f5f3ff;
  --important-line: #ddd6fe;

  /* Status inks (text safe), tints and lines */
  --info-ink: #1d6ad5;
  --info-soft: #eff6ff;
  --info-line: #bfdbfe;
  --success-ink: #15803d;
  --success-soft: #f0fdf4;
  --success-line: #bbf7d0;
  --warning-ink: #b45309;
  --warning-soft: #fffbeb;
  --warning-line: #fde68a;
  --danger-ink: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;
  --on-danger: #ffffff;

  /* Links keep the accent everywhere, also inside tinted callouts. */
  --link: var(--accent-ink);
  --link-hover: var(--accent-ink-hover);

  /* Code */
  --code-bg: var(--surface-2);
  --code-inline-bg: var(--surface-3);

  /* Type scale (rem at 16px root) */
  --text-xs: 0.8125rem;    /* 13px: badges, table heads, metadata */
  --text-sm: 0.9375rem;    /* 15px: captions, controls, code */
  --text-base: 1.0625rem;  /* 17px: body */
  --text-lg: 1.1875rem;    /* 19px: h4, lead */
  --text-xl: 1.375rem;     /* 22px: h3 */
  --text-2xl: 1.75rem;     /* 28px: h2 */
  --text-3xl: 2.5rem;      /* 40px: page title */

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

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

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 22px;
  --space-lg: 34px;
  --space-xl: 50px;
  --space-2xl: 72px;
  --space-3xl: 100px;

  /* Control geometry. Default 40px. Dense desktop tools use compact.
     Public mobile first pages and coarse pointers use touch. */
  --control-h: 40px;
  --control-h-compact: 32px;
  --control-h-touch: 44px;
  --control-pad-x: var(--space-sm);  /* field and button side padding, also the chevron inset */

  /* Radii */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadows (used sparingly: menus, dialogs, toasts, sticky banners) */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 1px rgb(15 23 42 / 0.04);
  --shadow: 0 4px 14px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.12), 0 4px 12px rgb(15 23 42 / 0.06);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration: 200ms;

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-ring: var(--focus-width) solid var(--accent-ink);

  /* Layout */
  --measure: 40rem;          /* reading column, about 75 characters */
  --rail-width: 16rem;       /* post sidebar: outline and main actions */
  --rail-gap: clamp(2rem, 4vw, 4rem);
  --page-wide: 72rem;        /* home, archive, header and footer frame */
  --gutter: var(--space-md);
  --scroll-offset: var(--space-md); /* space above a heading reached by an anchor */

  /* Layers */
  --z-sticky: 20;
  --z-header: 30;
  --z-menu: 40;
  --z-toast: 60;
  --z-dialog: 80;
  --z-tooltip: 90;
  --z-skip: 100;
}

/* Phones: one step smaller, narrower gutter. */
@media (max-width: 650px) {
  :root {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --gutter: 1rem;
  }
}

/* Coarse pointers get the touch control height. */
@media (pointer: coarse) {
  :root {
    --control-h: var(--control-h-touch);
    --control-h-compact: var(--control-h-touch);
  }
}

/* ------------------------------------------------------------ dark theme
   The same block twice: once for the system preference (unless the visitor
   chose light), once for an explicit choice. Keep them identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f8fafc;
    --ink-2: #cbd5e1;
    --ink-3: #a3b1c6;
    --line: #243044;
    --line-2: #1c2637;
    --control-border: #64748b;
    --surface: #0b1220;
    --surface-2: #111a2e;
    --surface-3: #162033;
    --accent: #60a5fa;
    --accent-ink: #60a5fa;
    --accent-ink-hover: #93c5fd;
    --accent-soft: #13233a;
    --accent-line: #1e3a8a;
    --on-accent: #0b1220;
    --important-ink: #c4b5fd;
    --important-soft: #1e1636;
    --important-line: #4c1d95;
    --info-ink: #60a5fa;
    --info-soft: #13233a;
    --info-line: #1e3a8a;
    --success-ink: #4ade80;
    --success-soft: #0f2a1c;
    --success-line: #166534;
    --warning-ink: #fbbf24;
    --warning-soft: #2a2410;
    --warning-line: #78350f;
    --danger-ink: #f87171;
    --danger-soft: #2b1620;
    --danger-line: #7f1d1d;
    --on-danger: #0b1220;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8fafc;
  --ink-2: #cbd5e1;
  --ink-3: #a3b1c6;
  --line: #243044;
  --line-2: #1c2637;
  --control-border: #64748b;
  --surface: #0b1220;
  --surface-2: #111a2e;
  --surface-3: #162033;
  --accent: #60a5fa;
  --accent-ink: #60a5fa;
  --accent-ink-hover: #93c5fd;
  --accent-soft: #13233a;
  --accent-line: #1e3a8a;
  --on-accent: #0b1220;
  --important-ink: #c4b5fd;
  --important-soft: #1e1636;
  --important-line: #4c1d95;
  --info-ink: #60a5fa;
  --info-soft: #13233a;
  --info-line: #1e3a8a;
  --success-ink: #4ade80;
  --success-soft: #0f2a1c;
  --success-line: #166534;
  --warning-ink: #fbbf24;
  --warning-soft: #2a2410;
  --warning-line: #78350f;
  --danger-ink: #f87171;
  --danger-soft: #2b1620;
  --danger-line: #7f1d1d;
  --on-danger: #0b1220;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.3);
}

/* Reduced motion: every transition and animation that reads these tokens
   becomes instant. Keyframe animations must also check this media query. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}