/* frontend/css/tokens.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Plateby — Design Token Layer
   Single source of truth for all CSS custom properties.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --bg:        #FAF7F2;
  --surface:   #FFFFFF;
  --surface-2: #F3EDE3;
  --primary:   #C4622D;
  --primary-h: #A84E22;
  --secondary: #2D4A3E;
  --accent:    #E8B84B;
  --danger:    #C0392B;

  --text-1: #1A1A18;
  --text-2: #5C5A54;
  --text-3: #9A9188;
  --border: #E0D8CC;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14);

  --sidebar-w: 240px;
  --transition: 200ms ease;

  /* ── Responsive Spacing Scale ──────────────────────────────────────────────
     Fluid spacing that scales with viewport. Use these instead of hardcoded px.
     Format: clamp(min, preferred, max) — scales smoothly between breakpoints. */
  --space-xs:  clamp(0.25rem, 0.5vw, 0.375rem);   /* 4px → 6px */
  --space-sm:  clamp(0.5rem, 1vw, 0.75rem);        /* 8px → 12px */
  --space-md:  clamp(0.75rem, 1.5vw, 1rem);        /* 12px → 16px */
  --space-lg:  clamp(1rem, 2vw, 1.5rem);           /* 16px → 24px */
  --space-xl:  clamp(1.5rem, 3vw, 2rem);           /* 24px → 32px */
  --space-2xl: clamp(2rem, 4vw, 3rem);             /* 32px → 48px */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── 3.10 Part 3: forest-green plan-grid signature ──────────────────────────
     The weekly plan grid is the app's one bold, ownable artifact: its day/date
     headers wear a forest-green (--secondary) band. --secondary does NOT flip
     between light/dark, so its on-colors must be theme-STABLE (do not derive
     from --bg/--text-1, which flip and would go unreadable on the green band).
     Terracotta (--primary) stays the app's general accent everywhere else. */
  --on-secondary:     #F4F1EA;              /* cream text on the green band (AA ~8.3:1) */
  --on-secondary-dim: rgba(244,241,234,.70);/* secondary text on the green band (AA) */
  --secondary-d:      #213A30;              /* deeper green: band edge + grid corner */
  /* ── 2.1 tokenization: compat aliases + semantic state tokens ──────────────── */
  --text:    var(--text-1);   /* compat alias — fixes dead var(--text) refs (UI #5) */
  --card-bg: var(--surface);  /* compat alias — fixes dead var(--card-bg) refs */

  --success:    #3E7C5A;  --success-bg: #E4F0E9;
  --warning:    #C98A2B;  --warning-bg: #F7ECD6;
  --info:       #2D6A6A;  --info-bg:    #DCEBEB;   /* teal — there is no brand blue */
  --danger-bg:  #F7E2DF;                           /* --danger (#C0392B) already exists */

  --muted:    var(--text-3);  /* neutral aliases so Tailwind grays map to the warm scale */
  --hairline: var(--border);

  /* third-party / brand-mark colors (kept literal; tokenized for dark-mode override) */
  --brand-whatsapp: #25D366;  /* WhatsApp share button */
  --logo-blue:      #1B7FC4;  /* nav/logo icon mark */
  --logo-green:     #5AAD2A;  /* nav/logo icon mark */

  /* ── 2.1: data-viz palette (macros / reports / analysis) ──────────────────────
     Categorical nutrient & meal hues centralised so the chart series stay
     DISTINCT yet live in one place (single source of truth → 3.10 dark mode is a
     single override block). Values are the EXACT pre-tokenization hexes, so
     tokenizing the category series is a no-op on light mode. Functional STATUS
     (good / warning / over) maps to the brand --success/--warning/--danger tokens
     instead — one status palette app-wide (the intended Tailwind→brand shift). */

  /* nutrient series — bar fill / chip text(fg) / chip bg / chip border(bd) */
  --nutri-protein: #3b82f6; --nutri-protein-fg: #2563eb; --nutri-protein-bg: #eff6ff; --nutri-protein-bd: #bfdbfe;
  --nutri-carbs:   #f59e0b; --nutri-carbs-fg:   #d97706; --nutri-carbs-bg:   #fffbeb; --nutri-carbs-bd:   #fde68a;
  --nutri-fat:     #22c55e; --nutri-fat-fg:     #16a34a; --nutri-fat-bg:     #f0fdf4; --nutri-fat-bd:     #bbf7d0;
  --nutri-fiber:   #a855f7; --nutri-fiber-fg:   #7c3aed; --nutri-fiber-bg:   #faf5ff; --nutri-fiber-bd:   #e9d5ff;
  --nutri-sugar-fg:  #db2777; --nutri-sugar-bg:  #fdf2f8; --nutri-sugar-bd:  #fce7f3;
  --nutri-sodium-fg: #0284c7; --nutri-sodium-bg: #f0f9ff; --nutri-sodium-bd: #e0f2fe;

  /* meal-type series — accent text(fg) / panel bg */
  --meal-breakfast-fg: #ea580c; --meal-breakfast-bg: #fff7ed;
  --meal-lunch-fg:     #ca8a04; --meal-lunch-bg:     #fefce8;
  --meal-dinner-fg:    #4f46e5; --meal-dinner-bg:    #eef2ff;
  --meal-snack-fg:     #9333ea; --meal-snack-bg:     #fdf4ff;

  /* calorie card + warm decorative tints (fg = --primary) */
  --cal-bg: #fff5f0; --cal-bd: #fcd9c9;
  --warm-25:     #fef9f5;   /* hero gradient 2nd stop */
  --gauge-track: #f1e8e3;   /* SVG gauge ring background */

  /* decorative info/blue surface (no brand blue exists — preserved exact) */
  --info-soft: #eff6ff; --info-soft-2: #dbeafe;

  /* decorative amber tip/insight panels + streak badge — NOT status (no .good/.over/.error
     modifier); these are styled containers, so preserved EXACT with their own tokens rather
     than shifted to --warning/--danger. Kept independent of --nutri-carbs so a dark-mode
     carbs override cannot bleed into them. */
  --insight-bg: #fefce8; --tip-bg: #fffbeb; --tip-bg-2: #fef3c7; --tip-bd: #fde68a;
  --streak-fg:  #dc2626; --streak-bg: rgba(239, 68, 68, .1);

  --tut-btn-secondary:#f3f4f6;

  /* ── Sketch/Comic Design System ─────────────────────────────────────────── */
  /* Hand-drawn aesthetic tokens — ink outlines, paper texture, cross-hatch */
  --ink: var(--text-1);                    /* primary outline color */
  --ink-2: var(--text-2);                  /* secondary outline color */
  --ink-width: 1.5px;                      /* standard outline weight */
  --ink-width-bold: 2px;                   /* emphasis outline weight */
  --paper: 0.04;                           /* paper texture opacity */
  --hatch-opacity: 0.05;                   /* cross-hatch shading opacity */
  --sketch-radius: 10px;                   /* slightly irregular radius */
  --sketch-radius-sm: 5px;                 /* small irregular radius */
  --sketch-shadow: 2px 3px 0 rgba(26,26,24,0.12);  /* hard offset shadow */
  --sketch-shadow-offset: 2px 3px;         /* shadow offset */
  --sketch-dashed: dashed;                 /* dashed border style */
}

/* ═══════════════════════════════════════════════════════════════════════════
   3.10 — Dark mode
   ───────────────────────────────────────────────────────────────────────────
   Token-override theme. js/theme.js (+ the inline pre-paint block in index.html)
   ALWAYS resolves an explicit  :root[data-theme="light"|"dark"]  — so the real
   theme keys off [data-theme="dark"]. The @media block below is a no-JS / no-attr
   FALLBACK that only re-skins the base chrome tokens.
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:        #1A1A18;
    --surface:   #26241F;
    --surface-2: #322E27;
    --text-1:    #F2EEE6;
    --text-2:    #C9C2B6;
    --text-3:    #988F82;
    --border:    #3A352D;
    --primary:   #E07B45;
    --primary-h: #C4622D;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --shadow:    0 4px 16px rgba(0,0,0,.55);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.65);
  }
}

:root[data-theme="dark"] {
  /* base chrome */
  --bg:        #1A1A18;
  --surface:   #26241F;
  --surface-2: #322E27;
  --text-1:    #F2EEE6;
  --text-2:    #C9C2B6;
  --text-3:    #988F82;
  --border:    #3A352D;
  --primary:   #E07B45;   /* lightened terracotta — AA on dark surfaces */
  --primary-h: #C4622D;
  /* --secondary (forest green) & --accent (gold) read fine on dark → kept */
  --danger:    #E2685A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow:    0 4px 16px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.65);

  /* semantic state tokens (text + soft bg) */
  --success:    #5FB084;  --success-bg: #1E3329;
  --warning:    #E0A94A;  --warning-bg: #3A2F1A;
  --info:       #5BA3A3;  --info-bg:    #163030;
  --danger-bg:  #3A211D;

  /* data-viz: nutrient series (fill / fg text / soft bg / border) — fg lightened
     for legibility on the dark chip bg, series stay distinct */
  --nutri-protein: #5B8FE0; --nutri-protein-fg: #7FB0E8; --nutri-protein-bg: #1C2A3A; --nutri-protein-bd: #2E4258;
  --nutri-carbs:   #E0A94A; --nutri-carbs-fg:   #E8C06A; --nutri-carbs-bg:   #3A2F1A; --nutri-carbs-bd:   #5A4A28;
  --nutri-fat:     #5FB084; --nutri-fat-fg:     #7FD0A0; --nutri-fat-bg:     #1E3329; --nutri-fat-bd:     #2E5240;
  --nutri-fiber:   #B583EE; --nutri-fiber-fg:   #C9A6F0; --nutri-fiber-bg:   #2A2138; --nutri-fiber-bd:   #43345C;
  --nutri-sugar-fg:  #E89BB8; --nutri-sugar-bg:  #34212B; --nutri-sugar-bd:  #523441;
  --nutri-sodium-fg: #7FC4E8; --nutri-sodium-bg: #1A2A33; --nutri-sodium-bd: #2E4350;

  /* meal-type series (accent text / panel bg) */
  --meal-breakfast-fg: #E89B6A; --meal-breakfast-bg: #33241C;
  --meal-lunch-fg:     #E0C04A; --meal-lunch-bg:     #322E18;
  --meal-dinner-fg:    #9B95E8; --meal-dinner-bg:    #24233A;
  --meal-snack-fg:     #C99BE8; --meal-snack-bg:     #2E2138;

  /* calorie card + decorative warm tints */
  --cal-bg: #2A1F18; --cal-bd: #4A2F22;
  --warm-25:     #221A15;
  --gauge-track: #3A2F28;
  --info-soft: #1C2A3A; --info-soft-2: #2E4258;
  --insight-bg: #322E18; --tip-bg: #3A2F1A; --tip-bg-2: #4A3A1F; --tip-bd: #5A4A28;
  --streak-fg:  #EE8A7E; --streak-bg: rgba(238,138,126,.12);

  /* sketch tokens — dark mode */
  --ink: var(--text-1);                    /* light ink on dark */
  --ink-2: var(--text-2);                  /* dim ink on dark */
  --paper: 0.025;                          /* subtler texture */
  --hatch-opacity: 0.04;                   /* lower hatch opacity */
  --sketch-shadow: 2px 3px 0 rgba(0,0,0,0.3);  /* darker shadow */
}