/* ─────────────────────────────────────────────────────────────
   Day Ten Data — Design Tokens
   Dark, precise, institutional. Bloomberg meets modern SaaS.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Brand color palette ─────────────────────────────── */
  --bg:       #04080F;   /* Deep Navy — primary background          */
  --bg2:      #070D1A;   /* Dark Navy — alternate section bg        */
  --navy:     #0B1A30;   /* Navy — card/section bg                  */
  --card:     #0D2040;   /* Card Blue — elevated surfaces, inputs   */

  --blue:     #1D6FFF;   /* Primary Blue — buttons, links, brand    */
  --blue-2:   #3B8BFF;   /* Light Blue — hover, secondary accent    */
  --cyan:     #00C8FF;   /* Cyan — highlight, data indicators       */

  --text:     #EEF4FF;   /* Primary text (light)                    */
  --muted:    #7A9ABF;   /* Secondary text                          */
  --dim:      #4A6A8A;   /* Tertiary text, disclaimers              */

  /* ── Semantic surfaces ───────────────────────────────── */
  --fg-1: var(--text);
  --fg-2: var(--muted);
  --fg-3: var(--dim);

  --bg-1: var(--bg);
  --bg-2: var(--bg2);
  --bg-3: var(--navy);
  --bg-4: var(--card);

  /* Status — warm/cool live data */
  --up:       #00E5A8;   /* up tick — green-cyan, fits palette       */
  --down:     #FF5577;   /* down tick — magenta-red, not too jarring */
  --flat:     var(--muted);

  /* ── Borders & overlays ──────────────────────────────── */
  --border:        rgba(29, 111, 255, 0.18);
  --border-strong: rgba(29, 111, 255, 0.40);
  --border-soft:   rgba(29, 111, 255, 0.10);
  --hairline:      rgba(122, 154, 191, 0.12);

  --glow:          rgba(29, 111, 255, 0.12);
  --glow-strong:   rgba(29, 111, 255, 0.35);
  --cyan-glow:     rgba(0, 200, 255, 0.30);

  /* ── Gradients ───────────────────────────────────────── */
  --grad-brand:    linear-gradient(135deg, #1D6FFF 0%, #00C8FF 100%);
  --grad-brand-h:  linear-gradient(90deg,  #1D6FFF 0%, #00C8FF 100%);
  --grad-hero:     radial-gradient(ellipse 80% 60% at 50% -10%, rgba(29,111,255,0.18) 0%, transparent 70%),
                   radial-gradient(ellipse 50% 40% at 20% 80%, rgba(0,200,255,0.08) 0%, transparent 60%);
  --grad-grid:     linear-gradient(rgba(29,111,255,0.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(29,111,255,0.05) 1px, transparent 1px);

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.5);
  --shadow-glow:  0 8px 24px rgba(29, 111, 255, 0.35);
  --shadow-glow-strong: 0 0 80px rgba(29, 111, 255, 0.18);
  --shadow-cyan:  0 0 24px rgba(0, 200, 255, 0.30);

  /* ── Radii ───────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ── Spacing scale (4px) ─────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── Type families ───────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type scale ──────────────────────────────────────── */
  --fs-display: clamp(40px, 7vw, 72px);  /* hero h1                    */
  --fs-h1:      clamp(34px, 5vw, 48px);  /* page title                 */
  --fs-h2:      clamp(28px, 4vw, 42px);  /* section title              */
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-h5:      17px;

  --fs-body:    16px;
  --fs-body-lg: 18px;
  --fs-sm:      14px;
  --fs-xs:      13px;
  --fs-micro:   11px;  /* eyebrow / mono labels                        */

  /* ── Eyebrow / data-label (signature DTD pattern) ────── */
  --label-letterspacing: 0.14em;
  --label-letterspacing-tight: 0.1em;

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    480ms;
  --dur-xslow:   900ms;

  /* ── Layout ──────────────────────────────────────────── */
  --container:   1100px;
  --nav-h:       80px;
}

/* ─── Base typography ─────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }

p  { color: var(--muted); line-height: 1.7; }

code, pre, .mono {
  font-family: var(--font-mono);
}

/* The DTD signature: tiny mono uppercase eyebrow above section titles */
.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--label-letterspacing);
  text-transform: uppercase;
  color: var(--blue);
  display: inline-block;
}

/* Gradient text — used sparingly on h1 highlight words and stats */
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Numbers / data — always mono, tabular */
.tabular, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}