/* ─────────────────────────────────────────────────────────────
   Luis Cooks — Design Tokens
   Editorial cookbook · warm paper · ink · deep olive
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paper & ink (light) — almost white, faintly warm, with a barely-there
     fibre texture defined below. */
  --paper:        #fbfaf6;     /* barely off-white, just a whisper of warmth */
  --paper-2:      #f0eee5;     /* recessed surfaces, chips at rest */
  --paper-3:      #ddd9cd;     /* hairlines at rest */
  --paper-tone:   #fdfcf9;     /* hero/empty surfaces */

  --ink:          #1f1a14;     /* primary text */
  --ink-2:        #4a4136;     /* secondary text */
  --ink-3:        #756a59;     /* tertiary, meta */
  --ink-4:        #a89c87;     /* placeholders, disabled */

  /* Accent — deep olive */
  --olive:        #5a6b3a;     /* primary accent */
  --olive-dim:    #3f4d22;     /* hover / active */
  --olive-tint:   #c9d09f;     /* surfaces */

  /* Functional */
  --star:         #b88a1f;     /* warm gold for ratings */
  --tomato:       #a83a22;     /* destructive only */
  --hairline:     rgba(31,26,20,0.12);
  --hairline-2:   rgba(31,26,20,0.06);

  /* Type */
  --serif:  'Newsreader', 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
  --sans:   'DM Sans', 'Söhne', 'Inter', system-ui, -apple-system, sans-serif;
  --hand:   'Caveat', 'Bradley Hand', 'Marker Felt', cursive;
  --mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale (px, designed for iPad landscape ~1366px wide) */
  --t-display-xl: 88px;   /* hero titles */
  --t-display-l:  64px;
  --t-display-m:  44px;
  --t-display-s:  32px;
  --t-body-l:     22px;   /* directions */
  --t-body-m:     18px;   /* ingredients */
  --t-body-s:     16px;
  --t-ui-l:       17px;
  --t-ui-m:       15px;
  --t-ui-s:       13px;
  --t-ui-xs:      11px;   /* small caps, meta */

  /* Spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* Radii — restrained, editorial */
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 10px;

  /* Shadows — quiet */
  --shadow-s: 0 1px 2px rgba(31,26,20,0.06);
  --shadow-m: 0 8px 24px rgba(31,26,20,0.10);
  --shadow-l: 0 20px 60px rgba(31,26,20,0.18);
}

/* ─────────────────────────────────────────────────────────────
   Theme · Glossy magazine page
   White paper, near-black ink, restrained claret accent.
   Source Serif 4 + DM Sans + Caveat.
   ───────────────────────────────────────────────────────────── */
.lc-theme-glossy {
  --paper:        #ffffff;
  --paper-2:      #f3f2ee;
  --paper-3:      #e6e4dd;
  --paper-tone:   #fafaf7;

  --ink:          #141414;
  --ink-2:        #3a3a37;
  --ink-3:        #76746e;
  --ink-4:        #b6b3aa;

  /* Restrained "house red" — used only on the italic wordmark, the small caps,
     the section heads. Behaves like accent ink, not a brand colour. */
  --olive:        #8a1f2e;
  --olive-dim:    #5a1320;
  --olive-tint:   #ebd9dc;

  --star:         #946a1f;
  --hairline:     rgba(20,20,20,0.14);
  --hairline-2:   rgba(20,20,20,0.06);

  --serif:        'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
  --sans:         'DM Sans', system-ui, -apple-system, sans-serif;
}
/* In the glossy theme, the paper texture is removed — glossy means clean. */
.lc-theme-glossy.lc-paper,
.lc-theme-glossy .lc-paper {
  background-image: none !important;
  background-color: var(--paper);
}

/* ─────────────────────────────────────────────────────────────
   Theme · OPTION B · The Chef's Table
   Obsidian + brass. Dark mode native, cinematic, glossy.
   DM Serif Display + Manrope + JetBrains Mono.
   ───────────────────────────────────────────────────────────── */
.lc-theme-b {
  --paper:        #0d0b09;     /* obsidian — almost black, slightly warm */
  --paper-2:      #18140f;     /* slate panels */
  --paper-3:      #2a241c;     /* hairline panels, recessed */
  --paper-tone:   #14110d;

  --ink:          #f1ebdb;     /* warm cream type */
  --ink-2:        #c3b9a1;
  --ink-3:        #847b6a;
  --ink-4:        #56503f;

  --olive:        #d68a3a;     /* brass / amber — "ember" accent */
  --olive-dim:    #b06a1c;
  --olive-tint:   #3a2a14;

  --star:         #e8b54a;
  --hairline:     rgba(241,235,219,0.10);
  --hairline-2:   rgba(241,235,219,0.05);

  --serif:        'DM Serif Display', 'Bodoni 72', Georgia, serif;
  --sans:         'Manrope', system-ui, -apple-system, sans-serif;
  --hand:         'Caveat', cursive;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
}

/* Dark themes don't get the paper-fibre texture. */
.lc-theme-b.lc-paper, .lc-theme-b .lc-paper {
  background-image:
    radial-gradient(ellipse at top, rgba(214,138,58,0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 12%);
  background-size: 100% 100%, 100% 100%;
}

/* ─────────────────────────────────────────────────────────────
   Theme · OPTION C · Marble Counter
   Cool marble paper, near-black ink, deep emerald accent.
   Bricolage Grotesque + Spectral italic.
   ───────────────────────────────────────────────────────────── */
.lc-theme-c {
  --paper:        #f1efe9;     /* cool marble off-white */
  --paper-2:      #e6e3da;     /* recessed */
  --paper-3:      #d3cfc3;     /* hairlines at rest */
  --paper-tone:   #ffffff;     /* pure-white insets */

  --ink:          #0a0a09;     /* near black */
  --ink-2:        #353330;
  --ink-3:        #6e6b65;
  --ink-4:        #b3aea4;

  --olive:        #1d4a3a;     /* deep emerald — sophisticated, unusual */
  --olive-dim:    #0e2e22;
  --olive-tint:   #c9d8d0;

  --star:         #84621c;
  --hairline:     rgba(10,10,9,0.12);
  --hairline-2:   rgba(10,10,9,0.05);

  --serif:        'Spectral', 'Iowan Old Style', Georgia, serif;
  --sans:         'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --hand:         'Caveat', cursive;
  --mono:         'JetBrains Mono', monospace;
}

/* Marble texture — very faint, swirly veining (just enough to feel polished). */
.lc-theme-c.lc-paper, .lc-theme-c .lc-paper {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.08  0.16 0 0 0 -0.08'/></filter><rect width='600' height='600' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.08  0.12 0 0 0 -0.07'/></filter><rect width='300' height='300' filter='url(%23m)'/></svg>");
  background-size: 600px 600px, 300px 300px;
}

/* ─────────────────────────────────────────────────────────────
   Theme · OPTION D · "Tonight" — the Daily Edition
   Warm-dark stage, amber bloom. Bricolage Grotesque bold + Spectral.
   For the streaming-service-for-cooking vibe.
   ───────────────────────────────────────────────────────────── */
.lc-theme-d {
  --paper:        #18130e;     /* warm charcoal */
  --paper-2:      #261f17;
  --paper-3:      #3a3022;
  --paper-tone:   #1e1810;

  --ink:          #f3ede1;
  --ink-2:        #c5b9a3;
  --ink-3:        #8a7f6d;
  --ink-4:        #5a5142;

  --olive:        #f0a850;     /* amber — warm stage light */
  --olive-dim:    #d28a30;
  --olive-tint:   #4a3214;

  --star:         #f2c34a;
  --hairline:     rgba(243,237,225,0.10);
  --hairline-2:   rgba(243,237,225,0.05);

  --serif:        'Bricolage Grotesque', system-ui, sans-serif;
  --sans:         'Bricolage Grotesque', system-ui, sans-serif;
  --hand:         'Caveat', cursive;
  --mono:         'JetBrains Mono', monospace;
}

/* Warm stage lighting — amber bloom top-right, deep shadow bottom-left. */
.lc-theme-d.lc-paper, .lc-theme-d .lc-paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 90% at 100% 0%, rgba(240,168,80,0.28) 0%, rgba(240,168,80,0.06) 35%, transparent 65%),
    radial-gradient(ellipse 80% 80% at 0% 100%, rgba(0,0,0,0.4) 0%, transparent 55%),
    linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.18) 100%);
}

/* ─────────────────────────────────────────────────────────────
   Theme · OPTION F · COMMITTED DIRECTION
   D's fonts + amber, but with a quiet near-black gradient ground.
   No warm bloom. Just elegant graphite that subtly shifts.
   Bricolage Grotesque + Spectral italic + Caveat in notes.
   ───────────────────────────────────────────────────────────── */
.lc-theme-f {
  --paper:        #0c0c0e;     /* graphite near-black */
  --paper-2:      #16161a;     /* recessed surfaces, cards */
  --paper-3:      #1f1f24;     /* hairlined surfaces */
  --paper-tone:   #0e0e11;     /* hero/empty surfaces */

  --ink:          #f4f1e9;     /* warm cream */
  --ink-2:        #c8c2b3;
  --ink-3:        #888477;
  --ink-4:        #565347;

  --olive:        #f0a850;     /* amber — kept from D */
  --olive-dim:    #d28a30;
  --olive-tint:   rgba(240,168,80,0.12);

  --star:         #f2c34a;
  --hairline:     rgba(244,241,233,0.10);
  --hairline-2:   rgba(244,241,233,0.05);

  --serif:        'Bricolage Grotesque', system-ui, sans-serif;
  --sans:         'Bricolage Grotesque', system-ui, sans-serif;
  --display:      'Bricolage Grotesque', system-ui, sans-serif;
  --flavour:      'Spectral', 'Iowan Old Style', Georgia, serif;
  --hand:         'Caveat', cursive;
  --mono:         'JetBrains Mono', monospace;
}

/* Quiet, directionless ground: flat near-black with a barely-there noise
   texture so each artboard has depth without a repeating top→bottom pool. */
.lc-theme-f.lc-paper, .lc-theme-f .lc-paper {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.04 0 0 0 -0.005'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Dark mode token overrides — applied via a wrapper class so artboards
   can opt in. Kitchen at night: warm dark, never pure black. */
.lc-dark {
  --paper:        #18140f;
  --paper-2:      #211c15;
  --paper-3:      #2c261d;
  --paper-tone:   #1d1812;

  --ink:          #ede4d2;
  --ink-2:        #c9bda5;
  --ink-3:        #8b7f6a;
  --ink-4:        #58503f;

  --olive:        #a3b375;
  --olive-dim:    #c2d094;
  --olive-tint:   #3b4527;

  --star:         #d6a93e;
  --hairline:     rgba(237,228,210,0.14);
  --hairline-2:   rgba(237,228,210,0.06);
}

/* ─────────────────────────────────────────────────────────────
   Base & typography helpers (scoped — applied per-artboard root)
   ───────────────────────────────────────────────────────────── */
.lc {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "ss02", "cv01";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lc * { box-sizing: border-box; }

/* Paper texture — barely-there fibre. Three layered SVG noises kept very
   restrained: fine grain, horizontal fibres, vertical fibres. Almost
   subliminal — felt more than seen. */
.lc-paper {
  background-color: var(--paper);
  background-image:
    /* fine grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.28  0 0 0 0 0.25  0 0 0 0 0.20  0.32 0 0 0 -0.15'/></filter><rect width='220' height='220' filter='url(%23f)'/></svg>"),
    /* horizontal fibres */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.68' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.26  0 0 0 0 0.23  0 0 0 0 0.19  0.55 0 0 0 -0.36'/></filter><rect width='480' height='480' filter='url(%23f)'/></svg>"),
    /* vertical fibres */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.68 0.011' numOctaves='2' seed='13' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.26  0 0 0 0 0.23  0 0 0 0 0.19  0.42 0 0 0 -0.30'/></filter><rect width='480' height='480' filter='url(%23f)'/></svg>");
  background-size: 220px 220px, 480px 480px, 480px 480px;
}

.lc-paper-2 {
  background-color: var(--paper-2);
}

/* Dark mode and glossy theme reset the texture — neither wants paper grain. */
.lc-dark.lc-paper, .lc-dark .lc-paper,
.lc-theme-glossy.lc-paper, .lc-theme-glossy .lc-paper {
  background-image: none;
}

/* Typography utilities */
.lc-serif    { font-family: var(--serif); font-weight: 400; }
.lc-serif-i  { font-family: var(--serif); font-weight: 400; font-style: italic; }
.lc-display  { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.lc-display-i{ font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; line-height: 1.05; }
.lc-body     { font-family: var(--serif); font-weight: 400; line-height: 1.55; }
.lc-ui       { font-family: var(--sans); font-weight: 400; }
.lc-ui-med   { font-family: var(--sans); font-weight: 500; }
.lc-hand     { font-family: var(--hand); font-weight: 500; }

.lc-smallcaps {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-ui-xs);
}

.lc-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.lc-rule-thick {
  border: 0;
  border-top: 2px solid var(--ink);
  margin: 0;
}

/* Buttons */
.lc-btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-ui-m);
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--r-s);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  transition: background .12s, color .12s, border-color .12s;
}
.lc-btn:hover { background: var(--ink); color: var(--paper); }
.lc-btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.lc-btn-primary:hover { background: var(--olive-dim); border-color: var(--olive-dim); }
.lc-btn-quiet {
  border-color: transparent;
  background: transparent;
}
.lc-btn-quiet:hover { background: var(--paper-2); color: var(--ink); border-color: transparent; }
.lc-btn-danger {
  border-color: var(--tomato);
  color: var(--tomato);
  background: transparent;
}
.lc-btn-danger:hover { background: var(--tomato); color: var(--paper); }

/* Input */
.lc-input {
  font-family: var(--sans);
  font-size: var(--t-ui-l);
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: var(--r-s);
  min-height: 44px;
}
.lc-input:focus {
  outline: none;
  border-color: var(--ink);
}

/* Chip */
.lc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--t-ui-s);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
}
.lc-chip-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lc-chip-accent {
  background: var(--olive-tint);
  color: var(--olive-dim);
  border-color: transparent;
}

/* AI badge — a very quiet attribution mark */
.lc-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: var(--t-ui-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--hairline-2);
}
.lc-ai-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--olive);
}

/* Cost-per-serving chip */
.lc-cost {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-ui-l);
  color: var(--ink);
}
.lc-cost-est {
  font-family: var(--sans);
  font-size: var(--t-ui-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Rating stars */
.lc-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);
}
.lc-stars-empty {
  color: var(--paper-3);
}