/* ============================================================
   Centive Design System — colours, type, spacing, radii
   ============================================================
   Black canvas + electric yellow + white type. Single-accent.
   ------------------------------------------------------------ */

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

:root {
  /* ---------- Brand ---------- */
  --primary:           #faff69;  /* electric yellow — CTAs, stat numbers, CTA bands */
  --primary-active:    #e6eb52;  /* press / hover-darker */
  --primary-disabled:  #3a3a1f;  /* desaturated yellow on dark */

  /* ---------- Surface (dark canvas system) ---------- */
  --canvas:            #0a0a0a;  /* page floor — near-pure black */
  --surface-soft:      #121212;  /* section dividers */
  --surface-card:      #1a1a1a;  /* feature cards, code windows */
  --surface-elevated:  #242424;  /* nested cards */
  --hairline:          #2a2a2a;  /* 1px borders on dark cards */
  --hairline-hover:    #3a3a3a;  /* hover-state border */

  /* ---------- Text ---------- */
  --ink:               #ffffff;  /* headlines, primary text on dark */
  --body:              #cccccc;  /* default running text */
  --muted:             #888888;  /* footer links, captions */
  --muted-soft:        #5a5a5a;  /* tertiary, fine-print */
  --on-primary:        #0a0a0a;  /* text on yellow CTA band/button */

  /* ---------- Focus / states ---------- */
  --focus-ring:        rgba(250, 255, 105, 0.32);
  --overlay:           rgba(0, 0, 0, 0.75);

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

  /* ---------- Display scale (700 weight unless noted) ---------- */
  --display-xl-size:    72px;
  --display-xl-line:    1.05;
  --display-xl-track:   -2.5px;

  --display-lg-size:    56px;
  --display-lg-line:    1.10;
  --display-lg-track:   -2px;

  --display-md-size:    40px;
  --display-md-line:    1.15;
  --display-md-track:   -1.5px;

  --display-sm-size:    32px;
  --display-sm-line:    1.20;
  --display-sm-track:   -1px;

  /* ---------- Title scale ---------- */
  --title-lg-size:      24px;
  --title-lg-line:      1.3;
  --title-lg-track:     -0.3px;
  --title-md-size:      18px;
  --title-md-line:      1.4;
  --title-sm-size:      16px;
  --title-sm-line:      1.4;

  /* ---------- Stat ---------- */
  --stat-display-size:  56px;
  --stat-display-line:  1.0;
  --stat-display-track: -1.5px;

  /* ---------- Body ---------- */
  --body-md-size:       16px;
  --body-md-line:       1.55;
  --body-sm-size:       14px;
  --body-sm-line:       1.55;

  /* ---------- Caption / eyebrow ---------- */
  --caption-size:           13px;
  --caption-line:           1.4;
  --caption-uppercase-size: 12px;
  --caption-uppercase-track: 1.5px;

  /* ---------- Code / button ---------- */
  --code-size:    14px;
  --code-line:    1.55;
  --button-size:  14px;

  /* ---------- Spacing scale (8px base) ---------- */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:     12px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 96px;

  /* ---------- Border radius ---------- */
  --radius-xs:    4px;
  --radius-sm:    6px;   /* inputs, buttons */
  --radius-md:    8px;   /* cards */
  --radius-lg:   12px;   /* feature panels */
  --radius-pill: 999px;
  --radius-full: 999px;

  /* ---------- Layout ---------- */
  --max-content: 1280px;
  --nav-height:  72px;

  /* ---------- Motion ---------- */
  --motion-quick: 120ms ease-out;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

h1, .h1, .display-xl {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-line);
  letter-spacing: var(--display-xl-track);
  color: var(--ink);
  margin: 0;
}

h2, .h2, .display-lg {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line);
  letter-spacing: var(--display-lg-track);
  color: var(--ink);
  margin: 0;
}

h3, .h3, .display-md {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--display-md-size);
  line-height: var(--display-md-line);
  letter-spacing: var(--display-md-track);
  color: var(--ink);
  margin: 0;
}

h4, .h4, .display-sm {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--display-sm-size);
  line-height: var(--display-sm-line);
  letter-spacing: var(--display-sm-track);
  color: var(--ink);
  margin: 0;
}

.title-lg {
  font-weight: 700;
  font-size: var(--title-lg-size);
  line-height: var(--title-lg-line);
  letter-spacing: var(--title-lg-track);
  color: var(--ink);
}

.title-md {
  font-weight: 600;
  font-size: var(--title-md-size);
  line-height: var(--title-md-line);
  color: var(--ink);
}

.title-sm {
  font-weight: 600;
  font-size: var(--title-sm-size);
  line-height: var(--title-sm-line);
  color: var(--ink);
}

p, .body-md {
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  color: var(--body);
  margin: 0;
}

.body-sm {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--body);
}

.caption {
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  font-weight: 500;
  color: var(--muted);
}

.eyebrow {
  font-size: var(--caption-uppercase-size);
  letter-spacing: var(--caption-uppercase-track);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--primary);
}

.stat-display {
  font-weight: 700;
  font-size: var(--stat-display-size);
  line-height: var(--stat-display-line);
  letter-spacing: var(--stat-display-track);
  color: var(--primary);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
  color: var(--body);
}

/* ============================================================
   Focus ring (consistent across all interactive elements)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}