/* Recipe Manager design tokens: the single source of truth.
   World: "The Well-Used Cookbook". White card stock ruled in pale blue, blue-black fountain-pen ink,
   a red-pen terracotta for everything the cook marks. Dark theme is a chalkboard menu.
   Loaded by templates/base.html, the public share pages, static/pages/_theme.css and cook mode. */

:root, [data-theme="light"] {
  /* Ink and red pen. --accent = text/lines/marks; --accent-solid = fills that carry white text */
  --accent: #b83a12; --accent-hover: #9a300e; --accent-subtle: #fbebe3;
  --accent-solid: #b83a12; --accent-solid-hover: #9a300e;
  --text-primary: #1b2431; --text-secondary: #4a5566; --text-tertiary: #5a6577;
  /* Surfaces: flour ground, white card stock, blue ruled lines */
  --bg: #f3f2ee; --surface: #fff; --border: #d9d7cf; --border-light: #ebe9e2;
  --rule: #cfdde8; --margin-line: #e9b8a6;
  --nav-bg: #f3f2ee; --input-bg: #fff;
  /* Status */
  --success: #1a7f37; --success-bg: #dafbe1; --success-border: #aceebb;
  --error: #b42318; --error-bg: #fdecea; --error-border: #f4b8b2;
  /* Shape + depth: index-card corners, paper shadows */
  --radius: 4px; --radius-lg: 6px; --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(27,36,49,0.05), 0 1px 3px rgba(27,36,49,0.05);
  --shadow: 0 1px 0 rgba(27,36,49,0.05), 0 2px 8px rgba(27,36,49,0.07);
  --shadow-md: 0 1px 0 rgba(27,36,49,0.06), 0 8px 24px rgba(27,36,49,0.12);
  --focus-ring: 0 0 0 3px rgba(184,58,18,0.18);
  /* Type: Alegreya for the cookbook voice, system sans for chrome and controls */
  --font-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Type scale (rem). 2xs labels, xs meta, sm UI, base UI reading, reading = recipe text in Alegreya, md cook step, lg headings, display titles */
  --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-reading: 1.1875rem;
  --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-display: clamp(2rem, 5.5vw, 3.25rem);
  /* Monogram tints for photo-less recipes: wash + ink pairs */
  --tint-1: #f6e3d8; --tint-1-ink: #9a300e; --tint-2: #e2ecd9; --tint-2-ink: #3d6a2a;
  --tint-3: #f3e8c6; --tint-3-ink: #7a5c0d; --tint-4: #dde6ee; --tint-4-ink: #3a5670;
  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
}

[data-theme="dark"] {
  /* Chalkboard menu */
  --accent: #f0784a; --accent-hover: #f68d64; --accent-subtle: #2a1c16;
  --accent-solid: #c8501a; --accent-solid-hover: #b84616;
  --text-primary: #e9e6df; --text-secondary: #a9b0ba; --text-tertiary: #939ba7;
  --bg: #14181d; --surface: #1b2027; --border: #2c343e; --border-light: #232a33;
  --rule: #2a3542; --margin-line: #6b3a2a;
  --nav-bg: #14181d; --input-bg: #222932;
  --success: #3fb950; --success-bg: #17261c; --success-border: #2a4a2a;
  --error: #f85149; --error-bg: #2d1b1b; --error-border: #5a2a2a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --focus-ring: 0 0 0 3px rgba(240,120,74,0.25);
  --tint-1: #2f2019; --tint-1-ink: #f0784a; --tint-2: #1f2b1d; --tint-2-ink: #86c46f;
  --tint-3: #2f2a17; --tint-3-ink: #dcb64f; --tint-4: #1d2732; --tint-4-ink: #8ab4d8;
}

/* Cook mode is always chalkboard: a fixed kitchen palette, independent of the theme toggle */
:root {
  --cook-bg: #14181d; --cook-bar: #0f1216; --cook-inset: #1b2027;
  --cook-surface: #262d36; --cook-surface-raised: #323b46; --cook-timer: #1f252d;
  --cook-line: #2c343e;
  --cook-text: #f4f1ea; --cook-muted: #a6adb8; --cook-done: #8a93a0;
  --cook-accent: #f0784a; --cook-accent-solid: #c8501a;
}