/* ============================================================
   PYRAMIDE RECORD — DESIGN SYSTEM
   tokens.css · single source of truth for all design values
   ============================================================ */

:root {
  /* ---- Color: Ground (cool, from logo's blue-black) ---- */
  --obsidian:      #0D131C;   /* page background — ink navy, slightly warmer */
  --panel:         #141D28;   /* raised surfaces, bands */
  --panel-2:       #1D2A38;   /* nested surfaces */
  --panel-3:       #26374A;   /* inputs, hover fills */

  /* ---- Color: Steel Blue (primary — richer, more confident) ---- */
  --gold:          #3A78A6;   /* primary accent (var name kept for compatibility) */
  --gold-bright:   #5EA3D0;   /* hover / highlight */
  --gold-deep:     #6BAEDB;   /* eyebrows, small labels — bright, alive on dark */
  --gold-dim:      #2E5578;   /* borders, secondary lines */
  --steel-deepest: #22384D;   /* deep structural blue */

  /* ---- Color: Ember (warm bridge — the anti-sad accent) ---- */
  --ember:         #E8A552;   /* warm glow highlights, small details, hover warmth */
  --ember-deep:    #C9822F;

  /* ---- Color: Crimson (accent — richer, from Record script) ---- */
  --crimson:       #CE4436;   /* CTAs, key emphasis */
  --crimson-bright:#E45B4B;   /* hover */
  --crimson-deep:  #942A25;   /* logo-matched deep red */

  /* ---- Color: Text ---- */
  --bone:          #F0EBE1;   /* primary text — warm neutral bridges blue+red */
  --sand:          #9AA7B6;   /* secondary text (cool slate) */
  --ash:           #5E6A78;   /* muted / captions */

  /* ---- Color: Lines ---- */
  --hair:          #1E2A38;   /* default hairline */
  --hair-2:        #2A3B4F;   /* stronger divider */

  /* ---- Color: Support ---- */
  --blue:          #5EA3D0;   /* bright steel — links */

  /* ---- Semantic ---- */
  --success:       #5DCAA5;
  --whatsapp:      #25D366;
  --whatsapp-bg:   #1F4D3A;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;

  --fs-hero:   clamp(40px, 7vw, 68px);
  --fs-h1:     clamp(32px, 5vw, 46px);
  --fs-h2:     clamp(26px, 4vw, 34px);
  --fs-h3:     22px;
  --fs-lg:     18px;
  --fs-body:   16px;
  --fs-sm:     14px;
  --fs-xs:     12px;
  --fs-eyebrow:11px;

  --lh-tight:  1.05;
  --lh-snug:   1.35;
  --lh-body:   1.75;

  --ls-eyebrow: 0.24em;
  --ls-label:   0.14em;
  --ls-wide:    0.06em;

  /* ---- Spacing scale (8pt) ---- */
  --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;

  /* ---- Radius ---- */
  --r-sm: 2px;   /* buttons, chips — sharp, editorial */
  --r-md: 6px;   /* inputs */
  --r-lg: 12px;  /* cards */

  /* ---- Layout ---- */
  --maxw: 1140px;
  --gutter: 32px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* ---- Elevation (used with restraint) ---- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset;
  --focus-ring: 0 0 0 2px var(--obsidian), 0 0 0 4px var(--blue);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  background: var(--obsidian);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */
.display { font-family: var(--font-display); font-weight: 400; }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 500;
}
.h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.lede { color: var(--sand); font-size: var(--fs-lg); line-height: var(--lh-body); }
.muted { color: var(--sand); }
.ital { font-family: var(--font-display); font-style: italic; }
.gold-text { color: var(--blue); }
.crimson-text { color: var(--crimson); }

/* ---- Layout helpers ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--sp-9) 0; }
.section-sm { padding: var(--sp-7) 0; }
.divider { height: 1px; background: var(--hair); border: 0; }

@media (max-width: 820px) {
  :root { --gutter: 20px; }
  .section { padding: var(--sp-7) 0; }
}