/* ══════════════════════════════════════════════════════
   THE PIE LAB — EMBER EDITORIAL DESIGN SYSTEM
   Shared stylesheet for pielab.app (marketing site)
   Fonts: Fraunces (display) · Libre Franklin (body/UI) · Space Mono (data)
   Mirrors the app's design system so site + app share one language.
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&family=Libre+Franklin:wght@200;300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --clr-ember:       #D4713A;
  --clr-crust:       #C4874A;
  --clr-parchment:   #F5EDE0;

  /* Dark surfaces */
  --clr-char:        #0F0D0A;
  --clr-coal:        #1A1410;
  --clr-ash:         #2A1E14;

  /* Text tones */
  --clr-smoke:       #9A8A7A;
  --clr-stone:       #5A4A3A;
  --clr-flint:       #3A2A1A;

  /* Semantic */
  --clr-success:     #50A070;
  --clr-error:       #C05050;

  /* Typography */
  --font-display:    'Fraunces', Georgia, serif;
  --font-body:       'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --font-data:       'Space Mono', 'Courier New', monospace;
  --font-mono:       'Space Mono', 'Courier New', monospace;

  /* Shape */
  --radius:          4px;
  --radius-card:     6px;
  --radius-btn:      2px;

  /* No shadows — use borders */
  --shadow:          none;
  --shadow-lg:       none;

  --transition:      0.2s ease;

  /* ── Legacy alias vars ──
     Existing per-page <style> blocks reference these names. Aliasing
     keeps them working while redirecting values to the Ember palette. */
  --bg:              #0F0D0A;
  --bg-alt:          #171210;
  --card:            #1A1410;
  --primary:         #D4713A;
  --primary-dark:    #B85A28;
  --accent:          #C4874A;
  --text:            #F5EDE0;
  --text-muted:      #9A8A7A;
  --white:           #F5EDE0;
  --border:          #2A1E14;
  --header-bg:       rgba(15, 13, 10, 0.94);
  --badge-bg:        transparent;
  --badge-bg-hover:  rgba(245, 237, 224, 0.06);
  --badge-border:    #F5EDE0;
  --glow:            rgba(212, 113, 58, 0.06);
  --phone-border:    rgba(245, 237, 224, 0.08);
  --phone-shadow:    none;
  --phone-ring:      rgba(245, 237, 224, 0.03);
  --noise-opacity:   0;

  color-scheme:      dark;
}

/* ── Light mode override (explicit opt-in) ── */
[data-theme='light'] {
  --clr-bg:          #F7F0E6;
  --bg:              #F7F0E6;
  --bg-alt:          #EDE3D6;
  --card:            #EDE3D6;
  --primary:         #B85A28;
  --primary-dark:    #9A4820;
  --accent:          #9A6830;
  --text:            #1A0E06;
  --text-muted:      #6A5040;
  --border:          #D8CBBA;
  --header-bg:       rgba(247, 240, 230, 0.94);
  color-scheme:      light;
}

html { scroll-behavior: smooth; }

body {
  font-family:            var(--font-body);
  font-weight:            300;
  background:             var(--bg);
  color:                  var(--text);
  line-height:            1.7;
  font-size:              17px;
  min-height:             100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:             hidden;
}

*:focus-visible {
  outline:        2px solid var(--clr-ember);
  outline-offset: 2px;
}

a { color: var(--accent); text-decoration: none; }

button, a, [role='button'] {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto !important;
  }
}

/* ══════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════ */
h1, h2, h3 {
  font-family:    var(--font-display);
  font-weight:    300;
  font-style:     italic;
  color:          var(--text);
  line-height:    1.1;
  letter-spacing: -0.3px;
}

p {
  font-weight: 300;
  line-height: 1.7;
}

/* Subhead — Libre Franklin ultralight tracked all-caps */
.t-subhead {
  font-family:    var(--font-body);
  font-weight:    200;
  font-size:      0.7rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--clr-ember);
}

/* Data — Space Mono for numbers */
.t-data,
.data-value {
  font-family:    var(--font-data);
  font-weight:    400;
  color:          var(--clr-crust);
  letter-spacing: 0.5px;
}

.stat-hero {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    300;
  font-size:      2.5rem;
  color:          var(--clr-crust);
  line-height:    1;
}

.stat-label {
  font-family:    var(--font-data);
  font-size:      0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--clr-stone);
  margin-top:     3px;
}

.t-label {
  font-family:    var(--font-body);
  font-weight:    200;
  font-size:      0.7rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color:          var(--clr-stone);
}

/* ══════════════════════════════════════════════════
   WORDMARK (nav + hero)
   ══════════════════════════════════════════════════ */
.nav-logo-wordmark {
  font-family:  var(--font-display);
  font-size:    1.1rem;
  font-weight:  300;
  font-style:   italic;
  color:        var(--text);
  line-height:  1;
}

.nav-logo-wordmark .lab,
.hero-logo-wordmark .lab {
  color:       var(--clr-ember);
  font-style:  normal;
  font-weight: 500;
}

.hero-logo-wordmark {
  font-family:    var(--font-display);
  font-size:      clamp(2.5rem, 6vw, 4.5rem);
  font-weight:    300;
  font-style:     italic;
  color:          var(--text);
  line-height:    1;
  letter-spacing: -1px;
  display:        inline-block;
}

/* Legacy alias: existing CSS references .logo in the header */
.site-header .logo,
.site-header .nav-logo-wordmark {
  filter: none !important;
}