/* =========================================================
   Rave Away — Afterglow Refined
   Color & Type Foundations
   ========================================================= */

/* ---------- Brand fonts (uploaded — local @font-face) ---------- */
@font-face {
  font-family: 'General Sans';
  src: url('fonts/GeneralSans-Bold.otf') format('opentype');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Medium-BF64376d329a539.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Backup: Space Grotesk (display) + Inter (body) — kept in stack for weights we don't have locally */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

:root {
  /* ---------- Core palette (Afterglow Refined) ---------- */
  --onyx:           #151515;  /* primary text, rare dark sections */
  --porcelain:      #F6F4F1;  /* main background ~70% */
  --sand:           #E4DED4;  /* secondary surfaces, cards ~15-20% */
  --jade:           #18A49A;  /* primary CTA, links, highlights ~4-6% */
  --afterglow:      #6C4B63;  /* waveform motif, micro accents ~1-2% */

  /* ---------- Tonal extensions (use sparingly) ---------- */
  --onyx-90:        #2A2A2A;
  --onyx-70:        #4A4A4A;
  --onyx-50:        #7A7872;  /* secondary text on porcelain */
  --onyx-30:        #B5B1A8;  /* tertiary text, captions */
  --sand-deep:      #D6CFC1;  /* card hover, deeper section */
  --sand-soft:      #EFEBE3;  /* sand mixed toward porcelain */
  --jade-deep:      #128A82;  /* button hover */
  --jade-soft:      #E3F2F0;  /* tinted backgrounds, badges */
  --afterglow-soft: #E8DFE5;  /* very rare tinted bg (avoid large) */

  /* ---------- Semantic surface tokens ---------- */
  --bg:             var(--porcelain);
  --bg-soft:        var(--sand-soft);
  --bg-card:        var(--sand);
  --bg-contrast:    var(--onyx);
  --fg:             var(--onyx);
  --fg-muted:       var(--onyx-50);
  --fg-subtle:      var(--onyx-30);
  --fg-on-dark:     var(--porcelain);
  --fg-on-jade:     var(--porcelain);
  --accent:         var(--jade);
  --accent-hover:   var(--jade-deep);
  --signal:         var(--afterglow);

  /* ---------- Borders & dividers ---------- */
  --border-hairline: rgba(21, 21, 21, 0.08);
  --border-soft:    rgba(21, 21, 21, 0.14);
  --border-strong:  rgba(21, 21, 21, 0.24);

  /* ---------- Spacing (8px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii (subtle, never pill except micro tags) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows (very restrained — premium = restraint) ---------- */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(21,21,21,0.04), 0 8px 24px rgba(21,21,21,0.04);
  --shadow-lift:  0 2px 4px rgba(21,21,21,0.06), 0 18px 40px rgba(21,21,21,0.08);
  --shadow-modal: 0 12px 32px rgba(21,21,21,0.12), 0 32px 80px rgba(21,21,21,0.16);

  /* ---------- Typography stacks ---------- */
  --font-display: 'General Sans', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---------- Type scale (editorial, generous) ---------- */
  --fs-display:   72px;   /* hero headlines */
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-eyebrow:   13px;   /* tracked, uppercase, afterglow color */
  --fs-body-lg:   20px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;
  --fs-micro:     11px;

  --lh-display:   1.04;
  --lh-heading:   1.12;
  --lh-body:      1.55;
  --lh-tight:     1.25;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.16em;

  /* ---------- Motion (calm, breath-paced) ---------- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-emphatic: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ---------- Layout ---------- */
  --maxw-prose:   640px;
  --maxw-narrow:  880px;
  --maxw-default: 1200px;
  --maxw-wide:    1400px;
  --grid-gutter:  24px;
}

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

/* Display & headlines — General Sans, tight, near-black */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--afterglow);
}

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

.body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }
.micro   { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); }

/* Links — onyx text with jade underline */
a, .link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--jade);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
a:hover, .link:hover {
  color: var(--jade-deep);
  text-decoration-color: var(--jade-deep);
}

/* Highlight phrase — jade text or jade underline */
.highlight {
  color: var(--jade);
}

/* Selection */
::selection { background: var(--jade); color: var(--porcelain); }