/*
 * AlphaScope — Design System Tokens
 *
 * Source of truth for every visual value in the app.
 * Defined as CSS custom properties so Tailwind utilities and raw CSS
 * can both consume them. See docs/design-system.md.
 *
 * Light mode lives on :root. Dark mode redefines the same variables
 * inside html.dark so every utility automatically swaps.
 */

:root {
  /* --------------------------------------------------------------
   * Color — neutrals (warm sand)
   * -------------------------------------------------------------- */
  --color-bg-page: #F7F5EF;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-2: #FAF8F2;
  --color-bg-muted: #F1EFE8;

  --color-border: #E6E1D5;
  --color-border-strong: #D3D1C7;

  --color-fg: #2A2A28;
  --color-fg-muted: #5F5E5A;
  --color-fg-subtle: #888780;
  --color-fg-faint: #B4B2A9;

  /* --------------------------------------------------------------
   * Color — accent (dusty blue)
   * -------------------------------------------------------------- */
  --color-accent: #6888B5;
  --color-accent-hover: #557399;
  --color-accent-soft: #E8EFF8;
  --color-accent-fg: #3D5478;
  /* Foreground on solid accent backgrounds — used by primary buttons,
     active filter chips, and similar. Same in both modes because the
     accent surface is always darker than this text. */
  --color-fg-accent-contrast: #FFFFFF;

  /* --------------------------------------------------------------
   * Color — semantic
   * -------------------------------------------------------------- */
  --color-success: #15803D;
  --color-success-bg: #EAF3DE;
  --color-success-fg: #3B6D11;

  --color-danger: #B91C1C;
  --color-danger-bg: #FCEBEB;
  --color-danger-fg: #791F1F;

  --color-warning: #BA7517;
  --color-warning-bg: #FAEEDA;
  --color-warning-fg: #854F0B;

  /* --------------------------------------------------------------
   * Typography
   * -------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;

  /* --------------------------------------------------------------
   * Radius
   * -------------------------------------------------------------- */
  --radius-pill: 4px;
  --radius-btn: 6px;
  --radius-card: 10px;
  --radius-hero: 14px;

  /* --------------------------------------------------------------
   * Shadow — used sparingly (popovers + modals only)
   * -------------------------------------------------------------- */
  --shadow-pop: 0 4px 12px -2px rgba(42, 42, 40, 0.08);
  --shadow-modal: 0 20px 40px -10px rgba(42, 42, 40, 0.15);
}

html.dark {
  /* --------------------------------------------------------------
   * Color — neutrals (warm dark)
   * -------------------------------------------------------------- */
  --color-bg-page: #1A1916;
  --color-bg-surface: #23211D;
  --color-bg-surface-2: #2C2A25;
  --color-bg-muted: #33302A;

  --color-border: #3D3A33;
  --color-border-strong: #4D4A42;

  --color-fg: #F0EDE5;
  --color-fg-muted: #B4B2A9;
  --color-fg-subtle: #888780;
  --color-fg-faint: #5F5E5A;

  /* --------------------------------------------------------------
   * Color — accent (lifted for dark backgrounds)
   * -------------------------------------------------------------- */
  --color-accent: #85A3CE;
  --color-accent-hover: #9CB6DD;
  --color-accent-soft: #2D3A4F;
  --color-accent-fg: #B5CDEB;
  --color-fg-accent-contrast: #FFFFFF;

  /* --------------------------------------------------------------
   * Color — semantic (dark mode)
   * -------------------------------------------------------------- */
  --color-success: #4ADE80;
  --color-success-bg: #1F3320;
  --color-success-fg: #BFE39A;

  --color-danger: #F87171;
  --color-danger-bg: #3D1F1F;
  --color-danger-fg: #F0B0B0;

  --color-warning: #FBBF24;
  --color-warning-bg: #3D2D14;
  --color-warning-fg: #F5D89A;

  /* Shadows shift slightly so they remain visible against dark surfaces. */
  --shadow-pop: 0 4px 12px -2px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------------------------------
 * Base resets
 * ---------------------------------------------------------------- */

html {
  /* Prevent flash of light theme on dark-preference loads.
     The actual class is set by an inline script in <head> before render. */
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-page);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tabular numbers wherever the helper class is applied. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------
 * Focus ring helper — applied via Tailwind utilities in templates,
 * but available as a class for hand-written CSS too.
 * ---------------------------------------------------------------- */
.focus-ring:focus-visible,
:focus-visible.focus-ring {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: inherit;
}