/* =====================================================================
   Bistromath Works — Colors & Type
   Drop-in CSS custom properties + semantic type classes.
   Depends on Google Fonts: Space Grotesk, Cormorant Garamond, JetBrains Mono.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Core palette ──────────────────────────────────────────────── */
  --navy:         #0a0e1a; /* primary background — deep night-sky */
  --navy-mid:     #121829; /* section divider / card base */
  --navy-light:   #1a2236; /* elevated surface */

  --cream:        #f5f0e8; /* primary text — warm linen */
  --cream-dim:    #c8c0b4; /* body copy */

  --gold:         #c9a84c; /* accents, logo, interactive — candlelight */
  --gold-dim:     #8a7235; /* secondary gold, disabled */

  --barolo:       #7a2332; /* wine — errors, stains */
  --barolo-light: #a83248; /* wine highlight */

  --linen:        rgba(245, 240, 232, 0.03); /* tablecloth tint */

  /* ── Semantic text ─────────────────────────────────────────────── */
  --text-primary:   #f5f0e8;
  --text-secondary: #9a9484;
  --text-muted:     #5a5548;

  /* ── Borders & lines ───────────────────────────────────────────── */
  --border-subtle: rgba(201, 168, 76, 0.08);
  --border-hover:  rgba(201, 168, 76, 0.20);
  --border-focus:  #c9a84c;
  --rule-gold:     #c9a84c;

  /* ── Shadow / glow ─────────────────────────────────────────────── */
  --glow-gold:   0 0 20px rgba(201, 168, 76, 0.08);
  --glow-strong: 0 0 40px rgba(201, 168, 76, 0.18);

  /* ── Type families ─────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ── Tracking (the brand uses a LOT of letter-spacing) ─────────── */
  --track-neg:   -0.03em; /* display-xl only — scale-not-weight register */
  --track-tight:  0.05em;
  --track-normal: 0.15em;
  --track-wide:   0.20em;
  --track-extra:  0.30em;

  /* ── Spacing / layout ──────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 5rem;
  --space-12: 8rem;

  --container-narrow: 640px;
  --container: 900px;
  --container-wide: 1200px;

  --radius-none: 0;      /* brand default — sharp edges */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 0.3s; /* @kind other */
  --dur-med:  0.4s; /* @kind other */
  --dur-slow: 0.8s; /* @kind other */
}

/* ──────────────────────────────────────────────────────────────────
   Base
   ────────────────────────────────────────────────────────────────── */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) var(--navy);
}
body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--text-primary);
  line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────────
   Semantic type classes
   ────────────────────────────────────────────────────────────────── */

/* Eyebrow / section label — tiny, uppercase, wide tracking, gold */
.t-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: var(--track-extra);
  text-transform: uppercase;
  color: var(--gold);
}

/* Display title — hero */
.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: var(--track-normal);
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.1;
}

/* Display XL — statement headline. Hierarchy from SCALE, not weight or
   uppercase: Space Grotesk 300, huge, negative tracking, sentence case.
   For hero/section statements; the wordmark keeps its uppercase rule. */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  letter-spacing: var(--track-neg);
  color: var(--cream);
  line-height: 1.02;
  text-wrap: balance;
}

/* Section title */
.t-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: var(--track-tight);
  color: var(--cream);
  line-height: 1.2;
}

/* Card / feature title */
.t-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--cream);
  letter-spacing: 0.02em;
}

/* Editorial italic subtitle — the maitre d' preamble */
.t-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Body copy — long form */
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--cream-dim);
  line-height: 1.85;
}

/* Card / feature body — shorter */
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Body light — Space Grotesk 300 register for product/UI surfaces.
   Cormorant italic remains the maitre d's conversational voice. */
.t-body-light {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--cream-dim);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Italic pull quote */
.t-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* UI label — button, field label */
.t-ui {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--cream);
}

/* Smallest uppercase label */
.t-micro {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mono — receipts, code, digit inputs */
.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  color: var(--gold);
}

/* ──────────────────────────────────────────────────────────────────
   Headline mark — "Bistro + math" in two colors
   ────────────────────────────────────────────────────────────────── */
.gold { color: var(--gold); }
.cream { color: var(--cream); }

/* Horizontal gold rule used as a separator between title and tagline */
.hr-gold {
  width: 80px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: var(--space-5) auto;
}