/* LOCKED (Pattern 3): pinned by test/guards/landing_page_guard_test.rb; see docs/ai/patterns/PATTERN_3_LANDING_PAGE_LOCK.md */
/*
 * Design tokens: the only place a color, radius or type size is defined.
 * Every var(--x) used in app/assets/stylesheets must be defined here
 * (test/integration/css_tokens_test.rb checks it).
 *
 * Theme: light by default, dark when the system prefers it. data-theme is
 * honored on <html> only: data-theme="dark" forces dark, and
 * data-theme="light" opts out of the system dark block.
 * Contrast pairs and their ratios are listed in the step 1 receipt; every
 * text pair is at least 4.5:1.
 */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #f3f5f8;
  --border: #c9d1db;
  --text: #111827;
  --text-muted: #4b5563;
  --accent: #1d4ed8;
  --accent-pressed: #1e40af;
  --on-accent: #ffffff;
  --success: #15803d;
  --warning: #b45309;
  --danger: #b91c1c;
  --focus-ring: #1d4ed8;
  --logo-plate: #f5f9fa;   /* the logo PNG's own background, sampled at its corners */

  --radius-card: 12px;
  --radius-input: 8px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-2xl: 2rem;     /* 32px */
  --text-xl: 1.5rem;    /* 24px */
  --text-lg: 1.125rem;  /* 18px */
  --text-md: 1rem;      /* 16px */
  --text-sm: 0.875rem;  /* 14px */
  --text-xs: 0.75rem;   /* 12px */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --tap-min: 44px;
  --button-height: 48px;
  --logo-height: 56px;     /* the header logo; the brand row is this plus --space-1 above and below */
}

@media (min-width: 900px) {
  :root {
    --logo-height: 72px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0b0d10;
    --surface: #161a20;
    --border: #2c333d;
    --text: #f3f5f8;
    --text-muted: #a3acb8;
    --accent: #60a5fa;
    --accent-pressed: #93c5fd;
    --on-accent: #0b0d10;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --focus-ring: #93c5fd;
    --logo-plate: #f5f9fa;
  }
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0d10;
  --surface: #161a20;
  --border: #2c333d;
  --text: #f3f5f8;
  --text-muted: #a3acb8;
  --accent: #60a5fa;
  --accent-pressed: #93c5fd;
  --on-accent: #0b0d10;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --focus-ring: #93c5fd;
  --logo-plate: #f5f9fa;
}