/* =========================================================================
   12X Space Design System — colors_and_type.css
   v1.0 · The elevated "Institutional Observatory" direction
   ========================================================================= */

/* ---------- Webfonts (Google Fonts) ------------------------------------- */
/* If installing locally, drop woff2 files into /fonts and swap the @import. */
/* Local self-hosted webfonts — see /fonts/ for WOFF2 files. */

/* Webfonts via Google Fonts (staging) — swap to self-hosted WOFF2 in production */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =====================================================================
     COLOR — PRIMITIVES
     Extends the existing 12xspace.com tokens with a more disciplined,
     institutional-grade palette. Old tokens kept as `legacy-*` for ref.
     ===================================================================== */

  /* Ink — anchored to LP-facing transaction navy #0B1F3A for consistency
     across signed deliverables, the website, and the design system. */
  --ink-900: #05101F;   /* deepest — hero bg, book covers */
  --ink-800: #0B1F3A;   /* PRIMARY brand navy (matches signed PDFs) */
  --ink-700: #13294D;   /* card surface on dark */
  --ink-600: #1C3562;   /* elevated surface / hover */
  --ink-500: #294478;   /* border on dark */
  --ink-400: #3A558C;   /* strong border / muted accent */

  /* Signal (refined brand blue — cleaner than #2474f5) */
  --signal-50:  #EEF4FF;
  --signal-100: #D5E3FF;
  --signal-200: #A9C5FF;
  --signal-300: #7BA5FF;
  --signal-400: #4E82FB;
  --signal-500: #2B61EA;   /* primary CTA */
  --signal-600: #1D4ACF;   /* press state */
  --signal-700: #1839A3;
  --signal-800: #172E7A;
  --signal-900: #101E4F;

  /* Plume (Raptor-engine orange — SECONDARY, differentiator) */
  /* Use sparingly: alerts, hot data, breaking updates, accent underlines.
     Never in body copy. Pairs with Signal blue for complementary tension. */
  --plume-50:  #FFF3EC;
  --plume-100: #FFE0CF;
  --plume-200: #FFB98E;
  --plume-300: #FF9149;
  --plume-400: #FF6B1A;   /* accent */
  --plume-500: #E5510B;
  --plume-600: #B93D05;

  /* Silver (from the logo — brushed-metal neutral) */
  --silver-50:  #F6F7F9;
  --silver-100: #EAEDF2;
  --silver-200: #D5DAE3;
  --silver-300: #B8BFCC;
  --silver-400: #8E97A8;
  --silver-500: #6A7386;
  --silver-600: #4C5469;
  --silver-700: #353C4F;

  /* Semantic */
  --success-500: #10B981;
  --warning-500: #F5A524;
  --danger-500:  #DC2626;

  /* LP-facing navy — exact match to signed transaction PDFs */
  --navy-lp: #0B1F3A;

  /* Editorial white (LP report) surface tokens
     Use for printed / long-form reports read on iPads + laser printers. */
  --paper:        #FBF8F2;   /* cream page bg */
  --paper-2:      #F4F0E6;   /* subtle section band */
  --paper-rule:   #E3DCC9;   /* warm hairline */
  --paper-ink:    #0B1F3A;   /* ink-navy on paper */
  --paper-ink-2:  #243653;
  --paper-ink-3:  #5A6982;
  --paper-mute:   #8A8574;

  /* Legacy */
  --legacy-dark: #0c1222;
  --legacy-cta:  #2474f5;
  --legacy-cyan: #22d3ee;

  /* =====================================================================
     COLOR — SEMANTIC (light mode)
     ===================================================================== */
  --bg-page:       var(--silver-50);
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  var(--silver-100);
  --bg-inverse:    var(--ink-900);

  --fg-1:          var(--ink-900);         /* primary text */
  --fg-2:          var(--ink-700);         /* body */
  --fg-3:          var(--silver-600);      /* secondary */
  --fg-4:          var(--silver-500);      /* tertiary / captions */
  --fg-muted:      var(--silver-400);      /* placeholder */
  --fg-on-ink:     #FFFFFF;                /* text on dark */

  --brand:         var(--signal-500);
  --brand-hover:   var(--signal-600);
  --accent:        var(--plume-400);

  --border-1:      rgba(10, 14, 26, 0.08);   /* hairline */
  --border-2:      rgba(10, 14, 26, 0.14);   /* standard */
  --border-strong: rgba(10, 14, 26, 0.22);
  --border-on-ink: rgba(255, 255, 255, 0.10);
  --border-on-ink-strong: rgba(255, 255, 255, 0.18);

  /* =====================================================================
     TYPOGRAPHY
     Serif display = editorial gravitas (what institutional investors expect)
     Sans UI      = clean, legible, high-contrast
     Mono         = tabular numbers, data, tickers, mission control energy
     ===================================================================== */

  --font-display: "Newsreader", "GT Sectra", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-serif:   "Source Serif 4", "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif; /* LP long-form body */
  --font-sans:    "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale — 1.200 "Minor Third" for editorial cadence */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.375rem;   /* 22 */
  --fs-xl:   1.75rem;    /* 28 */
  --fs-2xl:  2.25rem;    /* 36 */
  --fs-3xl:  3rem;       /* 48 */
  --fs-4xl:  4rem;       /* 64 */
  --fs-5xl:  5.25rem;    /* 84 — hero */
  --fs-6xl:  7rem;       /* 112 — cover */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-reading: 1.7;

  /* Letter spacing */
  --ls-tight:    -0.02em;   /* display */
  --ls-snug:     -0.01em;   /* h2 */
  --ls-normal:    0;
  --ls-wide:     0.06em;    /* eyebrow */
  --ls-wider:    0.14em;    /* allcaps label */

  /* =====================================================================
     SPACING · RADIUS · SHADOW · MOTION
     ===================================================================== */
  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows — restrained. Institutional, not SaaS. */
  --shadow-1: 0 1px 2px rgba(10, 14, 26, 0.06);
  --shadow-2: 0 2px 6px rgba(10, 14, 26, 0.08), 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-3: 0 10px 30px rgba(10, 14, 26, 0.10), 0 2px 6px rgba(10, 14, 26, 0.06);
  --shadow-4: 0 24px 60px rgba(10, 14, 26, 0.14), 0 4px 12px rgba(10, 14, 26, 0.08);
  --shadow-glow-signal: 0 0 0 1px rgba(43, 97, 234, 0.30), 0 8px 32px rgba(43, 97, 234, 0.22);
  --shadow-glow-plume:  0 0 0 1px rgba(255, 107, 26, 0.35), 0 8px 32px rgba(255, 107, 26, 0.20);
  --inner-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Motion — calm, confident, Swiss. No bouncy overshoot. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* Gradients — restrained. Two allowed. */
  --grad-ascent: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 60%, var(--signal-900) 100%);
  --grad-plume:  linear-gradient(135deg, var(--plume-400) 0%, var(--signal-500) 100%);

  /* Grid paper (used as subtle bg on dark surfaces) */
  --grid-line: rgba(255, 255, 255, 0.035);
}

/* ---------- DARK MODE semantic overrides -------------------------------- */
[data-theme="dark"],
.dark {
  --bg-page:       var(--ink-900);
  --bg-surface:    var(--ink-800);
  --bg-surface-2:  var(--ink-700);
  --bg-inverse:    var(--silver-50);

  --fg-1:          #F6F7F9;
  --fg-2:          #D5DAE3;
  --fg-3:          #8E97A8;
  --fg-4:          #6A7386;
  --fg-muted:      #4C5469;
  --fg-on-ink:     var(--ink-900);

  --border-1:      rgba(255, 255, 255, 0.06);
  --border-2:      rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
   BASE — sensible defaults for any HTML that imports this file
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11"; /* Outfit alt forms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   Use these for consistency across every surface.
   ========================================================================= */

/* Eyebrow — label above a headline (allcaps, tracking, thin) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow--signal { color: var(--signal-500); }
.eyebrow--plume  { color: var(--plume-400); }

/* Display — hero + section openers. SERIF. */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, var(--fs-6xl));
  line-height: 0.98;
  letter-spacing: var(--ls-tight);
  font-weight: 500;
  font-style: normal;
}
.display-2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, var(--fs-5xl));
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}

/* Headings */
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 500;
  margin: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 600;
  margin: 0;
}
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0;
}

/* Body */
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-reading);
  font-weight: 400;
  color: var(--fg-2);
}
.body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-reading);
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-4);
  letter-spacing: 0.01em;
}

/* Editorial pull-quote */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}

/* Mono — data, numbers, tickers */
.mono, .ticker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0;
}
.ticker {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Metric — huge tabular numbers for trackers */
.metric {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  font-feature-settings: "tnum", "lnum";
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}
.metric-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Links */
a { color: var(--signal-500); text-decoration: none; }
a:hover { color: var(--signal-600); }
.link-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

/* Tabular defaults for any number-heavy element */
table, .tabular { font-variant-numeric: tabular-nums; }

/* Utility */
.no-wrap { white-space: nowrap; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }