/* Gruel design tokens. THE place to change colours, type, shape. See DESIGN.md. */
/* One hex lives outside this file: the <meta name="theme-color" content="#0e1128"> in
   index.html (and background_color/theme_color in manifest.webmanifest). Meta tags and
   JSON cannot read CSS variables; that hex is --bg converted. Change --bg, change those. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  color-scheme: dark;
  /* palette */
  --bg:          oklch(0.19 0.045 275);
  --surface:     oklch(0.33 0.054 276);
  --surface-2:   oklch(0.41 0.057 277);
  --line:        oklch(0.47 0.06 277);
  --ink:         oklch(0.98 0 0);
  --muted:       oklch(0.82 0.03 276);
  --primary:     oklch(0.72 0.135 55);
  --primary-hi:  oklch(0.67 0.14 55);
  --on-primary:  oklch(0.27 0.054 275);
  --primary-ink: oklch(0.77 0.125 56);
  --danger:      oklch(0.78 0.13 30);
  --kcal: var(--primary);
  --protein: oklch(0.72 0.075 276);
  --carbs: oklch(0.93 0.03 70);
  --fat: oklch(0.62 0.10 300);
  /* type */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --head-weight: 600;
  --head-opsz: "opsz" 48;
  --fs-2xs: .6875rem; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-0: 1rem; --fs-1: 1.2rem; --fs-2: 1.44rem; --fs-3: 1.728rem;
  --lh: 1.45;
  /* shape */
  --r-control: 14px; --r-card: 18px; --r-pill: 999px;
  --btn-h: 48px; --btn-shadow: 0 2px 12px oklch(0.04 0.02 60 / 0.6);
  --bar-h: 8px; --pad: 16px; --gap: 16px;
  /* motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* z */
  --z-sticky: 10; --z-banner: 20; --z-modal: 25; --z-toast: 30;
}