/* ==========================================================================
   Dr. Coffee — Design Tokens (Phase 1)
   Exact port of mockups/css/theme.css :root (lines 7–121)
   Forest & Espresso. Light theme only.
   ========================================================================== */

:root {
  color-scheme: light;
  box-sizing: border-box;

  /* ——— Core palette (exact from coffee-palette.html) ——— */
  --forest: #24352A;   /* Primary actions & dark sections */
  --espresso: #38221C; /* Headings, prices & body text */
  --cream: #FFF2E6;    /* Warm Cream — main page background */
  --milk: #FFFBF5;     /* Cards, menus & inputs */
  --olive: #788665;    /* Supporting graphic accents */
  --latte: #B49372;    /* Packaging & decorative details */
  --blue: #BCDBF0;     /* Featured panels & selected chips */
  --stone: #DEDCD3;    /* Dividers & subtle borders */

  /* Derived / supporting (from palette UI usage) */
  /* Secondary text — darkened for WCAG contrast on cream/milk */
  --muted: #4F433C;
  --latte-deep: #927254; /* Decorative pack rim / latte shade */
  --forest-soft: color-mix(in srgb, var(--forest) 12%, var(--milk));
  --blue-soft: color-mix(in srgb, var(--blue) 55%, var(--milk));

  /* Mockup homepage aliases (pages/homepage/styles.css) */
  --warm: var(--cream);
  --white: var(--milk);
  --tile: var(--milk);
  --ink: var(--espresso);
  --rust: var(--forest);
  --rust-deep: color-mix(in srgb, var(--forest) 88%, black);
  --line: var(--stone);
  --line-strong: var(--stone);

  /* ——— Semantic aliases (Bricks / components) ——— */
  --bg-canvas: var(--cream);
  --bg-surface: var(--milk);
  --bg-surface-elevated: var(--milk);
  --bg-subtle: var(--cream);
  --bg-tile: color-mix(in srgb, var(--stone) 40%, var(--milk));
  --bg-anchor: var(--forest);
  --bg-featured: var(--blue);

  --text-primary: var(--espresso);
  --text-secondary: var(--muted);
  /* Captions / eyebrows — still secondary, never border --stone */
  --text-tertiary: color-mix(in srgb, var(--muted) 88%, var(--espresso));
  --text-on-dark: var(--cream);
  --text-on-forest: var(--milk);
  --text-on-blue: var(--forest);
  --text-brand: var(--forest);

  --border-subtle: var(--stone);
  --border-strong: color-mix(in srgb, var(--stone) 70%, var(--espresso));
  --line: var(--border-subtle); /* Editorial / homepage divider alias */
  --sand: var(--latte);         /* Mockup alias → packaging latte */
  --highlight-inset: color-mix(in srgb, var(--milk) 80%, white);

  /* CTAs — palette pairings */
  --accent-cta: var(--forest);           /* Primary action: Deep Forest */
  --accent-cta-hover: color-mix(in srgb, var(--forest) 88%, black);
  --accent-cta-active: color-mix(in srgb, var(--forest) 75%, black);
  --accent-cta-fg: var(--milk);           /* Milk on Forest */

  --accent-feature: var(--blue);         /* Selected / featured chip */
  --accent-feature-fg: var(--forest);    /* Powder Blue + Deep Forest */
  --accent-feature-hover: color-mix(in srgb, var(--blue) 85%, var(--forest));

  --accent-graphic: var(--olive);
  --accent-pack: var(--latte);

  /* Status */
  --success: #3D5C45;
  --danger: #8B3A2F;
  --warn: #8A5A00;

  /* Badges / ratings */
  --badge-hands: var(--forest-soft);
  --badge-hands-fg: var(--forest);
  --badge-research: var(--cream);
  --badge-research-fg: var(--espresso);
  --badge-featured: var(--blue);
  --badge-featured-fg: var(--forest);
  --score-fg: var(--forest);

  /* Type — webfont + metric-matched fallbacks (see fonts.css) */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Space (8pt) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* Shape */
  --r-input: 8px;
  --r-btn: 8px;
  --r-pill: 999px;
  --r-card: 14px;
  --r-panel: 16px;

  /* Elevation */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--espresso) 6%, transparent);
  --shadow-pop: 0 24px 48px -24px color-mix(in srgb, var(--espresso) 28%, transparent),
    0 0 0 1px var(--stone);

  /* Scrollbars — soft rail + floating pill thumb */
  --scroll-size: 14px;
  --scroll-size-sm: 11px;
  --scroll-pad: 3px;
  --scroll-thumb: color-mix(in srgb, var(--forest) 48%, var(--olive));
  --scroll-thumb-mid: color-mix(in srgb, var(--forest) 62%, var(--stone));
  --scroll-thumb-hover: color-mix(in srgb, var(--forest) 72%, var(--olive));
  --scroll-thumb-hover-mid: color-mix(in srgb, var(--forest) 82%, var(--espresso));
  --scroll-thumb-active: var(--forest);
  --scroll-track: color-mix(in srgb, var(--stone) 48%, var(--cream));
  --scroll-track-edge: color-mix(in srgb, var(--stone) 70%, var(--cream));

  --container: 1280px;
  --gutter: 20px;
  --header-h: 60px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Safe area */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}
@media (min-width: 1240px) {
  :root {
    --header-h: 68px;
  }
}

/* Minimal base — components / shell in utilities.css + shell.css */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* ——— Scrollbars (Firefox + WebKit) ——— */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
  width: var(--scroll-size);
  height: var(--scroll-size);
}

*::-webkit-scrollbar-track {
  margin: 3px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--scroll-track-edge) 70%, transparent) 0%,
      var(--scroll-track) 40%,
      var(--scroll-track) 60%,
      color-mix(in srgb, var(--scroll-track-edge) 70%, transparent) 100%
    )
    padding-box;
  border: var(--scroll-pad) solid transparent;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stone) 55%, transparent);
}

*::-webkit-scrollbar-track:horizontal {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--scroll-track-edge) 70%, transparent) 0%,
      var(--scroll-track) 40%,
      var(--scroll-track) 60%,
      color-mix(in srgb, var(--scroll-track-edge) 70%, transparent) 100%
    )
    padding-box;
}

*::-webkit-scrollbar-thumb {
  min-height: 48px;
  min-width: 48px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--scroll-thumb) 88%, white) 0%,
      var(--scroll-thumb) 42%,
      var(--scroll-thumb-mid) 100%
    )
    padding-box;
  border: var(--scroll-pad) solid transparent;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 42%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--espresso) 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--espresso) 12%, transparent);
}

*::-webkit-scrollbar-thumb:horizontal {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--scroll-thumb) 88%, white) 0%,
      var(--scroll-thumb) 42%,
      var(--scroll-thumb-mid) 100%
    )
    padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--scroll-thumb-hover) 86%, white) 0%,
      var(--scroll-thumb-hover) 45%,
      var(--scroll-thumb-hover-mid) 100%
    )
    padding-box;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 36%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--espresso) 22%, transparent),
    0 2px 4px color-mix(in srgb, var(--espresso) 16%, transparent);
}

*::-webkit-scrollbar-thumb:horizontal:hover {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--scroll-thumb-hover) 86%, white) 0%,
      var(--scroll-thumb-hover) 45%,
      var(--scroll-thumb-hover-mid) 100%
    )
    padding-box;
}

*::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active) padding-box;
  box-shadow: inset 0 1px 2px color-mix(in srgb, black 22%, transparent);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}