/* ============================================================
   JETPACKS DESIGN SYSTEM — Colors & Type
   ============================================================
   Cool cosmic palette. Space-grade technology, human purpose.
   Green is reserved for INTERACTIVE elements only.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Brand display + body: Roc Grotesk (uploaded as .otf) */
@font-face {
  font-family: 'Roc Grotesk';
  src: url('fonts/RocGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk';
  src: url('fonts/RocGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk';
  src: url('fonts/RocGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk';
  src: url('fonts/RocGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk';
  src: url('fonts/RocGrotesk-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Wide cut — for display / hero headlines */
@font-face {
  font-family: 'Roc Grotesk Wide';
  src: url('fonts/RocGrotesk-Wide.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk Wide';
  src: url('fonts/RocGrotesk-WideBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk Wide';
  src: url('fonts/RocGrotesk-WideExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk Wide';
  src: url('fonts/RocGrotesk-WideBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Extra wide — for the biggest hero moments */
@font-face {
  font-family: 'Roc Grotesk Extra Wide';
  src: url('fonts/RocGrotesk-ExtraWideBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk Extra Wide';
  src: url('fonts/RocGrotesk-ExtraWideBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Body: Roboto. Subtext / labels / data: Roboto Mono. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* --- Brand core --- */
  --jp-blue-primary:   #1a30b7; /* brand anchor */
  --jp-blue-secondary: #112088; /* depth layer, hover-darken */
  --jp-blue-tertiary:  #0c1038; /* dark backgrounds, hero */
  --jp-purple:         #9a54ff; /* cosmic accent */
  --jp-green:          #30d67b; /* INTERACTIVE ONLY */
  --jp-green-hover:    #28b86a;

  /* --- Surfaces --- */
  --jp-off-white:      #f3f5ea;
  --jp-white:          #ffffff;
  --jp-black:          #000000;

  /* --- Greys --- */
  --jp-grey-text:      #444859;
  --jp-grey-border:    #cfcfcf;
  --jp-grey-subtle:    #bfbfbf;

  /* --- Surfaces (no pure white — brand is cream-on-dark dominant) --- */
  --bg-light:          var(--jp-off-white);   /* page light = cream */
  --bg-dark:           var(--jp-blue-tertiary);
  --bg-card:           var(--jp-off-white);   /* card light = same cream as page */
  --bg-card-alt:       #ebede0;               /* card light alt = slightly darker cream */
  --bg-card-dark:      #141a48;               /* card dark = one notch above bg-dark */
  --bg-card-dark-alt:  #1c2358;

  /* --- Semantic text --- */
  --fg-on-light:       #0c1038;          /* primary text on light */
  --fg-on-light-2:     var(--jp-grey-text);
  --fg-on-light-3:     #6a6e7d;          /* tertiary, captions */
  --fg-on-dark:        var(--jp-off-white);
  --fg-on-dark-2:      #a8acc4;
  --fg-on-dark-3:      #6a6e8a;

  /* --- Interactive --- */
  --link:              var(--jp-green);
  --link-hover:        var(--jp-green-hover);
  --focus-ring:        color-mix(in oklab, var(--jp-green) 60%, transparent);

  /* --- Borders / dividers (no white) --- */
  --border-light:      #d8dac8;          /* on cream */
  --border-light-soft: #e3e4d8;
  --border-dark:       rgba(243,245,234,0.10);
  --border-dark-soft:  rgba(243,245,234,0.06);
  --divider:           var(--jp-grey-border);

  /* --- Elevation (subtle — brand is calm) --- */
  --shadow-1:          0 1px 2px rgba(12,16,56,0.06), 0 1px 1px rgba(12,16,56,0.04);
  --shadow-2:          0 4px 14px rgba(12,16,56,0.08), 0 2px 4px rgba(12,16,56,0.04);
  --shadow-3:          0 18px 48px rgba(12,16,56,0.14), 0 4px 12px rgba(12,16,56,0.06);
  --shadow-dark-1:     0 1px 2px rgba(0,0,0,0.35);
  --shadow-dark-2:     0 8px 28px rgba(0,0,0,0.45);

  /* --- Radii --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

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

  /* --- Type families ---
     Titles  → Roc Grotesk (Wide / Extra Wide for the biggest moments)
     Body    → Roboto (readable, sets the page rhythm)
     Subtext → Roboto Mono (labels, metadata, captions, data callouts)         */
  --font-display:   'Roc Grotesk Wide', 'Roc Grotesk', 'Roboto', system-ui, sans-serif;
  --font-display-x: 'Roc Grotesk Extra Wide', 'Roc Grotesk Wide', 'Roboto', system-ui, sans-serif;
  --font-title:     'Roc Grotesk', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-sans:      'Roc Grotesk', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type ramp (rem-friendly px values for clarity) ---
     Canonical heading/body scale, used site-wide (v2.css, styles.css,
     entry-v2.jsx, v2-inner-pages.jsx). Three named variants exist for
     recurring contexts that are genuinely a different size than the
     default at that level — pick the closest role, don't invent a new
     one-off value.
       --t-h1        page hero title (all inner-page heroes)
       --t-h2        major section heading (the default "section title")
       --t-h2-lg     large CTA / closing-banner heading
       --t-h2-narrow narrative subheading in a narrow reading column
       --t-h3        card / subsection title
       --t-h4        compact card/list title
       --t-lead      editorial lead paragraph / pull-quote
       --t-body      primary paragraph
       --t-body-sm   secondary / dense paragraph                        */
  --t-display:     clamp(56px, 8vw, 120px);
  --t-h1:          clamp(40px, 5.5vw, 84px);
  --t-h2:          clamp(32px, 3.8vw, 60px);
  --t-h2-lg:       clamp(32px, 4vw, 72px);
  --t-h2-narrow:   clamp(24px, 2.8vw, 40px);
  --t-h3:          clamp(20px, 2vw, 28px);
  --t-h4:          18px;
  --t-lead:        clamp(18px, 1.8vw, 26px);
  --t-body:        17px;
  --t-body-sm:     15px;
  --t-label:       12px;     /* uppercase mono */
  --t-data-lg:     88px;     /* proof metric */
  --t-data-md:     56px;

  /* --- Easing & motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.jp-body {
  font-family: var(--font-sans);
  color: var(--fg-on-light);
  background: var(--bg-light);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.jp-dark { background: var(--bg-dark); color: var(--fg-on-dark); }

.jp-display {
  font-family: var(--font-display-x);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: none;
}
.jp-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: 1.0;
  letter-spacing: -0.015em;
}
.jp-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.jp-h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.jp-h4 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
}
.jp-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  max-width: 68ch;
  text-wrap: pretty;
}
.jp-small {
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--fg-on-light-2);
}
.jp-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-light-3);
}
.jp-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-data-lg);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.jp-data--md { font-size: var(--t-data-md); }
.jp-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
}
.jp-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--link) 40%, transparent);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.jp-link:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }