/*
  Design tokens — the single source of truth for color, spacing, and type.
  Every page/component should reference these custom properties, never hardcode a hex value,
  px size, or font stack directly. Values below are placeholders; retune them in a later
  phase without touching any page markup or component CSS.
*/

:root {
  /* ---- Color: background/surface ---- */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e2e4e9;

  /* ---- Color: text ---- */
  --color-text: #1a1d23;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  /* ---- Color: accent / semantic ---- */
  /* Sampled from the Knocturn Labs logo v2 (public/img/logo.png) — base #2986ad (the owl-eye/
     ring blue), hover/muted derived from it by lightness at fixed hue/saturation. */
  --color-accent: #2986ad;
  --color-accent-hover: #216c8c;
  --color-accent-muted: #b1d6e6;

  --color-success: #16a34a;
  --color-success-muted: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-muted: #fee2e2;
  --color-warning: #d97706;
  --color-warning-muted: #fef3c7;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ---- Radius / elevation ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
}

/* Dark-mode placeholder — same token names, different values, so components never need to
   know which mode is active. Retune alongside the light values in the later design pass. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161a;
    --color-surface: #1c1f26;
    --color-surface-raised: #23272f;
    --color-border: #2f333d;

    --color-text: #f4f5f7;
    --color-text-muted: #9ca3af;
    --color-text-inverse: #14161a;

    --color-accent: #41a7d2;
    --color-accent-hover: #62b6d9;
    --color-accent-muted: #0f2b37;

    --color-success: #22c55e;
    --color-success-muted: #14321f;
    --color-danger: #ef4444;
    --color-danger-muted: #3a1a1a;
    --color-warning: #f59e0b;
    --color-warning-muted: #3a2c0f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}