/* ==========================================================================
   Voix Digital — Colors & Typography
   Source of truth for all brand-aligned design.
   Values come directly from the Voix Brand Book.
   ========================================================================== */

/* Poppins is the heading + wordmark face — shipped from local /fonts.
   Helvetica is the body face per brand book — also shipped locally. */
@font-face { font-family: 'Helvetica'; src: url('fonts/Helvetica-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica'; src: url('fonts/Helvetica.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica'; src: url('fonts/Helvetica-Oblique.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Helvetica'; src: url('fonts/Helvetica-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica'; src: url('fonts/Helvetica-BoldOblique.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Helvetica Compressed'; src: url('fonts/Helvetica-Compressed.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Helvetica Rounded'; src: url('fonts/Helvetica-RoundedBold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }


:root {
  /* ---------- Brand colors (named per brand book) ---------- */
  --voix-coral-yellow: #FFD736;   /* Primary accent — energy, excitement */
  --voix-atomic-black: #0F0F0F;   /* The brand black — wordmark, dark surfaces, full bleeds */
  --voix-pure-white:   #FFFFFF;   /* Pure white */
  --voix-delta-drizzle: #D1D3D4;  /* Cool neutral grey */

  /* ---------- Gradient stops (derived from brand "Excitement" element) --- */
  /* Brand book pairs the yellow with the dark for energy gradients.        */
  --voix-grad-dawn:     linear-gradient(180deg, #FFD736 0%, #FFFFFF 100%);
  --voix-grad-noir:     radial-gradient(circle at 30% 20%, #2A2A2A 0%, #0F0F0F 70%);
  --voix-grad-foggy:    linear-gradient(135deg, rgba(255,215,54,0.55) 0%, rgba(15,15,15,0.85) 100%);

  /* ---------- Semantic foreground / background ----------- */
  --fg-1: var(--voix-atomic-black);
  --fg-2: #2B2B2B;                 /* secondary text */
  --fg-3: #6B6B6B;                 /* muted / captions */
  --fg-on-dark: var(--voix-pure-white);
  --fg-on-yellow: var(--voix-atomic-black);

  --bg-1: var(--voix-pure-white);
  --bg-2: #F6F6F6;                 /* subtle off-white */
  --bg-3: var(--voix-delta-drizzle);
  --bg-dark: var(--voix-atomic-black);
  --bg-accent: var(--voix-coral-yellow);

  --border-1: #E6E6E6;
  --border-2: var(--voix-delta-drizzle);
  --border-strong: var(--voix-atomic-black);

  /* ---------- Type families ----------- */
  --font-display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (modular, 1.25 ratio, 16px base) ----------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;

  /* ---------- Weights ----------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- Line-height ----------- */
  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.4;
  --lh-loose: 1.65;

  /* ---------- Letter-spacing ----------- */
  --tracking-tightest: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.18em;     /* uppercase eyebrows */

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

  /* ---------- Radii (Voix is squared / minimal radius brand) ----------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-default: 0;

  /* ---------- Elevation ----------- */
  --shadow-1: 0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-2: 0 4px 14px rgba(15, 15, 15, 0.08);
  --shadow-3: 0 18px 48px rgba(15, 15, 15, 0.18);
  --shadow-yellow: 0 12px 36px rgba(255, 215, 54, 0.45);
  --shadow-inset: inset 0 0 0 1px rgba(15,15,15,0.08);

  /* ---------- Motion ----------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.85, 0.4);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- Layout ----------- */
  --container-max: 1280px;
  --gutter: 32px;
}

/* ==========================================================================
   Semantic element styles
   Use these helper classes to apply brand-correct typography.
   ========================================================================== */

.voix-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

.voix-h1, h1.voix {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-56), 7vw, var(--fs-128));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
}

.voix-h2, h2.voix {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-72));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.voix-h3, h3.voix {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.voix-h4, h4.voix {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.voix-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.voix-body, p.voix {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

.voix-small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.voix-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.voix-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0;
}

/* ==========================================================================
   Surface helpers
   ========================================================================== */

.voix-surface-light { background: var(--bg-1); color: var(--fg-1); }
.voix-surface-soft  { background: var(--bg-2); color: var(--fg-1); }
.voix-surface-dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
.voix-surface-yellow { background: var(--bg-accent); color: var(--fg-on-yellow); }

/* ==========================================================================
   Buttons (canonical primary / secondary / ghost)
   ========================================================================== */

.voix-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  letter-spacing: var(--tracking-tight);
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}
.voix-btn:active { transform: translateY(1px) scale(0.99); }

.voix-btn--primary {
  background: var(--voix-coral-yellow);
  color: var(--voix-atomic-black);
  border-color: var(--voix-coral-yellow);
}
.voix-btn--primary:hover {
  background: var(--voix-atomic-black);
  color: var(--voix-coral-yellow);
  border-color: var(--voix-atomic-black);
}

.voix-btn--dark {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
  border-color: var(--voix-atomic-black);
}
.voix-btn--dark:hover {
  background: var(--voix-coral-yellow);
  color: var(--voix-atomic-black);
  border-color: var(--voix-coral-yellow);
}

.voix-btn--ghost {
  background: transparent;
  color: var(--voix-atomic-black);
  border-color: var(--voix-atomic-black);
}
.voix-btn--ghost:hover {
  background: var(--voix-atomic-black);
  color: var(--voix-pure-white);
}

.voix-btn--ghost-light {
  background: transparent;
  color: var(--voix-pure-white);
  border-color: var(--voix-pure-white);
}
.voix-btn--ghost-light:hover {
  background: var(--voix-pure-white);
  color: var(--voix-atomic-black);
}