/* ============================================================
   TERRAFORNO — Colors & Type Foundation
   "Terra + Forno" — earth oven. Fire, clay, char, hearth.
   Premium artisanal wood-fired ovens. Made in India.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --tf-charcoal:      #1A120B;
  --tf-espresso:      #2A1B11;
  --tf-bark:          #4A2E1A;
  --tf-clay:          #B07A4A;
  --tf-tan:           #C9A87C;

  /* ---------- FIRE / EMBER (accents) ---------- */
  --tf-hearth:        #9A3B1E;
  --tf-terracotta:    #C75D34;
  --tf-ember:         #E87A3E;
  --tf-flame:         #F2B544;
  --tf-spark:         #FBE3B3;

  /* ---------- WARM NEUTRALS ---------- */
  --tf-cream:         #F4ECDF;
  --tf-parchment:     #EADFCB;
  --tf-oat:           #E0D2BB;
  --tf-stone:         #8B8076;
  --tf-ash:           #6B6258;
  --tf-ink:           #221A12;

  /* ============================================================
     SEMANTIC TOKENS — default theme: "Hearth Cream" (light)
     Dark fire-lit sections opt in via [data-section="ember"].
     ============================================================ */
  --bg:           var(--tf-cream);
  --surface:      var(--tf-parchment);
  --surface-2:    var(--tf-oat);
  --fg-1:         var(--tf-ink);
  --fg-2:         #574A3B;
  --fg-3:         var(--tf-ash);
  --border:       #D6C7AC;
  --border-strong:#C2AE8C;

  --accent:       var(--tf-terracotta);
  --accent-hover: var(--tf-hearth);
  --accent-fg:    var(--tf-cream);
  --flame:        var(--tf-flame);
  --ember:        var(--tf-ember);

  --glow-ember:   radial-gradient(60% 60% at 50% 50%, rgba(232,122,62,.55), rgba(154,59,30,0) 70%);

  /* ---------- RADII ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --sh-1: 0 1px 2px rgba(42,27,17,.08);
  --sh-2: 0 4px 14px rgba(42,27,17,.10);
  --sh-3: 0 14px 40px rgba(42,27,17,.16);
  --sh-glow: 0 10px 50px rgba(232,122,62,.30);

  /* ---------- SPACING ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- TYPE ---------- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', monospace;

  --t-display:  clamp(3rem, 6vw, 6rem);
  --t-h1:       clamp(2.4rem, 4.2vw, 4rem);
  --t-h2:       clamp(1.8rem, 3vw, 2.75rem);
  --t-h3:       clamp(1.35rem, 2vw, 1.75rem);
  --t-h4:       1.25rem;
  --t-body-lg:  1.1875rem;
  --t-body:     1.0625rem;
  --t-sm:       0.9375rem;
  --t-xs:       0.8125rem;
  --t-eyebrow:  0.78125rem;
}

/* ============================================================
   THEME: EMBER (dark, fire-lit)
   ============================================================ */
[data-section="ember"],
[data-theme="ember"] {
  --bg:           var(--tf-charcoal);
  --surface:      var(--tf-espresso);
  --surface-2:    #34221544;
  --fg-1:         #F6ECDD;
  --fg-2:         #D8C6AE;
  --fg-3:         #A2917C;
  --border:       #3E2C1C;
  --border-strong:#574029;
  --accent:       var(--tf-ember);
  --accent-hover: var(--tf-flame);
  --accent-fg:    var(--tf-charcoal);
  color: var(--fg-1);
  background: var(--bg);
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
.tf-display, .tf-h1, .tf-h2, .tf-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
}
.tf-display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.02em; }
.tf-h1 { font-size: var(--t-h1); }
.tf-h2 { font-size: var(--t-h2); }
.tf-h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.1; }

.tf-h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg-1);
}

.tf-lead {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}
.tf-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-2);
  text-wrap: pretty;
}
.tf-small { font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.55; color: var(--fg-3); }

.tf-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.tf-mono { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: 0; }

.tf-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.2;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}