/* ============================================================
   FuturIQ — Colors & Type
   Dark premium editorial. Gold accent, warm cream text,
   high-contrast serif display + clean sans body.
   ============================================================ */

/* --- Google Fonts (substitutions flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLOR — surfaces ---------- */
  --bg-0:        #0A0A0A;   /* primary near-black background */
  --bg-1:        #171717;   /* elevated charcoal, cards */
  --bg-2:        #1F1C18;   /* slightly warmer elevated */
  --bg-paper:    #F6F1E3;   /* cream "paper" sections on marketing page */
  --bg-paper-2:  #EFE8D4;   /* alt cream */

  /* ---------- COLOR — ink / text ---------- */
  --fg-1:        #F5F0E3;   /* primary text — warm cream */
  --fg-2:        #A8A091;   /* secondary — muted warm gray */
  --fg-3:        #6E6859;   /* tertiary / metadata */
  --fg-on-paper-1: #111111; /* body text on cream */
  --fg-on-paper-2: #3A3528; /* secondary on cream */

  /* ---------- COLOR — brand accents ---------- */
  --gold:        #D4AF37;   /* primary accent, rich warm gold */
  --gold-soft:   #E6C866;   /* hover / bright gold */
  --gold-muted:  #8F7A3A;   /* borders, hover edges */
  --gold-dim:    #4A3F1F;   /* low-weight gold surfaces */
  --gold-glow:   rgba(212, 175, 55, 0.08);  /* radial glow */

  /* CTA green (seen on marketing page "Reserve my seat") */
  --green:       #1F6B4F;
  --green-hover: #25805E;

  /* ---------- COLOR — lines ---------- */
  --border-1:    #2A2520;   /* subtle warm-dark divider */
  --border-2:    #3A342C;   /* slightly stronger */
  --border-gold: var(--gold-muted);
  --border-paper:#D8CFB5;   /* hairline on cream sections */

  /* ---------- COLOR — semantic ---------- */
  --success:  #4C9A78;
  --warning:  var(--gold);
  --danger:   #C06C5A;
  --info:     #8FB4C4;

  /* ---------- TYPE — families ---------- */
  --font-display: 'Fraunces', 'Cormorant Garamond', 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE — scale (editorial, spacious) ---------- */
  --t-eyebrow-size:   11px;
  --t-eyebrow-tracking: 0.22em;

  --t-display-1:  clamp(56px, 8vw, 88px);  /* hero */
  --t-display-2:  clamp(44px, 5.5vw, 68px);/* section headings */
  --t-display-3:  clamp(32px, 4vw, 48px);  /* sub-sections */

  --t-h1:  40px;
  --t-h2:  32px;
  --t-h3:  24px;
  --t-h4:  20px;

  --t-body-lg: 18px;
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-caption: 12px;

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* ---------- SPACING ---------- */
  --sp-0:  0;
  --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;

  /* ---------- RADII ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;   /* max per brief; never sharp */
  --r-pill: 999px;

  /* ---------- SHADOWS (subtle only) ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-gold: 0 0 0 1px var(--gold-muted), 0 10px 40px rgba(212,175,55,0.08);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-in:   cubic-bezier(.55,.06,.68,.19);
  --ease-std:  cubic-bezier(.4,0,.2,1);
  --dur-fast:  140ms;
  --dur-med:   240ms;
  --dur-slow:  480ms;
}

/* ============================================================
   Base + semantic type
   ============================================================ */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11";
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; }
h4 { font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.01em; }

.display-1 { font-size: var(--t-display-1); line-height: var(--lh-tight); }
.display-2 { font-size: var(--t-display-2); line-height: var(--lh-tight); }
.display-3 { font-size: var(--t-display-3); line-height: var(--lh-snug); }

.italic-gold {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

p {
  margin: 0;
  color: var(--fg-1);
  line-height: var(--lh-normal);
}
.p-lead { font-size: var(--t-body-lg); color: var(--fg-1); line-height: var(--lh-loose); }
.p-muted { color: var(--fg-2); }
.p-small { font-size: var(--t-body-sm); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--gold);
}

.label-sm {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
}

hr, .hairline {
  border: 0;
  height: 1px;
  background: var(--border-1);
  margin: var(--sp-6) 0;
}
.hairline-gold {
  border: 0;
  height: 1px;
  background: var(--gold-muted);
  opacity: 0.7;
}

a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-muted); }

::selection { background: var(--gold); color: var(--bg-0); }