/* Design tokens ported from allbrandsua (see specs/001-brands-aggregator/design-reference.md) */
/* Breakpoints (research.md #22): mobile-first (min-width), two steps —
   --bp-tablet: 48rem (768px, tablet/landscape-phone), --bp-desktop: 64rem
   (1024px, desktop). Documented here as reference only: media query
   conditions can't consume CSS custom properties, so base.css's actual
   `@media (min-width: 48rem)`/`(min-width: 64rem)` rules restate these
   values literally. */
:root {
  --background: 0 0% 96%;
  --foreground: 0 0% 9%;

  --card: 0 0% 98%;
  --card-foreground: 0 0% 9%;

  --primary: 20 90% 48%;
  --primary-foreground: 33 100% 96%;

  --secondary: 0 0% 32%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 63%;
  --muted-foreground: 0 0% 9%;

  --accent: 47 100% 96%;
  --accent-foreground: 37 92% 50%;

  --destructive: 0 72% 50%;
  --destructive-foreground: 0 85% 97%;

  --border: 0 0% 83%;
  --radius: 0.75rem;

  --gradient-primary: linear-gradient(135deg, hsl(175 84% 40%) 0%, hsl(200 100% 50%) 100%);
  --shadow-card: 0 4px 24px hsl(220 25% 10% / 0.08);
  --shadow-elevated: 0 8px 32px hsl(220 25% 10% / 0.12);
  --shadow-glow: 0 0 40px hsl(175 84% 40% / 0.15);
}

/* Dark-mode overrides (research.md #12). Two layers:
   1. `prefers-color-scheme` is the default signal for a first-time visitor
      who has made no explicit choice yet (no `data-theme` known to the
      server at all) — this is a best-effort guess only, since the server
      still renders `data-theme="light"` by default when it has no cookie/
      account preference to read; once any explicit choice is recorded
      (cookie or account), the second layer below always wins in both
      directions regardless of OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --background: 222 20% 10%;
    --foreground: 0 0% 96%;

    --card: 222 18% 14%;
    --card-foreground: 0 0% 96%;

    --primary: 20 90% 55%;
    --primary-foreground: 33 100% 96%;

    --secondary: 0 0% 70%;
    --secondary-foreground: 222 20% 10%;

    --muted: 0 0% 35%;
    --muted-foreground: 0 0% 80%;

    --accent: 222 15% 20%;
    --accent-foreground: 37 92% 60%;

    --destructive: 0 72% 55%;
    --destructive-foreground: 0 85% 97%;

    --border: 0 0% 28%;

    --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.4);
    --shadow-elevated: 0 8px 32px hsl(0 0% 0% / 0.5);
  }
}

/* 2. Explicit choice (cookie/account, resolved server-side into
      data-theme) always wins over OS preference, in both directions. */
:root[data-theme="dark"] {
  --background: 222 20% 10%;
  --foreground: 0 0% 96%;

  --card: 222 18% 14%;
  --card-foreground: 0 0% 96%;

  --primary: 20 90% 55%;
  --primary-foreground: 33 100% 96%;

  --secondary: 0 0% 70%;
  --secondary-foreground: 222 20% 10%;

  --muted: 0 0% 35%;
  --muted-foreground: 0 0% 80%;

  --accent: 222 15% 20%;
  --accent-foreground: 37 92% 60%;

  --destructive: 0 72% 55%;
  --destructive-foreground: 0 85% 97%;

  --border: 0 0% 28%;

  --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.4);
  --shadow-elevated: 0 8px 32px hsl(0 0% 0% / 0.5);
}

:root[data-theme="light"] {
  --background: 0 0% 96%;
  --foreground: 0 0% 9%;

  --card: 0 0% 98%;
  --card-foreground: 0 0% 9%;

  --primary: 20 90% 48%;
  --primary-foreground: 33 100% 96%;

  --secondary: 0 0% 32%;
  --secondary-foreground: 0 0% 98%;

  --muted: 0 0% 63%;
  --muted-foreground: 0 0% 9%;

  --accent: 47 100% 96%;
  --accent-foreground: 37 92% 50%;

  --destructive: 0 72% 50%;
  --destructive-foreground: 0 85% 97%;

  --border: 0 0% 83%;

  --shadow-card: 0 4px 24px hsl(220 25% 10% / 0.08);
  --shadow-elevated: 0 8px 32px hsl(220 25% 10% / 0.12);
}