/* Quantlight Design System — colors, type, spacing, radii, shadows, motion
   Import this file at the top of any preview, slide or UI-kit page.
   Hanken Grotesk + Instrument Serif are loaded from Google Fonts. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Frutiger (brand-licensed) ── */
@font-face {
  font-family: 'Frutiger';
  src: url('fonts/FrutigerLTPro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger';
  src: url('fonts/FrutigerNeueLTPro-LightIt.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Frutiger';
  src: url('fonts/FrutigerLTPro-Roman.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger';
  src: url('fonts/FrutigerLTPro-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger';
  src: url('fonts/FrutigerLTPro-UltraBlack.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger Condensed';
  src: url('fonts/FrutigerLTStd-LightCn.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger Condensed';
  src: url('fonts/FrutigerLTStd-Cn.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Frutiger Condensed';
  src: url('fonts/FrutigerLTStd-ExtraBlackCn.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Anthracite scale ── (the night) */
  --ink-1000: #0E0F10;   /* page background, deepest */
  --ink-900:  #15171A;
  --ink-800:  #1C1D1F;   /* default dark surface */
  --ink-700:  #2A2B2D;
  --ink-600:  #3A3B3E;
  --ink-500:  #46474A;
  --ink-400:  #6A6A6D;
  --ink-300:  #787776;   /* secondary text on dark */
  --ink-200:  #A8A6A1;
  --ink-100:  #D6D2C8;

  /* ── Bone / linen scale ── (the day) */
  --bone-50:  #FBF8F1;
  --bone-100: #F5EFE2;   /* default light surface */
  --bone-200: #EDE5D2;
  --bone-300: #E2D7BC;
  --bone-400: #C9BFA3;

  /* ── Gold scale ── (the sun) */
  --gold-50:  #FFFAD2;   /* sunrise highlight */
  --gold-100: #F2DC8E;
  --gold-200: #E6C65B;
  --gold-300: #DEB400;   /* deep brand gold */
  --gold-400: #FCCB00;   /* signal gold */
  --gold-500: #C9961A;
  --gold-600: #8A6510;
  --gold-700: #5C3F00;   /* deepest amber */

  /* ── Semantic ── */
  --bg:           var(--ink-1000);
  --bg-elevated:  var(--ink-800);
  --bg-inverse:   var(--bone-100);
  --fg:           var(--bone-100);
  --fg-muted:     var(--ink-200);
  --fg-subtle:    var(--ink-300);
  --fg-on-light:  var(--ink-1000);
  --fg-on-light-muted: var(--ink-500);
  --accent:       var(--gold-400);
  --accent-deep:  var(--gold-300);
  --border:       rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --border-on-light: rgba(14,15,16,0.10);
  --border-on-light-strong: rgba(14,15,16,0.20);

  /* ── Signature gradients ── */
  --gradient-sun: linear-gradient(135deg, #FCCB00 0%, #F2DC8E 28%, #DEB400 53%, #E6C65B 73%, #FFFAD2 100%);
  --gradient-sun-radial: radial-gradient(ellipse 100% 80% at 50% 120%, #FCCB00 0%, #DEB400 18%, #2A2B2D 55%, #0E0F10 100%);
  --gradient-protection: linear-gradient(180deg, transparent 0%, var(--ink-1000) 100%);

  /* ── Type families ── */
  --font-sans: 'Frutiger', 'Frutiger LT Std', 'Helvetica Neue', system-ui, sans-serif;
  --font-condensed: 'Frutiger Condensed', 'Frutiger', 'Helvetica Neue', sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale ── */
  --fs-eyebrow: 12px;
  --fs-caption: 13px;
  --fs-body-sm: 14px;
  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-lead:    20px;
  --fs-h6:      18px;
  --fs-h5:      22px;
  --fs-h4:      28px;
  --fs-h3:      36px;
  --fs-h2:      52px;
  --fs-h1:      72px;
  --fs-display: 112px;

  /* ── Spacing (4 px base) ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ── Radii ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.30);
  --shadow-3: 0 20px 40px -12px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 80px -10px rgba(252,203,0,0.35);
  --shadow-glow-strong: 0 0 120px -10px rgba(252,203,0,0.55);

  /* ── Motion ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur:      320ms;
  --dur-slow: 600ms;
  --dur-amb:  1800ms;

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

/* ── Resets & base ── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic typography classes ── */
.q-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.q-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.q-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.q-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.q-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.q-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.q-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.q-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg-muted);
}
.q-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.q-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}
.q-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
}
.q-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.q-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

/* Light / dark surface utilities */
.q-surface-dark { background: var(--ink-1000); color: var(--bone-100); }
.q-surface-bone { background: var(--bone-100); color: var(--ink-1000); }
.q-surface-elevated { background: var(--ink-800); color: var(--bone-100); }

/* The signature gold gradient text */
.q-gold-text {
  background: var(--gradient-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}