/* NextDocs Foundation — tokens.css
   Three tiers: primitives (this file only) → semantic (views/components)
   → component tokens. Every semantic colour has a light and a dark value.
   Contrast targets (WCAG 2.2 AA): text ≥ 4.5:1, focus/borders-strong ≥ 3:1. */

:root {
  /* ---- Primitives ---- */
  --p-white: #ffffff;
  --p-neutral-25: #f6f8fa;
  --p-neutral-50: #eff2f5;
  --p-neutral-100: #e6eaef;
  --p-neutral-200: #d1d9e0;
  --p-neutral-400: #818b98;
  --p-neutral-600: #59636e;
  --p-neutral-800: #25292e;
  --p-neutral-900: #1f2328;
  --p-ink-950: #0d1117;
  --p-ink-900: #151b23;
  --p-ink-850: #1c222b;
  --p-ink-700: #3d444d;
  --p-ink-500: #656c76;
  --p-ink-300: #9198a1;
  --p-ink-100: #e6edf3;
  --p-blue-700: #0550ae;
  --p-blue-600: #0969da;
  --p-blue-100: #ddf4ff;
  --p-blue-400: #4493f8;
  --p-blue-300: #79c0ff;
  --p-blue-950: #0c2d6b;
  --p-green-700: #116329;
  --p-green-100: #dafbe1;
  --p-green-400: #3fb950;
  --p-amber-700: #7d4e00;
  --p-amber-100: #fff8c5;
  --p-amber-400: #d29922;
  --p-red-700: #a40e26;
  --p-red-100: #ffebe9;
  --p-red-400: #f85149;

  /* ---- Semantic: neutrals ---- */
  --color-bg-canvas: var(--p-white);
  --color-surface: var(--p-neutral-25);
  --color-surface-hover: var(--p-neutral-50);
  --color-border: var(--p-neutral-200);
  --color-border-strong: var(--p-neutral-400);
  --color-text-primary: var(--p-neutral-900);
  --color-text-secondary: var(--p-neutral-800);
  --color-text-muted: var(--p-neutral-600);
  --color-text-link: var(--p-blue-600);

  /* ---- Semantic: brand ---- */
  --color-brand: var(--p-blue-600);
  --color-brand-hover: var(--p-blue-700);
  --color-brand-subtle: var(--p-blue-100);
  --color-brand-strong: var(--p-blue-700); /* brand text on brand-subtle (≥4.5:1) */
  --color-brand-on: var(--p-white);

  /* ---- Semantic: status ramp ---- */
  --color-status-neutral-fg: var(--p-neutral-800);
  --color-status-neutral-bg: var(--p-neutral-50);
  --color-status-neutral-border: var(--p-neutral-400);
  --color-status-info-fg: var(--p-blue-700);
  --color-status-info-bg: var(--p-blue-100);
  --color-status-info-border: var(--p-blue-600);
  --color-status-success-fg: var(--p-green-700);
  --color-status-success-bg: var(--p-green-100);
  --color-status-success-border: var(--p-green-700);
  --color-status-warning-fg: var(--p-amber-700);
  --color-status-warning-bg: var(--p-amber-100);
  --color-status-warning-border: var(--p-amber-700);
  --color-status-danger-fg: var(--p-red-700);
  --color-status-danger-bg: var(--p-red-100);
  --color-status-danger-border: var(--p-red-700);

  /* ---- Overlay (drawer / modal backdrop) ---- */
  --color-overlay: rgba(13, 17, 23, 0.45);

  /* ---- Focus ring (≥ 3:1 on every surface) ---- */
  --color-focus: var(--p-blue-600);
  --focus-ring: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-focus);

  /* ---- Spacing (4 px 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-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem;
  --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4);
  --space-lg: var(--space-6); --space-xl: var(--space-10);

  /* ---- Sizing ---- */
  --control-sm: 2rem; --control-md: 2.5rem; --control-lg: 3rem;
  --touch-min: 1.5rem; --touch-primary: 2.75rem;
  --icon-xs: 0.75rem; --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem;

  /* ---- Type ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --leading-tight: 1.25; --leading-normal: 1.6;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --measure: 65ch;

  /* ---- Radius / shadow / z / motion ---- */
  --radius-1: 4px; --radius-2: 6px; --radius-3: 12px;
  --radius-control: var(--radius-2); --radius-card: var(--radius-3); --radius-pill: 999px;
  --shadow-raised: 0 1px 2px rgba(31, 35, 40, 0.08);
  --shadow-overlay: 0 8px 24px rgba(31, 35, 40, 0.16);
  --shadow-modal: 0 16px 48px rgba(31, 35, 40, 0.24);
  --z-sticky: 10; --z-drawer: 40; --z-overlay: 50; --z-modal: 60; --z-toast: 70;
  --motion-fast: 100ms; --motion-base: 200ms; --motion-slow: 300ms;

  /* ---- Layout (breakpoints 640/768/1024/1280 are used in media queries) ---- */
  --container-narrow: 864px; --container-default: 1296px;

  /* ---- Component tokens ---- */
  --topbar-height: 3.5rem;
  --sidebar-width: 17rem;
  --toc-width: 14rem;
  --code-bg: var(--color-surface);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg-canvas: var(--p-ink-950);
  --color-surface: var(--p-ink-900);
  --color-surface-hover: var(--p-ink-850);
  --color-border: var(--p-ink-700);
  --color-border-strong: var(--p-ink-500);
  --color-text-primary: var(--p-ink-100);
  --color-text-secondary: var(--p-ink-100);
  --color-text-muted: var(--p-ink-300);
  --color-text-link: var(--p-blue-400);

  --color-brand: var(--p-blue-400);
  --color-brand-hover: var(--p-blue-300);
  --color-brand-subtle: var(--p-blue-950);
  --color-brand-strong: var(--p-blue-300);
  --color-brand-on: var(--p-ink-950);

  --color-status-neutral-fg: var(--p-ink-100);
  --color-status-neutral-bg: var(--p-ink-850);
  --color-status-neutral-border: var(--p-ink-500);
  --color-status-info-fg: var(--p-blue-300);
  --color-status-info-bg: var(--p-blue-950);
  --color-status-info-border: var(--p-blue-400);
  --color-status-success-fg: var(--p-green-400);
  --color-status-success-bg: var(--p-ink-850);
  --color-status-success-border: var(--p-green-400);
  --color-status-warning-fg: var(--p-amber-400);
  --color-status-warning-bg: var(--p-ink-850);
  --color-status-warning-border: var(--p-amber-400);
  --color-status-danger-fg: var(--p-red-400);
  --color-status-danger-bg: var(--p-ink-850);
  --color-status-danger-border: var(--p-red-400);

  --color-focus: var(--p-blue-400);
  --color-overlay: rgba(1, 4, 9, 0.65);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}