/* ============================================================
   LASSO — Colors & Type Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Brand Palette ---- */
  --dust-cream:      #F5EFE7;   /* primary app background */
  --desert-sand:     #F4E1C1;   /* warm highlight, icon fill */
  --brand-orange:    #D85A14;   /* primary CTA, brand accent */
  --sun-orange:      #F28C1B;   /* secondary accent, active state */
  --horse-brown:     #5B240A;   /* mascot depth, icon strokes */
  --dark-chocolate:  #1B120D;   /* frames, nav, dark surfaces */
  --warm-stone:      #7C675B;   /* secondary text */
  --soft-line:       #E7DDD2;   /* borders, dividers */

  /* ---- Status ---- */
  --live-green:    #2E8B4E;
  --cooking:       #F28C1B;
  --delayed-red:   #C13B1F;
  --closed-stone:  #7C675B;

  /* ---- Semantic Surfaces ---- */
  --bg-app:         var(--dust-cream);
  --bg-shell:       var(--dark-chocolate);
  --bg-surface:     #FFFFFF;
  --bg-warm:        var(--desert-sand);
  --bg-elevated:    #FFFBF5;

  /* ---- Semantic Text ---- */
  --fg-primary:     var(--dark-chocolate);
  --fg-secondary:   var(--warm-stone);
  --fg-on-dark:     var(--dust-cream);
  --fg-on-orange:   #FFFFFF;
  --fg-muted:       #A89486;

  /* ---- Borders ---- */
  --border-soft:    var(--soft-line);
  --border-strong:  var(--dark-chocolate);

  /* ---- Type Stacks ---- */
  --font-wordmark: "Alfa Slab One", "Archivo", system-ui, serif;  /* logo only */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- Type Scale (mobile-first product) ---- */
  --t-hero:        56px;   /* marketing hero, "Catch your craving." */
  --t-display:     40px;   /* screen headline */
  --t-title:       28px;   /* section title */
  --t-h1:          22px;   /* card title */
  --t-h2:          18px;   /* sub-header */
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     12px;
  --t-eyebrow:     11px;   /* tracked-out label */

  /* ---- Tracking ---- */
  --track-eyebrow:  0.18em;
  --track-tight:   -0.02em;
  --track-display: -0.01em;

  /* ---- Radii ---- */
  --r-card:    28px;   /* outer cards (28–32) */
  --r-card-lg: 32px;
  --r-inner:   18px;   /* inner elements (16–20) */
  --r-pill:    999px;
  --r-chip:    14px;

  /* ---- Spacing scale (4pt) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(27,18,13,0.06);
  --shadow-md:  0 6px 18px -6px rgba(27,18,13,0.18);
  --shadow-lg:  0 18px 40px -12px rgba(27,18,13,0.28);
  --shadow-orange: 0 10px 24px -8px rgba(216,90,20,0.55);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ============================================================
   Semantic type classes — use these in product code.
   ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: 0.94;
  letter-spacing: var(--track-display);
  color: var(--fg-primary);
  text-wrap: balance;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: var(--track-display);
  color: var(--fg-primary);
}

.t-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--fg-primary);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: 1.2;
  color: var(--fg-primary);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.25;
  color: var(--fg-primary);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg-primary);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--fg-secondary);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg-secondary);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  line-height: 1.0;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--fg-primary);
}

/* Wordmark — slab-serif, bold, slightly weathered. Matches LASSO hero illustration. */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;        /* Alfa Slab One ships as a single weight */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

* { box-sizing: border-box; }