/* ============================================================
   APOLLO BEAMS. Colors & Type
   Brand Overview v1.4 (2025), PDF-verified.
   Canonical Sunbeam Core yellow: #F8FF2C
   ============================================================ */

/* JetBrains Mono still loaded from Google (no licensed version uploaded) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Brand fonts (local .ttf) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Absolute ---------- */
  --apollo-black:           #000000;
  --apollo-function-black:  #1A1A1A;
  --apollo-white:           #FFFFFF;

  /* ---------- Sunbeam (core brand) ---------- */
  --apollo-sunbeam-core:    #F8FF2C;
  --apollo-sunbeam-medium:  #FCFFA8;
  --apollo-sunbeam-light:   #FEFFD9;

  /* ---------- Sand (neutrals) ---------- */
  --apollo-sand-100: #F3F0EE;
  --apollo-sand-200: #EDEBE8;
  --apollo-sand-300: #E5E3E1;
  --apollo-sand-400: #CCC9C6;
  --apollo-sand-500: #94918E;
  --apollo-sand-600: #736F6C;
  --apollo-sand-700: #47423D;
  --apollo-sand-800: #1A1A1A;

  /* ---------- Iris (secondary) ---------- */
  --apollo-iris-100: #F5F0FF;
  --apollo-iris-200: #C1B7FF;
  --apollo-iris-300: #9C73FF;
  --apollo-iris-400: #3F3653;

  /* ---------- Mist (accent) ---------- */
  --apollo-mist-100: #FFF0FE;
  --apollo-mist-200: #FFBDF5;
  --apollo-mist-300: #FF8077;
  --apollo-mist-400: #572E2C;

  /* ---------- Ocean (accent) ---------- */
  --apollo-ocean-100: #E9F2FF;
  --apollo-ocean-200: #C5DDFF;
  --apollo-ocean-300: #3A6783;
  --apollo-ocean-400: #243031;

  /* ---------- Semantic (status) ---------- */
  --apollo-success:        #22C55E;
  --apollo-success-deep:   #166534;
  --apollo-warning:        #F59E0B;
  --apollo-warning-deep:   #78350F;
  --apollo-danger:         #EF4444;
  --apollo-danger-deep:    #7F1D1D;

  /* ---------- Semantic (role-based) ---------- */
  --fg-1: var(--apollo-function-black);   /* primary text */
  --fg-2: var(--apollo-sand-700);         /* secondary text */
  --fg-3: var(--apollo-sand-600);         /* tertiary / meta */
  --fg-4: var(--apollo-sand-500);         /* disabled / hint */
  --fg-on-dark: var(--apollo-white);
  --fg-accent: var(--apollo-function-black); /* on yellow */

  --bg-1: var(--apollo-white);            /* primary surface */
  --bg-2: var(--apollo-sand-100);         /* card / subtle */
  --bg-3: var(--apollo-sand-200);         /* sunken */
  --bg-dark: var(--apollo-function-black);
  --bg-accent: var(--apollo-sunbeam-core);
  --bg-accent-soft: var(--apollo-sunbeam-light);

  --border-1: var(--apollo-sand-300);
  --border-2: var(--apollo-sand-400);
  --border-accent: var(--apollo-sunbeam-core);

  /* ---------- Type families ---------- */
  /* Canonical: Founders Grotesk / ABC Diatype / Tiempos Text.
     Licensed; substituted here with nearest Google Fonts matches. */
  --font-hero:     'Space Grotesk', 'SF Pro Display', system-ui, sans-serif;
  --font-function: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-longform: 'Source Serif 4', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---------- Type scale (brand: 12/14/16/20/24/32/48) ---------- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-48: 48px;

  /* ---------- Line heights ---------- */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --lh-long:  1.75;

  /* ---------- Radius ---------- */
  --radius-card:      8px;   /* cards, buttons */
  --radius-container: 12px;  /* large panels */
  --radius-pill:      24px;  /* pills, chips */

  /* ---------- Elevation / shadow ---------- */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.10);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.14);
  --shadow-glow: 0 0 24px rgba(248, 255, 44, 0.45);

  /* ---------- Spacing scale (4px base) ---------- */
  --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;

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC TYPE RECIPES
   Use on raw elements OR as utility classes .h1, .eyebrow, etc.
   ============================================================ */

html, body {
  font-family: var(--font-function);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-hero);
  font-size: var(--fs-48);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-hero);
  font-size: var(--fs-32);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-hero);
  font-size: var(--fs-24);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-function);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-function);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}

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

.lead {
  font-family: var(--font-function);
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.longform {
  font-family: var(--font-longform);
  font-size: var(--fs-16);
  line-height: var(--lh-long);
  color: var(--fg-1);
}

small, .meta {
  font-size: var(--fs-12);
  color: var(--fg-3);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ============================================================
   SIGNATURE PATTERNS
   ============================================================ */

/* Apollo 3px accent bottom border on headers */
.apollo-accent-border {
  border-bottom: 3px solid var(--apollo-sunbeam-core);
}

/* Sunbeam Light callout with Core left border */
.apollo-callout {
  background: var(--apollo-sunbeam-light);
  color: var(--apollo-function-black);
  border-left: 4px solid var(--apollo-sunbeam-core);
  padding: 16px 20px;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Sand KPI card */
.apollo-kpi {
  background: var(--apollo-sand-100);
  border-radius: var(--radius-card);
  padding: 16px;
}