/* =============================================================
   PulseTech Design System — Tokens
   Single source of truth for color + typography
   ============================================================= */

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

:root {
  /* -----------------------------------------------------------
     COLORS — Brand & Accent
     ----------------------------------------------------------- */
  --color-primary: #000000;                /* primary CTA fill */
  --color-primary-active: #1a1a1a;         /* press state */
  --color-text-link: #0d74ce;              /* inline body links only */
  --color-text-link-secondary: #476cff;    /* legal footer links */
  --color-accent-link-bright: #47c2ff;     /* sparingly inside docs widget */

  /* PulseTech brand blue — present in the logo mark.
     Use only for the wordmark / mark itself, never as a CTA. */
  --color-brand-blue: #1a93e0;

  /* COLORS — Surface */
  --color-canvas: #ffffff;
  --color-canvas-soft: #fafafa;
  --color-surface-card: #ffffff;
  --color-surface-strong: #f0f0f3;
  --color-surface-dark: #171717;
  --color-surface-dark-elevated: #1a1a1a;

  /* COLORS — Atmospheric (hero only) */
  --color-gradient-sky-light: #cfe7ff;
  --color-gradient-sky-mid: #a8c8e8;

  /* COLORS — Hairlines */
  --color-hairline: #f0f0f3;
  --color-hairline-soft: #f5f5f7;
  --color-hairline-strong: #dcdee0;

  /* COLORS — Text */
  --color-ink: #171717;
  --color-body: #60646c;
  --color-body-strong: #171717;
  --color-muted: #999999;
  --color-muted-soft: #cccccc;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-soft: #b0b4ba;

  /* COLORS — Semantic */
  --color-accent-warning: #ab6400;
  --color-accent-preview: #8145b5;
  --color-semantic-success: #16a34a;
  --color-semantic-error: #eb8e90;

  /* -----------------------------------------------------------
     TYPOGRAPHY — Families
     ----------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* -----------------------------------------------------------
     TYPOGRAPHY — Sizes / Weights / Tracking
     ----------------------------------------------------------- */
  --type-display-mega-size: 64px;
  --type-display-mega-lh: 1.05;
  --type-display-mega-ls: -1.92px;

  --type-display-xl-size: 48px;
  --type-display-xl-lh: 1.1;
  --type-display-xl-ls: -1.44px;

  --type-display-lg-size: 36px;
  --type-display-lg-lh: 1.15;
  --type-display-lg-ls: -1.08px;

  --type-display-md-size: 28px;
  --type-display-md-lh: 1.2;
  --type-display-md-ls: -0.84px;

  --type-display-sm-size: 22px;
  --type-display-sm-lh: 1.25;
  --type-display-sm-ls: -0.5px;

  --type-title-md-size: 18px;
  --type-title-md-lh: 1.4;

  --type-title-sm-size: 16px;
  --type-title-sm-lh: 1.4;

  --type-body-md-size: 16px;
  --type-body-md-lh: 1.5;

  --type-body-sm-size: 14px;
  --type-body-sm-lh: 1.5;

  --type-caption-size: 13px;
  --type-caption-lh: 1.4;

  --type-caption-uppercase-size: 11px;
  --type-caption-uppercase-lh: 1.4;
  --type-caption-uppercase-ls: 0.88px;

  --type-code-size: 13px;
  --type-code-lh: 1.5;

  --type-button-size: 14px;
  --type-button-lh: 1.0;

  --type-nav-size: 14px;
  --type-nav-lh: 1.4;

  /* -----------------------------------------------------------
     SPACING — 4px base
     ----------------------------------------------------------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-base: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------
     ELEVATION
     ----------------------------------------------------------- */
  --shadow-soft-drop: 0 4px 12px rgba(0, 0, 0, 0.04);
  --gradient-sky-hero: radial-gradient(120% 80% at 50% 0%, var(--color-gradient-sky-light) 0%, rgba(168, 200, 232, 0.45) 35%, rgba(255, 255, 255, 0) 70%);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container-max: 1200px;
  --nav-height: 64px;
}

/* =============================================================
   Semantic element styles — kept light. Use utility classes
   below for typography roles rather than retagging everything.
   ============================================================= */

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

a {
  color: var(--color-text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
}

/* ---- Type roles (utility classes) ---- */
.t-display-mega { font: 600 var(--type-display-mega-size)/var(--type-display-mega-lh) var(--font-sans); letter-spacing: var(--type-display-mega-ls); color: var(--color-ink); }
.t-display-xl   { font: 600 var(--type-display-xl-size)/var(--type-display-xl-lh) var(--font-sans);   letter-spacing: var(--type-display-xl-ls); color: var(--color-ink); }
.t-display-lg   { font: 600 var(--type-display-lg-size)/var(--type-display-lg-lh) var(--font-sans);   letter-spacing: var(--type-display-lg-ls); color: var(--color-ink); }
.t-display-md   { font: 600 var(--type-display-md-size)/var(--type-display-md-lh) var(--font-sans);   letter-spacing: var(--type-display-md-ls); color: var(--color-ink); }
.t-display-sm   { font: 600 var(--type-display-sm-size)/var(--type-display-sm-lh) var(--font-sans);   letter-spacing: var(--type-display-sm-ls); color: var(--color-ink); }
.t-title-md     { font: 600 var(--type-title-md-size)/var(--type-title-md-lh) var(--font-sans); color: var(--color-ink); }
.t-title-sm     { font: 600 var(--type-title-sm-size)/var(--type-title-sm-lh) var(--font-sans); color: var(--color-ink); }
.t-body-md      { font: 400 var(--type-body-md-size)/var(--type-body-md-lh) var(--font-sans); color: var(--color-body); }
.t-body-sm      { font: 400 var(--type-body-sm-size)/var(--type-body-sm-lh) var(--font-sans); color: var(--color-body); }
.t-caption      { font: 400 var(--type-caption-size)/var(--type-caption-lh) var(--font-sans); color: var(--color-body); }
.t-caption-up   { font: 600 var(--type-caption-uppercase-size)/var(--type-caption-uppercase-lh) var(--font-sans); letter-spacing: var(--type-caption-uppercase-ls); text-transform: uppercase; color: var(--color-ink); }
.t-code         { font: 400 var(--type-code-size)/var(--type-code-lh) var(--font-mono); }
.t-button       { font: 500 var(--type-button-size)/var(--type-button-lh) var(--font-sans); }
.t-nav          { font: 500 var(--type-nav-size)/var(--type-nav-lh) var(--font-sans); color: var(--color-ink); }