/* ==========================================================================
   Design tokens. The only file allowed to hold raw colours, font stacks and
   scale values. Everything else references these variables.
   Spec: DESIGN-SYSTEM.md. Brand slot: §2 "Brand layer".
   Dark mode: `.dark` or `[data-theme="dark"]` on any ancestor (usually <html>).
   ========================================================================== */

:root {
  /* --- Brand layer: replace these from the project's approved mockups --- */
  --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-display: var(--ds-font-sans);
  --ds-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --ds-accent: #18181b;
  --ds-accent-hover: #27272a;
  --ds-on-accent: #ffffff;
  --ds-accent-soft: rgb(24 24 27 / 0.06);

  /* --- Surfaces (light) --- */
  --ds-bg: #fafafa;
  --ds-surface: #ffffff;
  --ds-surface-2: #f4f4f5;
  --ds-surface-inverse: #18181b;
  --ds-overlay: rgb(9 9 11 / 0.48);

  /* --- Ink (text) --- */
  --ds-ink: #18181b;
  --ds-ink-2: #52525b;
  --ds-ink-3: #8a8a93;
  --ds-ink-inverse: #fafafa;

  /* --- Lines: hairlines are shadows (§1.3) --- */
  --ds-line: rgb(9 9 11 / 0.1);
  --ds-line-strong: rgb(9 9 11 / 0.18);
  --ds-focus: #2563eb;

  /* --- Interaction: black alpha, never grey hex (§1.4) --- */
  --ds-hover: rgb(9 9 11 / 0.04);
  --ds-active: rgb(9 9 11 / 0.07);

  /* --- Status --- */
  --ds-danger: #dc2626;
  --ds-danger-soft: rgb(220 38 38 / 0.1);
  --ds-warning: #b45309;
  --ds-warning-soft: rgb(217 119 6 / 0.12);
  --ds-success: #059669;
  --ds-success-soft: rgb(5 150 105 / 0.1);
  --ds-info: #0284c7;
  --ds-info-soft: rgb(2 132 199 / 0.1);

  /* --- Skeleton --- */
  --ds-skeleton: rgb(9 9 11 / 0.06);
  --ds-skeleton-shine: rgb(255 255 255 / 0.6);

  /* --- Type scale: size / line-height (§3) --- */
  --ds-text-xs: 12px;   --ds-text-xs-lh: 16px;
  --ds-text-sm: 13px;   --ds-text-sm-lh: 18px;
  --ds-text-base: 14px; --ds-text-base-lh: 20px;
  --ds-text-md: 16px;   --ds-text-md-lh: 24px;
  --ds-text-lg: 20px;   --ds-text-lg-lh: 28px;
  --ds-text-xl: 24px;   --ds-text-xl-lh: 32px;
  --ds-text-2xl: 32px;  --ds-text-2xl-lh: 40px;
  --ds-text-3xl: 48px;  --ds-text-3xl-lh: 56px;
  --ds-tracking-tight: -0.011em;
  --ds-tracking-display: -0.022em;

  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;

  /* --- Space: 4px grid (§4) --- */
  --ds-space-0: 0px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* --- Control heights (§4) --- */
  --ds-control-sm: 28px;
  --ds-control: 32px;
  --ds-control-lg: 40px;

  /* --- Radius: scales with surface size (§5) --- */
  --ds-radius-sm: 4px;
  --ds-radius-control: 6px;
  --ds-radius-card: 10px;
  --ds-radius-panel: 14px;
  --ds-radius-full: 9999px;

  /* --- Elevation --- */
  --ds-ring: 0 0 0 1px var(--ds-line);
  --ds-ring-strong: 0 0 0 1px var(--ds-line-strong);
  --ds-focus-ring: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-focus);
  --ds-shadow-sm: 0 1px 2px rgb(9 9 11 / 0.06);
  --ds-shadow-md: 0 4px 12px rgb(9 9 11 / 0.08), 0 1px 3px rgb(9 9 11 / 0.06);
  --ds-shadow-lg: 0 16px 40px rgb(9 9 11 / 0.16), 0 2px 6px rgb(9 9 11 / 0.08);

  /* --- Motion (§7) --- */
  --ds-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-duration-fast: 120ms;
  --ds-duration: 180ms;
  --ds-duration-slow: 260ms;

  /* --- Layers --- */
  --ds-z-dropdown: 30;
  --ds-z-sticky: 40;
  --ds-z-overlay: 50;
  --ds-z-dialog: 60;
  --ds-z-toast: 70;

  /* --- Icon sizes (ICONS in §8) --- */
  --ds-icon-sm: 14px;
  --ds-icon: 16px;
  --ds-icon-lg: 20px;

  color-scheme: light;
}

.dark,
[data-theme="dark"] {
  --ds-accent: #fafafa;
  --ds-accent-hover: #e4e4e7;
  --ds-on-accent: #18181b;
  --ds-accent-soft: rgb(250 250 250 / 0.08);

  --ds-bg: #09090b;
  --ds-surface: #131316;
  --ds-surface-2: #1c1c20;
  --ds-surface-inverse: #fafafa;
  --ds-overlay: rgb(0 0 0 / 0.6);

  --ds-ink: #fafafa;
  --ds-ink-2: #a1a1aa;
  --ds-ink-3: #71717a;
  --ds-ink-inverse: #18181b;

  --ds-line: rgb(255 255 255 / 0.1);
  --ds-line-strong: rgb(255 255 255 / 0.18);
  --ds-focus: #60a5fa;

  --ds-hover: rgb(255 255 255 / 0.05);
  --ds-active: rgb(255 255 255 / 0.09);

  --ds-danger: #f87171;
  --ds-danger-soft: rgb(248 113 113 / 0.14);
  --ds-warning: #fbbf24;
  --ds-warning-soft: rgb(251 191 36 / 0.14);
  --ds-success: #34d399;
  --ds-success-soft: rgb(52 211 153 / 0.14);
  --ds-info: #38bdf8;
  --ds-info-soft: rgb(56 189 248 / 0.14);

  --ds-skeleton: rgb(255 255 255 / 0.07);
  --ds-skeleton-shine: rgb(255 255 255 / 0.08);

  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --ds-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
  --ds-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3);

  color-scheme: dark;
}

/* Vendored for a static site: dark mode also follows the OS preference
   (prefers-color-scheme) because these sites ship no JavaScript.
   Values are identical to the .dark block above. */
@media (prefers-color-scheme: dark) {
  :root {
    --ds-accent: #fafafa;
    --ds-accent-hover: #e4e4e7;
    --ds-on-accent: #18181b;
    --ds-accent-soft: rgb(250 250 250 / 0.08);

    --ds-bg: #09090b;
    --ds-surface: #131316;
    --ds-surface-2: #1c1c20;
    --ds-surface-inverse: #fafafa;
    --ds-overlay: rgb(0 0 0 / 0.6);

    --ds-ink: #fafafa;
    --ds-ink-2: #a1a1aa;
    --ds-ink-3: #71717a;
    --ds-ink-inverse: #18181b;

    --ds-line: rgb(255 255 255 / 0.1);
    --ds-line-strong: rgb(255 255 255 / 0.18);
    --ds-focus: #60a5fa;

    --ds-hover: rgb(255 255 255 / 0.05);
    --ds-active: rgb(255 255 255 / 0.09);

    --ds-danger: #f87171;
    --ds-danger-soft: rgb(248 113 113 / 0.14);
    --ds-warning: #fbbf24;
    --ds-warning-soft: rgb(251 191 36 / 0.14);
    --ds-success: #34d399;
    --ds-success-soft: rgb(52 211 153 / 0.14);
    --ds-info: #38bdf8;
    --ds-info-soft: rgb(56 189 248 / 0.14);

    --ds-skeleton: rgb(255 255 255 / 0.07);
    --ds-skeleton-shine: rgb(255 255 255 / 0.08);

    --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --ds-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
    --ds-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3);

    color-scheme: dark;
  }
}