/* ==========================================================================
   Uselist — Colors & Type tokens
   Navy × cream × gold. Premium minimalism, Scandinavian restraint.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Geist:wght@400;500;600;700;800;900&display=swap');

:root {
  /* =====  CORE PALETTE  ===== */
  --navy-900:       #050714;   /* Deep navy — primary bg */
  --navy-800:       #0a0f24;   /* Between 900/700 — hero overlays */
  --navy-700:       #0f1433;   /* Secondary navy — cards, elevated */
  --navy-600:       #1a2150;   /* Borders on dark, dividers */

  --cream-50:       #fbf4da;   /* Cream tint */
  --cream-100:      #f8e7b0;   /* Soft cream — primary text on navy, wordmark */
  --cream-200:      #e8d28b;   /* Cream secondary */

  --gold-500:       #d4af37;   /* Primary accent — gem, CTAs */
  --gold-600:       #b89120;   /* Gold pressed */
  --gold-400:       #e4c65e;   /* Gold hover (slightly lifted) */

  --bronze-600:     #a67c2e;   /* Bronze support — muted/borders/hover */
  --bronze-500:     #c08f36;

  /* NEUTRAL GRAY — added to brief palette so hierarchy survives on light surfaces */
  --gray-50:        #f7f6f2;   /* Off-white (paired with cream, not pure white) */
  --gray-100:       #eeece4;
  --gray-200:       #d9d6cc;
  --gray-400:       #8a867a;
  --gray-600:       #5b584f;
  --gray-800:       #2a2925;

  /* =====  SEMANTIC (dark-first — product is dark-mode primary) ===== */
  --bg:             var(--navy-900);
  --bg-elev-1:      var(--navy-700);   /* cards */
  --bg-elev-2:      #141a3d;           /* elevated dialogs */
  --bg-muted:       rgba(248,231,176,0.04);

  --fg:             var(--cream-100);
  --fg-muted:       rgba(248,231,176,0.62);
  --fg-subtle:      rgba(248,231,176,0.40);

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-400);
  --accent-pressed: var(--gold-600);
  --accent-fg:      var(--navy-900);   /* text on gold */

  --support:        var(--bronze-600);

  --border:         rgba(248,231,176,0.12);
  --border-strong:  rgba(248,231,176,0.20);
  --border-gold:    rgba(212,175,55,0.32);

  /* Status */
  --success:        #2fb66a;
  --warning:        #e8b33a;
  --danger:         #e56b6b;
  --info:           #6ea8d8;

  /* =====  TYPE SCALE  ===== */
  --font-display:   'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:        12px;
  --text-sm:        14px;
  --text-base:      16px;
  --text-md:        17px;
  --text-lg:        18px;
  --text-xl:        22px;
  --text-2xl:       28px;
  --text-3xl:       36px;
  --text-4xl:       48px;
  --text-5xl:       64px;
  --text-6xl:       86px;

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.18em;  /* the eyebrow label */

  /* =====  SPACING / RADII / SHADOWS  ===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg:   0 18px 50px rgba(0,0,0,0.55);
  --shadow-gold: 0 10px 32px rgba(212,175,55,0.22);

  --transition: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====  SEMANTIC ELEMENT STYLES  ===== */

.h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, var(--text-6xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, var(--text-4xl));
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.p, p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.lede {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  font-weight: 400;
}
.small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.caption {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}
.code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
}

/* Gradient text (gold-washed) — for hero emphasis */
.grad-gold {
  background: linear-gradient(120deg, var(--gold-500), var(--cream-100) 60%, var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}