/*
  Design tokens — single source of truth for visual values.
  Values verified against approved Stitch mockups (docs/BRAND_REFERENCE.md).
  Change a value here, not in component files.
*/

:root {
  /* Tells the browser which native widgets (scrollbars, form controls) to
     theme so they don't look like a light-mode leftover on a dark page. */
  color-scheme: light;

  /* Colors */
  --color-bg: #F8F9FF;
  --color-bg-alt: #FFFFFF;
  --color-primary: #161717;
  --color-on-primary: #FFFFFF;
  --color-secondary: #695D42;
  --color-secondary-container: #F2E1BE;
  --color-text: #121C2A;
  --color-text-variant: #444748;
  --color-border: #C4C7C7;
  --color-error: #BA1A1A;
  /* Single warm brand accent — muted clay/terracotta. Used ONLY for the
     small LunchMate brand mark on Home (a food morsel inside the lunchbox
     glyph), never for primary UI, CTAs, or as a second dominant color.
     Keeps the interface warm-white and neutral while giving one point of
     brand recognition. */
  --color-accent-clay: #A8735D;

  /* Typography
     Brand font is the platform-native system stack, not Inter — decided 2026-07-20.
     Inter (rsms/inter, latest release v4.1, Nov 2024) has no Hebrew glyphs in its
     cmap (verified against the actual served font file), and Hebrew is the app's
     default language (config.js DEFAULT_LANGUAGE = 'he'), so it cannot be the
     single brand typeface without a mismatched second font for he. Each platform's
     system font (San Francisco / Segoe UI / Roboto) already ships full Hebrew,
     Latin and Cyrillic coverage in one designed family, at zero network cost.
     See docs/BRAND_GUIDELINES.md → Typography for the full rationale. */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-size-display: 40px;
  --line-height-display: 48px;
  --font-weight-display: 300;

  --font-size-headline-lg: 32px;
  --line-height-headline-lg: 40px;
  --font-weight-headline-lg: 400;

  --font-size-headline-lg-mobile: 28px;
  --line-height-headline-lg-mobile: 36px;

  --font-size-headline-md: 24px;
  --line-height-headline-md: 32px;
  --font-weight-headline-md: 500;

  --font-size-body-lg: 18px;
  --line-height-body-lg: 28px;

  --font-size-body-md: 16px;
  --line-height-body-md: 24px;

  --font-size-label-md: 14px;
  --line-height-label-md: 20px;
  --font-weight-label-md: 500;

  --font-size-caption: 12px;
  --line-height-caption: 16px;

  /* Spacing (8px grid) */
  --space-unit: 8px;
  --space-sm: 8px;
  --space-gutter: 16px;
  --space-md: 16px;
  --space-main: 24px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* Radius */
  --radius: 16px;
  --radius-lg: 32px;
  --radius-xl: 48px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Animation */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark theme — same token names, dark values. Every component reads colors
   only through these variables, so no component CSS changes with theme.
   `--color-primary`/`--color-on-primary` swap roles (near-white on dark
   instead of near-black on light) so headline text and primary buttons keep
   working contrast against the dark surface; same M3-style swap applied to
   `--color-error`/`--color-on-primary` pairing on error badges.

   Two ways this applies (kept in this order on purpose):
   1. `:root[data-theme="dark"]` — explicit "Dark" choice, wins regardless
      of the device setting (highest specificity, always applies).
   2. The `prefers-color-scheme` media query below — "Auto" (the default,
      no `data-theme` attribute at all): follows the device setting live,
      pure CSS, no JS required and so no flash-of-wrong-theme on load.
      Excluded when an explicit `data-theme` is set, so "Auto" never fights
      an explicit "Light"/"Dark" choice. See src/services/theme-service.js. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121316;
  --color-bg-alt: #1C1E22;
  --color-primary: #F2F3F5;
  --color-on-primary: #14161A;
  --color-secondary: #E4C68C;
  --color-secondary-container: #3D3220;
  --color-text: #EEEFF2;
  --color-text-variant: #A9ADB5;
  --color-border: #3A3D42;
  --color-error: #FFB4AB;
  --color-accent-clay: #C99479;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --color-bg: #121316;
    --color-bg-alt: #1C1E22;
    --color-primary: #F2F3F5;
    --color-on-primary: #14161A;
    --color-secondary: #E4C68C;
    --color-secondary-container: #3D3220;
    --color-text: #EEEFF2;
    --color-text-variant: #A9ADB5;
    --color-border: #3A3D42;
    --color-error: #FFB4AB;
    --color-accent-clay: #C99479;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
}