/* =========================================================
   Data Driven — Colors & Type
   The brand is: dark + white + one blue. That's the rule.
   ========================================================= */

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

:root {
  /* ---------- Brand core ---------- */
  --dd-blue:        #2B83F7;   /* primary signal — the only accent */
  --dd-blue-600:    #1E6FE0;   /* press / hovered active */
  --dd-blue-400:    #5BA0FA;   /* hover-light, links on dark */
  --dd-blue-100:    #DCEAFD;   /* tinted bg, subtle highlights */
  --dd-blue-glow:   rgba(43, 131, 247, 0.35); /* glow / focus ring */

  --dd-ink:         #0B0F14;   /* near-black canvas (logo bg) */
  --dd-ink-2:       #11161D;   /* surface 1 — cards on dark */
  --dd-ink-3:       #1A2029;   /* surface 2 — popovers / inputs */
  --dd-ink-4:       #232B36;   /* hairlines on dark */

  --dd-paper:       #FFFFFF;   /* primary on dark, page bg on light */
  --dd-paper-2:     #F5F7FA;   /* light surface */
  --dd-paper-3:     #E7ECF2;   /* hairlines on light */

  /* ---------- Foreground (semantic) ---------- */
  --fg-1:           var(--dd-paper);                 /* primary text on dark */
  --fg-2:           rgba(255, 255, 255, 0.72);       /* secondary on dark */
  --fg-3:           rgba(255, 255, 255, 0.48);       /* tertiary / metadata */
  --fg-4:           rgba(255, 255, 255, 0.24);       /* disabled / scaffolding */

  --fg-1-light:     #0B0F14;                         /* primary on light */
  --fg-2-light:     #3D4755;
  --fg-3-light:     #6B7785;
  --fg-4-light:     #A6AEBA;

  /* ---------- Backgrounds (semantic) ---------- */
  --bg-canvas:      var(--dd-ink);
  --bg-surface:     var(--dd-ink-2);
  --bg-raised:      var(--dd-ink-3);
  --bg-tint-blue:   rgba(43, 131, 247, 0.08);

  /* ---------- Borders ---------- */
  --border-1:       rgba(255, 255, 255, 0.08);
  --border-2:       rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-blue:    var(--dd-blue);

  /* ---------- Status (used sparingly — restraint > variety) ---------- */
  --status-good:    #2DD4A0;
  --status-warn:    #F5B642;
  --status-bad:     #F26A6A;

  /* ---------- Typography ---------- */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display:   'Inter', sans-serif;            /* same family, heavier weights */

  /* Type scale (1.250 ratio, anchored at 16px) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;
  --t-4xl:  64px;
  --t-5xl:  84px;
  --t-6xl:  112px;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  /* Tracking */
  --tr-display:  -0.02em;
  --tr-base:      0;
  --tr-mono-cap:  0.14em;   /* tracked-out caps for HUD/telemetry */
  --tr-tag:       0.08em;

  /* ---------- Spacing scale (4px grid) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- Layout ---------- */
  --maxw:            1240px;   /* container max width */
  --gutter:          32px;     /* container side padding */
  --section-y:       96px;     /* default vertical section padding */
  --section-y-loose: 128px;    /* spacious sections */
  --section-y-tight: 56px;     /* dense sections */

  /* ---------- Radii ---------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px;

  /* ---------- Shadows / elevation (used sparingly on dark) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.45);
  --shadow-blue: 0 0 0 4px var(--dd-blue-glow);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* default — telemetry "settle" */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.2, 1);  /* button press */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;
}

/* =========================================================
   Base / semantic element styles
   ========================================================= */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Display & headings ---------- */
.dd-display, h1.dd-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  text-wrap: balance;
}
h1, .dd-h1 {
  font-weight: 800; font-size: var(--t-4xl); line-height: var(--lh-tight);
  letter-spacing: var(--tr-display); color: var(--fg-1); text-wrap: balance;
}
h2, .dd-h2 {
  font-weight: 700; font-size: var(--t-2xl); line-height: var(--lh-snug);
  letter-spacing: -0.01em; color: var(--fg-1); text-wrap: balance;
}
h3, .dd-h3 {
  font-weight: 700; font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--fg-1);
}
h4, .dd-h4 {
  font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--fg-1);
}

/* ---------- Body ---------- */
p, .dd-p {
  font-size: var(--t-base); line-height: var(--lh-base); color: var(--fg-2);
  text-wrap: pretty;
}
.dd-lead {
  font-size: var(--t-md); line-height: var(--lh-base); color: var(--fg-2);
}
small, .dd-small { font-size: var(--t-sm); color: var(--fg-3); }

/* ---------- Telemetry / overline / tag ---------- */
.dd-overline {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tr-mono-cap);
  text-transform: uppercase;
  color: var(--dd-blue-400);
}
.dd-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-tag);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Code / mono ---------- */
code, kbd, samp, pre, .dd-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
code {
  background: var(--bg-raised);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
  color: var(--dd-blue-400);
}

/* ---------- Links ---------- */
a, .dd-link {
  color: var(--dd-blue-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--dd-blue); border-bottom-color: currentColor; }

/* ---------- The Rule of Tagline ---------- */
.dd-tagline {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tr-mono-cap);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- Light theme (rare — most surfaces are dark) ---------- */
.dd-on-light {
  background: var(--dd-paper);
  color: var(--fg-1-light);
}
.dd-on-light p { color: var(--fg-2-light); }
.dd-on-light h1, .dd-on-light h2, .dd-on-light h3 { color: var(--fg-1-light); }
.dd-on-light code { background: var(--dd-paper-2); border-color: var(--dd-paper-3); color: var(--dd-blue-600); }

/* ---------- Selection ---------- */
::selection { background: var(--dd-blue); color: var(--dd-paper); }

/* ---------- Responsive layout overrides ---------- */
@media (max-width: 880px) {
  :root {
    --gutter: 24px;
    --section-y: 64px;
    --section-y-loose: 88px;
    --section-y-tight: 40px;
  }
}
@media (max-width: 560px) {
  :root {
    --gutter: 20px;
  }
}