/* =========================================================================
   Grist Design System — Colors & Type
   Source: homebrew-mission-control (Grist iOS / iPadOS / macOS / watchOS)
   BrewTheme.swift + BrewTypography.swift
   ========================================================================= */

:root {
  /* --------------------------------------------------------------------
     COLOR TOKENS — raw values from BrewTheme.swift
     -------------------------------------------------------------------- */

  /* Backgrounds */
  --bg-deep-slate:       #1C1E21;   /* primary app/page background */
  --card-stainless:      #2A2D34;   /* card/surface background ("brushed stainless") */
  --border-subtle:       #3A3D45;   /* card inner border, progress track */

  /* Accents */
  --accent-amber:        #D97726;   /* primary accent — replaces system blue */
  --accent-gold:         #F5A623;   /* secondary accent / gradient partner */

  /* Status */
  --status-cascade:      #4A7C59;   /* muted green — positive / complete / met */
  --status-cold:         #6B8FC7;   /* steel blue — in-progress / conditioning / cold */
  --status-brewing:      #FF9500;   /* system orange — active brew day */
  --status-judging:      #AF52DE;   /* system purple — judging phase */
  --status-delivered:    #30B0C7;   /* system teal — bottles delivered */
  --status-urgent:       #FF3B30;   /* system red — deadline ≤3 days */

  /* Text */
  --text-primary:        #F2F2F7;   /* high-contrast body text */
  --text-secondary:      #98989D;   /* dimmed labels, captions */
  --text-tertiary:       #6B6B70;   /* timestamps, super-quiet meta */
  --text-on-accent:      #FFFFFF;   /* white on amber/gold fills */

  /* Medal / BJCP quality tiers (from CompetitionUI+Extensions.swift) */
  --medal-gold:          #E0B30D;   /* BJCP 45–50 "Outstanding" */
  --medal-silver:        #9999A6;   /* BJCP 38–44 "Excellent" */
  --medal-bronze:        #B87333;   /* BJCP 30–37 "Very Good" */
  --medal-honorable:     #6E7787;   /* 21–29 "Good" — neutral slate (non-medaling) */
  --medal-bos:           #2F7D4F;   /* Best of Show — bold green, top honor */

  /* Rank accents (MHP progression) */
  --rank-brown:          #8B5A2B;
  --rank-gold:           var(--accent-gold);
  --rank-purple:         #9B59B6;
  --rank-orange:         #E67E22;
  --rank-red:            #E74C3C;

  /* Alpha tints used throughout the app (badge backgrounds) */
  --tint-amber-13:       rgba(217, 119,  38, 0.13);
  --tint-amber-15:       rgba(217, 119,  38, 0.15);
  --tint-amber-12:       rgba(217, 119,  38, 0.12);
  --tint-gold-15:        rgba(245, 166,  35, 0.15);
  --tint-cascade-15:     rgba( 74, 124,  89, 0.15);
  --tint-cold-15:        rgba(107, 143, 199, 0.15);
  --tint-urgent-15:      rgba(255,  59,  48, 0.15);

  /* Gradients (Sight Glass fill — Gold→Amber) */
  --gradient-sight-glass: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-amber) 100%);
  --gradient-hero-scrim:  linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.72) 100%);

  /* --------------------------------------------------------------------
     TYPOGRAPHY — maps to BrewTypography.swift
     Header  = SF Pro (Display selected >=20pt)
     Body    = SF Pro Text
     Metric  = SF Pro Rounded  (used for scores, counts, %)
     Fallback to local SF Pro, then Inter (nearest match on Google Fonts)
     -------------------------------------------------------------------- */

  --font-header: -apple-system, "SF Pro Display", "SF Pro", "Inter", system-ui, sans-serif;
  --font-body:   -apple-system, "SF Pro Text",    "SF Pro", "Inter", system-ui, sans-serif;
  --font-metric: -apple-system, "SF Pro Rounded", "Nunito", "Inter", system-ui, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type ramp — matches Apple Dynamic Type sizes used in the codebase */
  --type-largeTitle: 34px;   /* .largeTitle — rank hero */
  --type-title:      28px;   /* .title      — page titles, batch name */
  --type-title2:     22px;   /* .title2     — card headers, paywall */
  --type-title3:     20px;   /* .title3     — recent batch name, brewery name */
  --type-headline:   17px;   /* .headline   — section headers, card titles */
  --type-subheadline:15px;   /* .subheadline — meta rows */
  --type-body:       17px;   /* .body       — list rows */
  --type-callout:    16px;   /* .callout */
  --type-footnote:   13px;   /* .footnote */
  --type-caption:    12px;   /* .caption    — card meta, labels */
  --type-caption2:   11px;   /* .caption2   — status badges */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;   /* rank name "DISTINGUISHED" */

  /* Line heights — Apple defaults hit ~1.15 for display, 1.29 for body */
  --lh-tight:  1.15;
  --lh-normal: 1.30;
  --lh-loose:  1.45;

  /* Letter spacing — uppercase meta label ("KEY STATS" etc.) uses 0.5 tracking */
  --track-caps:  0.5px;

  /* --------------------------------------------------------------------
     SPACING — from code: card padding 16, section spacing 14,
     hstack spacing 8–16, hero padding 20, progress height 12
     -------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;   /* card-to-card vertical gap */
  --space-8:  16px;   /* card padding */
  --space-9:  20px;   /* hero padding, button h-padding */
  --space-10: 24px;
  --space-11: 32px;

  /* Radii — two card values only; don't fragment */
  --radius-inline: 8px;    /* inline chips, tight tiles (rare) */
  --radius-card:   14px;   /* EVERY card, banner, surface */
  --radius-pill:   999px;  /* Capsule — badges, Amber button, progress bar */

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle);

  /* Shadows — soft, matches SwiftUI .shadow(radius:) values */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);    /* drawer panel, sync error */
  --shadow-drawer: 6px 0 12px rgba(0,0,0,0.22);/* drawer slide shadow */

  /* Scrim */
  --scrim-drawer: rgba(0,0,0,0.40);
  --scrim-hero:   rgba(0,0,0,0.72);
}

/* ===========================================================================
   SEMANTIC ELEMENTS — plug-and-play for HTML
   =========================================================================== */

html, body {
  background: var(--bg-deep-slate);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-header);
  font-size: var(--type-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-header);
  font-size: var(--type-title2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
h3, .h3 {
  font-family: var(--font-header);
  font-size: var(--type-title3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
}
h4, .h4 {
  font-family: var(--font-header);
  font-size: var(--type-headline);
  font-weight: var(--weight-bold);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.metric {
  font-family: var(--font-metric);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.metric-lg {
  font-family: var(--font-metric);
  font-size: var(--type-title2);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.metric-xl {
  font-family: var(--font-metric);
  font-size: var(--type-largeTitle);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.caption {
  font-size: var(--type-caption);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}
.caption-2 {
  font-size: var(--type-caption2);
  color: var(--text-secondary);
}

p { color: var(--text-primary); }
code, kbd, samp { font-family: var(--font-mono); }

/* ===========================================================================
   COMMON UTILITY CLASSES (used by cards & UI kit)
   =========================================================================== */

.brew-card {
  background: var(--card-stainless);
  border: var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-8);
}

.brew-divider {
  height: 1px;
  background: var(--border-subtle);
  border: 0;
  margin: var(--space-6) 0;
}

.brew-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption2);
  font-weight: var(--weight-semibold);
}

.btn-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--accent-amber);
  color: var(--text-on-accent);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  border: 0;
  cursor: pointer;
  transition: opacity 120ms ease-in-out;
}
.btn-amber:active { opacity: 0.75; }
.btn-amber:disabled {
  background: var(--border-subtle);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--type-subheadline);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.btn-secondary:hover { background: rgba(255,255,255,0.04); }