/* ═══════════════════════════════════════════════════════════════════════════
   NeMo Design System — Colors & Typography Foundations
   Source of truth for tokens lifted from src/index.css + src/pages/home-v1/home-v1.css
   Vibe: Apple-minimalist × glassmorphism × deep-space navy × electric blue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fonts: SF Pro is the target face (Apple licensing — served only on Apple OS
   via -apple-system). Inter is the cross-platform fallback that matches SF
   Pro Text closely. To ship SF Pro on non-Apple clients, drop .woff2 files
   in /fonts and replace the @import below with @font-face rules. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── CORE PALETTE — Light-to-mid blue / Apple-bright ──────────────── */
  --nemo-hero-bg:        #0b2754;   /* hero base — mid navy, NOT deep space */
  --nemo-hero-bg-mid:    #1e5fc8;   /* hero gradient midpoint */
  --nemo-hero-bg-edge:   #041632;   /* hero vignette edge */
  --nemo-dark-bg:        #0a0f1e;   /* deepest bg — reserved for philosophy orb */
  --nemo-dark-bg-alt:    #03091a;   /* original navy base (index.css) */
  --nemo-surface-dark:   #0b1525;   /* cards on dark */
  --nemo-border-dark:    #1c2e46;

  --nemo-bg:             #fbfbfd;   /* default light canvas */
  --nemo-bg-alt:         #f5f5f7;   /* alt surface / ticker */
  --nemo-surface:        #ffffff;
  --nemo-border:         #e8e8ed;
  --nemo-border-strong:  #d2d2d7;

  /* ── TEXT ───────────────────────────────────────────────────────────── */
  --nemo-text:           #1d1d1f;   /* primary on light */
  --nemo-text-sec:       #6e6e73;
  --nemo-text-muted:     #86868b;
  --nemo-text-on-dark:   #f0f0f5;
  --nemo-text-on-dark-sec: #9ca0ad;
  --nemo-text-on-dark-muted: rgba(255,255,255,0.4);

  /* ── BRAND BLUE — signal color system ──────────────────────────────── */
  --nemo-blue:           #0071e3;   /* Apple-blue primary CTA */
  --nemo-blue-deep:      #0047bb;   /* NeMo deep navy-blue */
  --nemo-blue-link:      #2997ff;
  --nemo-cyan:           #00a3e1;   /* secondary accent */
  --nemo-cyan-light:     #64d2ff;   /* hero gradient / glow */
  --nemo-indigo:         #5e5ce6;   /* philosophy orb / gradient endstop */
  --nemo-violet:         #9d4edd;   /* electric violet — aurora third tone */
  --nemo-magenta:        #e040fb;   /* electric magenta — accent highlight */

  /* ── SEMANTIC ──────────────────────────────────────────────────────── */
  --nemo-green:          #30d158;   /* live / success */
  --nemo-green-apple:    #34c759;
  --nemo-red:            #ff3b30;   /* risk dot */
  --nemo-amber:          #ff9f0a;

  /* ── GRADIENTS ─────────────────────────────────────────────────────── */
  --nemo-grad-brand:     linear-gradient(120deg, #0047bb 0%, #00a3e1 100%);
  --nemo-grad-hero:      linear-gradient(90deg, #ffffff 0%, #64d2ff 40%, #0071e3 75%, #5e5ce6 100%);
  --nemo-grad-clarity:   linear-gradient(115deg, #fff 0%, #e6f7ff 18%, #a6e6ff 38%, #fff 55%, #cdb8ff 78%, #fff 100%);

  /* ── TYPE FAMILIES — SF Pro native on Apple, Inter fallback ───────── */
  --nemo-font-display:   -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', 'Inter', system-ui, sans-serif;
  --nemo-font-body:      -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Inter', system-ui, sans-serif;
  --nemo-font-mono:      ui-monospace, 'SF Mono', 'IBM Plex Mono', 'Fira Code', monospace;

  /* ── TYPE SCALE — fluid, Major Third ───────────────────────────────── */
  --nemo-text-xs:   clamp(0.7rem,  0.65rem + 0.25vw, 0.8rem);
  --nemo-text-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);
  --nemo-text-base: clamp(0.938rem, 0.875rem + 0.3vw, 1.063rem);
  --nemo-text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --nemo-text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.563rem);
  --nemo-text-2xl:  clamp(1.5rem,  1.25rem + 1.25vw, 2.2rem);
  --nemo-text-3xl:  clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
  --nemo-text-4xl:  clamp(2.25rem,  1.5rem + 3.75vw, 4rem);
  --nemo-text-hero: clamp(2.75rem,  1.6rem + 6.2vw, 5.6rem);

  /* ── SPACING — 4pt base, 8pt grid ─────────────────────────────────── */
  --nemo-s1: 4px;   --nemo-s2: 8px;   --nemo-s3: 12px;  --nemo-s4: 16px;
  --nemo-s5: 24px;  --nemo-s6: 32px;  --nemo-s7: 40px;  --nemo-s8: 48px;
  --nemo-s9: 64px;  --nemo-s10: 80px; --nemo-s11: 96px; --nemo-s12: 120px;
  --nemo-s13: 160px;

  /* ── RADII ─────────────────────────────────────────────────────────── */
  --nemo-radius-xs:   4px;
  --nemo-radius-sm:   8px;
  --nemo-radius-md:  14px;
  --nemo-radius-lg:  20px;
  --nemo-radius-xl:  24px;
  --nemo-radius-full: 999px;

  /* ── SHADOWS / ELEVATION ───────────────────────────────────────────── */
  --nemo-shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --nemo-shadow-sm:    0 4px 12px rgba(0,0,0,0.04);
  --nemo-shadow-md:    0 8px 30px rgba(0,0,0,0.06);
  --nemo-shadow-lg:    0 16px 48px rgba(0,0,0,0.10);
  --nemo-shadow-xl:    0 24px 64px rgba(0,0,0,0.12);
  --nemo-shadow-glow:  0 4px 20px rgba(0,113,227,0.30);
  --nemo-shadow-glow-strong: 0 8px 40px rgba(0,113,227,0.45);

  /* ── GLASS / BLUR ─────────────────────────────────────────────────── */
  --nemo-glass-light:   rgba(255,255,255,0.72);
  --nemo-glass-dark:    rgba(18,18,18,0.82);
  --nemo-glass-ultra:   rgba(255,255,255,0.06);
  --nemo-blur-nav:      saturate(180%) blur(20px);
  --nemo-blur-card:     blur(10px);

  /* ── EASINGS ─────────────────────────────────────────────────────── */
  --nemo-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --nemo-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --nemo-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --nemo-ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 0);
  --nemo-ease-back:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── DURATIONS ───────────────────────────────────────────────────── */
  --nemo-dur-fast:    150ms;
  --nemo-dur-normal:  300ms;
  --nemo-dur-slow:    500ms;
  --nemo-dur-slower:  800ms;
  --nemo-dur-slowest: 1200ms;

  /* ── LAYOUT ──────────────────────────────────────────────────────── */
  --nemo-max-w: 1080px;
  --nemo-max-w-wide: 1180px;
  --nemo-max-w-nav: 1280px;

  /* ── SEMANTIC ROLES — ready to wire into components ──────────────── */
  --fg-1:    var(--nemo-text);
  --fg-2:    var(--nemo-text-sec);
  --fg-3:    var(--nemo-text-muted);
  --bg-1:    var(--nemo-bg);
  --bg-2:    var(--nemo-bg-alt);
  --bg-3:    var(--nemo-surface);
  --accent:  var(--nemo-blue);
  --accent-2:var(--nemo-cyan);
  --divider: var(--nemo-border);
}

/* ══════════════════════════════════════════════════════════════════════
   SEMANTIC TEXT STYLES
   Use these as element defaults or via utility class (.nemo-h1 etc)
   ══════════════════════════════════════════════════════════════════════ */

.nemo-hero, h1.nemo-hero {
  font-family: var(--nemo-font-display);
  font-size: var(--nemo-text-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}

.nemo-h1, h1 {
  font-family: var(--nemo-font-display);
  font-size: var(--nemo-text-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--fg-1);
}

.nemo-h2, h2 {
  font-family: var(--nemo-font-display);
  font-size: var(--nemo-text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-1);
}

.nemo-h3, h3 {
  font-family: var(--nemo-font-display);
  font-size: var(--nemo-text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fg-1);
}

.nemo-h4, h4 {
  font-family: var(--nemo-font-display);
  font-size: var(--nemo-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--fg-1);
}

.nemo-body, p {
  font-family: var(--nemo-font-body);
  font-size: var(--nemo-text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
}

.nemo-lead {
  font-family: var(--nemo-font-body);
  font-size: var(--nemo-text-lg);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 64ch;
}

.nemo-small, small {
  font-size: var(--nemo-text-sm);
  color: var(--fg-2);
  line-height: 1.5;
}

.nemo-eyebrow {
  font-family: var(--nemo-font-display);
  font-size: var(--nemo-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
}

.nemo-mono, code, kbd, pre {
  font-family: var(--nemo-font-mono);
  font-size: 0.92em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nemo-gradient-text {
  background: var(--nemo-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nemo-gradient-hero {
  background: var(--nemo-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}