/* =========================================================
   GUSTAI — Colors & Type
   Fresh pasta + sauce. Bold, young, not-your-nona.
   ========================================================= */

/* ---------- Fonts (Google Fonts substitutes — see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800;900&family=Jost:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Core palette ---------- */
  --sugo:        #E63328;  /* tomato sugo — primary */
  --sugo-deep:   #B81F16;  /* roasted tomato */
  --sugo-soft:   #F5B5AE;  /* blush tomato */

  --basil:       #2D6A3E;  /* deep basil green — secondary */
  --basil-bright:#4FAE5D;  /* fresh basil */
  --basil-soft:  #CFE4C9;  /* pesto cream */

  --yolk:        #F4C43C;  /* egg yolk — accent */
  --yolk-deep:   #D99E1F;
  --yolk-soft:   #FBE9A8;

  --cream:       #F9EDD6;  /* semola cream — warm base */
  --cream-deep:  #F1DFB8;  /* toasted semola */
  --paper:       #FFF9EC;  /* flour-dusted paper */

  --ink:         #1A1410;  /* charcoal ink — primary text */
  --ink-2:       #3B322B;  /* secondary text */
  --ink-3:       #6D6159;  /* tertiary / meta */
  --ink-4:       #A39A91;  /* disabled / hint */

  --line:        #E3D4B4;  /* warm hairlines */
  --line-strong: #C9B58C;

  /* brand extras */
  --olive:       #6B7A2A;  /* olive oil */
  --wine:        #6B1A2E;  /* barolo */
  --peperoncino: #FF6A3D;  /* chili accent (hover/glow) */

  /* ---------- Semantic foreground / background ---------- */
  --bg:          var(--cream);
  --bg-paper:    var(--paper);
  --bg-sugo:     var(--sugo);
  --bg-ink:      var(--ink);

  --fg:          var(--ink);
  --fg-muted:    var(--ink-2);
  --fg-subtle:   var(--ink-3);
  --fg-hint:     var(--ink-4);
  --fg-on-sugo:  var(--cream);
  --fg-on-ink:   var(--cream);

  /* ---------- Status ---------- */
  --success:     var(--basil-bright);
  --warning:     var(--yolk-deep);
  --danger:      var(--sugo);
  --info:        #2F6EB8;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Shadows (warm, not gray) ---------- */
  --shadow-1: 0 1px 0 rgba(26,20,16,0.06), 0 1px 2px rgba(26,20,16,0.08);
  --shadow-2: 0 2px 0 rgba(26,20,16,0.06), 0 6px 14px rgba(26,20,16,0.10);
  --shadow-3: 0 4px 0 rgba(26,20,16,0.08), 0 14px 28px rgba(26,20,16,0.14);
  --shadow-pop: 4px 4px 0 var(--ink);         /* signature offset shadow */
  --shadow-pop-sugo: 4px 4px 0 var(--sugo);
  --shadow-inset: inset 0 0 0 2px var(--ink);

  /* ---------- Borders ---------- */
  --bw-hair: 1px;
  --bw-1: 2px;
  --bw-2: 3px;
  --bw-chunky: 4px;

  /* ---------- Motion ---------- */
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);   /* signature springy pop */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- Type families (free Helvetica/Futura equivalents) ---------- */
  --font-display: 'Archivo Black', 'Archivo', 'Helvetica Neue', system-ui, sans-serif; /* Helvetica-family display */
  --font-body:    'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-geo:     'Jost', 'Futura', 'Futura PT', system-ui, sans-serif; /* Futura-equivalent geometric */
  --font-accent:  'Jost', 'Futura', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Type scale ---------- */
  --fs-hero: clamp(72px, 10vw, 160px);
  --fs-h1:   clamp(48px, 6vw, 88px);
  --fs-h2:   clamp(36px, 4vw, 56px);
  --fs-h3:   28px;
  --fs-h4:   22px;
  --fs-lg:   20px;
  --fs-md:   16px;
  --fs-sm:   14px;
  --fs-xs:   12px;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-body: 1.5;
  --lh-loose: 1.7;
}

/* ---------- Base / semantic element styles ---------- */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  color: var(--fg);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.hero, h1.hero {
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.88;
  text-transform: uppercase;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 900; letter-spacing: -0.03em; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.02em; text-transform: none; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sugo);
  font-style: normal;
}

.accent {
  font-family: var(--font-accent);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Lab tag — goes next to the wordmark */
.lab-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--sugo);
  color: var(--cream);
  border: 2px solid var(--ink);
  padding: 0.18em 0.5em 0.14em;
  border-radius: var(--r-xs);
  box-shadow: 3px 3px 0 var(--ink);
  vertical-align: middle;
  line-height: 1;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--fg-muted);
}

small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

.meta {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--sugo-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--peperoncino); }

hr {
  border: 0;
  border-top: 2px dashed var(--line-strong);
  margin: var(--s-8) 0;
}

::selection { background: var(--yolk); color: var(--ink); }