/* ============================================================
   Scrumbox — Design Tokens  ("Brew & Flow")
   Transcribed from brew_flow/DESIGN.md front-matter.
   Every color role is exposed as --color-<role>.
   Nothing here selects elements; this file only defines values.
   ============================================================ */

:root {
  /* ---------- Colors: surfaces (Steamed Milk / Cream) ---------- */
  --color-surface: #fbf9f5;
  --color-surface-dim: #dbdad6;
  --color-surface-bright: #fbf9f5;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3ef;
  --color-surface-container: #efeeea;
  --color-surface-container-high: #eae8e4;
  --color-surface-container-highest: #e4e2de;
  --color-surface-variant: #e4e2de;
  --color-surface-tint: #705a4f;
  --color-on-surface: #1b1c1a;
  --color-on-surface-variant: #4f4540;
  --color-inverse-surface: #30312e;
  --color-inverse-on-surface: #f2f0ed;
  --color-background: #fbf9f5;
  --color-on-background: #1b1c1a;

  /* ---------- Colors: outlines (Latte) ---------- */
  --color-outline: #81756f;
  --color-outline-variant: #d3c3bd;

  /* ---------- Colors: primary (Espresso) ---------- */
  --color-primary: #25160e;
  --color-on-primary: #ffffff;
  --color-primary-container: #3c2a21;
  --color-on-primary-container: #aa9084;
  --color-inverse-primary: #dec1b3;

  /* ---------- Colors: secondary (Caramel) ---------- */
  --color-secondary: #7d562d;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #ffca98;
  --color-on-secondary-container: #7a532a;

  /* ---------- Colors: tertiary (Dark Roast / Latte accents) ---------- */
  --color-tertiary: #271503;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #3f2913;
  --color-on-tertiary-container: #b08f73;

  /* ---------- Colors: error ---------- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* ---------- Colors: fixed pairs ---------- */
  --color-primary-fixed: #fbdcce;
  --color-primary-fixed-dim: #dec1b3;
  --color-on-primary-fixed: #281810;
  --color-on-primary-fixed-variant: #574238;
  --color-secondary-fixed: #ffdcbd;
  --color-secondary-fixed-dim: #f0bd8b;
  --color-on-secondary-fixed: #2c1600;
  --color-on-secondary-fixed-variant: #623f18;
  --color-tertiary-fixed: #ffdcbf;
  --color-tertiary-fixed-dim: #e4c0a1;
  --color-on-tertiary-fixed: #2a1704;
  --color-on-tertiary-fixed-variant: #5b422a;

  /* ---------- Colors: semantic status ----------
     Only genuinely semantic states get a hue outside the roast palette:
     success is the mockup's single #4CAF50-family accent (the "Optimal
     Flow" pulse and the burndown trend arrow); warn is a caramel-adjacent
     amber. Everything decorative uses the warm tokens above. */
  --color-success: #3f7d4f;
  --color-success-container: #dcefdd;
  --color-on-success-container: #23532f;
  --color-warn: #a2701c;
  --color-warn-container: #fbe7c6;
  --color-on-warn-container: #6d4a0c;

  /* ---------- Typography: families (offline stand-ins) ---------- */
  --font-display: Literata, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Typography: display-lg (Literata 48/56, 700, -0.02em) ---------- */
  --text-display-lg-size: 48px;
  --text-display-lg-weight: 700;
  --text-display-lg-line: 56px;
  --text-display-lg-tracking: -0.02em;

  /* ---------- Typography: headline-lg (Literata 32/40, 600) ---------- */
  --text-headline-lg-size: 32px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-line: 40px;
  --text-headline-lg-tracking: 0;
  /* mobile variant: 28/36, 600 */
  --text-headline-lg-mobile-size: 28px;
  --text-headline-lg-mobile-line: 36px;

  /* ---------- Typography: title-md (Hanken 20/28, 600) ---------- */
  --text-title-md-size: 20px;
  --text-title-md-weight: 600;
  --text-title-md-line: 28px;
  --text-title-md-tracking: 0;

  /* ---------- Typography: body-lg (Hanken 16/24, 400) ---------- */
  --text-body-lg-size: 16px;
  --text-body-lg-weight: 400;
  --text-body-lg-line: 24px;
  --text-body-lg-tracking: 0;

  /* ---------- Typography: body-sm (Hanken 14/20, 400) ---------- */
  --text-body-sm-size: 14px;
  --text-body-sm-weight: 400;
  --text-body-sm-line: 20px;
  --text-body-sm-tracking: 0;

  /* ---------- Typography: label-caps (JetBrains Mono 12/16, 500, 0.05em) ---------- */
  --text-label-caps-size: 12px;
  --text-label-caps-weight: 500;
  --text-label-caps-line: 16px;
  --text-label-caps-tracking: 0.05em;

  /* ---------- Radii ---------- */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ---------- Spacing (8px rhythm) ---------- */
  --space-unit: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --stack-sm: 4px;
  --stack-md: 12px;
  --stack-lg: 32px;
  --container-padding: 24px;
  --gutter: 16px;

  /* ---------- Shell metrics ---------- */
  --sidebar-width: 288px;
  --sidebar-rail-width: 72px;
  --header-height: 64px;
  --main-margin: 32px;

  /* ---------- Elevation: soft, long-diffusion, espresso-tinted ---------- */
  --shadow-sm: 0 1px 2px rgba(60, 42, 33, 0.06);
  --shadow: 0 2px 8px rgba(60, 42, 33, 0.08);
  --shadow-md: 0 4px 14px rgba(60, 42, 33, 0.09);
  --shadow-lg: 0 8px 24px rgba(60, 42, 33, 0.1);
  --shadow-xl: 0 16px 40px rgba(60, 42, 33, 0.12);
  --shadow-hover: 0 10px 28px rgba(60, 42, 33, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glow-focus: 0 0 0 3px rgba(125, 86, 45, 0.18);

  /* ---------- Motion ---------- */
  --transition: 200ms cubic-bezier(0.2, 0, 0, 1);
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 400ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 1ms linear;
    --transition-fast: 1ms linear;
    --transition-slow: 1ms linear;
  }
}