/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — Phase 0 of the mobile-first redesign (see
   ui_ux_redesign_plan.md at the repo root for the full plan).

   These are additive and UNUSED by any existing template today — nothing
   reads them yet, so defining them here has zero visual effect. Phase 1
   components will consume them. Values match the reviewed wireframe
   (https://claude.ai/code/artifact/ad243fce-d02a-449c-ab29-51a3a8dfb0de),
   grounded in the existing marketing-site brand palette (recipes_for_site/
   style.css: cream/brown/green/gold) rather than an invented one.

   Kosher category colors (--meat/--dairy/--pareve/--not-kosher) intentionally
   match the hues already in use in admin_kosher_review.html — a learned
   convention for this household, not up for restyling.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Color */
  --bg: #FAF6F0;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F1EAE0;
  --ink: #2A1E16;
  --ink-soft: #5C4F3D;
  --muted: #8A7A6A;
  --line: rgba(42,30,22,.13);
  --accent: #1E8449;
  --accent-hover: #1A7A4A;
  --accent-ink: #FFFFFF;
  --accent-soft: #E6F5ED;
  --gold: #9C7E22;
  --gold-soft: #F7EFD8;
  --danger: #C0392B;
  --danger-hover: #A93226;
  --danger-soft: #FBEAE7;
  --danger-ink: #FFFFFF;
  /* Distinct from --accent -- brighter "success/active/done" state (difficulty
     Easy badge, cart/want-to-try/cook toggle-on states, timer-done text), not
     the app's primary brand action color. Matches the shade already used
     consistently for this across the app (#27ae60), which is visibly
     different from --accent's #1e8449. */
  --success: #27AE60;
  --success-ink: #FFFFFF;

  /* Kosher category semantics — unchanged from today's kosher-review UI */
  --meat: #B23A2E;
  --dairy: #235E8C;
  --pareve: #1A7A4A;
  --not-kosher: #6B6259;
  --meat-soft: #FBEAE7;
  --dairy-soft: #E8F1F8;
  --pareve-soft: #E6F5ED;
  --not-kosher-soft: #EEEBE6;

  --shadow: 0 8px 28px rgba(42,30,22,.14);
  --shadow-sm: 0 2px 8px rgba(42,30,22,.10);

  /* Type — Fraunces/Inter are already loaded via the Google Fonts link in base.html */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* Spacing (4px base) */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Minimum touch target (iOS HIG / Material both land around here) */
  --tap-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B140F;
    --bg-elevated: #251C15;
    --bg-sunken: #150F0B;
    --ink: #F5ECDC;
    --ink-soft: #CBBBA3;
    --muted: #8C7C69;
    --line: rgba(245,236,220,.14);
    --accent: #2FA968;
    --accent-hover: #288858;
    --accent-ink: #06170F;
    --accent-soft: rgba(47,169,104,.16);
    --gold: #D9BB63;
    --gold-soft: rgba(217,187,99,.16);
    --danger: #E4685C;
    --danger-hover: #D14A3D;
    --danger-soft: rgba(228,104,92,.16);
    --danger-ink: #2A0906;
    --success: #2ECC71;
    --success-ink: #06170F;
    --meat: #E4685C;
    --dairy: #6BAEE0;
    --pareve: #2FA968;
    --not-kosher: #A79C8C;
    --meat-soft: rgba(228,104,92,.16);
    --dairy-soft: rgba(107,174,224,.16);
    --pareve-soft: rgba(47,169,104,.16);
    --not-kosher-soft: rgba(167,156,140,.14);
    --shadow: 0 8px 28px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  }
}

/* This app sets data-theme="dark"/"light" explicitly (see base.html's inline
   theme-detection script) — these must win over the media query in both
   directions, matching the pattern already used for --pico-code-background. */
[data-theme="dark"] {
  --bg: #1B140F;
  --bg-elevated: #251C15;
  --bg-sunken: #150F0B;
  --ink: #F5ECDC;
  --ink-soft: #CBBBA3;
  --muted: #8C7C69;
  --line: rgba(245,236,220,.14);
  --accent: #2FA968;
  --accent-hover: #288858;
  --accent-ink: #06170F;
  --accent-soft: rgba(47,169,104,.16);
  --gold: #D9BB63;
  --gold-soft: rgba(217,187,99,.16);
  --danger: #E4685C;
  --danger-hover: #D14A3D;
  --danger-soft: rgba(228,104,92,.16);
  --danger-ink: #2A0906;
  --success: #2ECC71;
  --success-ink: #06170F;
  --meat: #E4685C;
  --dairy: #6BAEE0;
  --pareve: #2FA968;
  --not-kosher: #A79C8C;
  --meat-soft: rgba(228,104,92,.16);
  --dairy-soft: rgba(107,174,224,.16);
  --pareve-soft: rgba(47,169,104,.16);
  --not-kosher-soft: rgba(167,156,140,.14);
  --shadow: 0 8px 28px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
}
[data-theme="light"] {
  --bg: #FAF6F0;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F1EAE0;
  --ink: #2A1E16;
  --ink-soft: #5C4F3D;
  --muted: #8A7A6A;
  --line: rgba(42,30,22,.13);
  --accent: #1E8449;
  --accent-hover: #1A7A4A;
  --accent-ink: #FFFFFF;
  --accent-soft: #E6F5ED;
  --gold: #9C7E22;
  --gold-soft: #F7EFD8;
  --danger: #C0392B;
  --danger-hover: #A93226;
  --danger-soft: #FBEAE7;
  --danger-ink: #FFFFFF;
  /* Distinct from --accent -- brighter "success/active/done" state (difficulty
     Easy badge, cart/want-to-try/cook toggle-on states, timer-done text), not
     the app's primary brand action color. Matches the shade already used
     consistently for this across the app (#27ae60), which is visibly
     different from --accent's #1e8449. */
  --success: #27AE60;
  --success-ink: #FFFFFF;
  --meat: #B23A2E;
  --dairy: #235E8C;
  --pareve: #1A7A4A;
  --not-kosher: #6B6259;
  --meat-soft: #FBEAE7;
  --dairy-soft: #E8F1F8;
  --pareve-soft: #E6F5ED;
  --not-kosher-soft: #EEEBE6;
  --shadow: 0 8px 28px rgba(42,30,22,.14);
  --shadow-sm: 0 2px 8px rgba(42,30,22,.10);
}

/* ─────────────────────────────────────────────────────────────────────────
   Skin overrides — the 5-skin system (data-style) each already forces its
   own background regardless of the light/dark toggle (see the [data-style=…]
   rules in app.css), so these blocks just mirror each skin's EXISTING
   palette into token form. Placed after the [data-theme] blocks above so
   they win the cascade when both a theme and a skin are active (same
   selector specificity — source order decides). No new colors invented;
   every value below is lifted directly from app.css's current per-skin
   rules so adopting tokens causes zero visual change for skinned users
   until a component is actually migrated to consume them.
   ───────────────────────────────────────────────────────────────────────── */
[data-style="cookbook"] {
  --bg: #FAF6F0;
  --bg-elevated: #FFFEF9;
  --bg-sunken: #F1EAE0;
  --ink: #2A1E16;
  --ink-soft: #5C4F3D;
  --muted: #8B6F52;
  --line: #DFD0B8;
  /* accent left at default — cookbook never overrides --pico-primary */
}
[data-style="bold"] {
  --bg: #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F0F0F0;
  --ink: #2A1E16;
  --ink-soft: #5C4F3D;
  --muted: #8A7A6A;
  --line: rgba(0,0,0,.08);
  --accent: #059669;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(5,150,105,.14);
}
[data-style="moody"] {
  --bg: #0F172A;
  --bg-elevated: #1E293B;
  --bg-sunken: #0B1220;
  --ink: #E2E8F0;
  --ink-soft: #CBD5E1;
  --muted: #94A3B8;
  --line: #334155;
  --accent: #F59E0B;
  --accent-ink: #1C1917;
  --accent-soft: rgba(245,158,11,.16);
  --shadow: 0 8px 28px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
}
[data-style="cosmic"] {
  --bg: #07020F;
  --bg-elevated: #120426;
  --bg-sunken: #05010A;
  --ink: #E0D4FF;
  --ink-soft: #C7B3F0;
  --muted: #A78BFA;
  --line: rgba(139,0,255,.35);
  --accent: #00FFE0;
  --accent-ink: #07020F;
  --accent-soft: rgba(0,255,224,.16);
  --shadow: 0 0 24px rgba(139,0,255,.25);
  --shadow-sm: 0 0 12px rgba(139,0,255,.15);
}
[data-style="tutu"] {
  --bg: #B9F0C8;
  --bg-elevated: #EDFFF2;
  --bg-sunken: #A3E8B5;
  --ink: #004D12;
  --ink-soft: #00701A;
  --muted: #00701A;
  --line: #00A82A;
  --accent: #00701A;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(0,112,26,.14);
  --danger: #D10000;
  --danger-soft: rgba(209,0,0,.12);
}