/* ============================================================
   PulseX design tokens (colors + typography + spacing + effects)
   Consolidated from the design-system export. Pure CSS custom
   properties, no build step.
   ============================================================ */

/* ---------- Inter (self-hosted, subset: latin) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Dark base ---- */
  --bg:          #0A0A0A;
  --bg-raise:    #101010;
  --surface-1:   #141414;
  --surface-2:   #1A1A1A;
  --gunmetal:    #2B2B2B;
  --gunmetal-2:  #3A3A3A;
  --hairline:    #262626;

  /* ---- Warm charcoal surface ---- */
  --surface-warm:   #1A1613;
  --surface-warm-2: #221C17;
  --hairline-warm:  #2E2721;

  /* ---- Feature-card surface: "Deep to Cyan" ---- */
  --surface-teal:   linear-gradient(150deg, #0B1C1D 0%, #123E40 70%, #1B6669 100%);
  --teal-border:    #1E7377;
  --teal-ink:       #7FE9EE;
  --teal-body:      #9CC3C4;
  --teal-chip:      #0C2A2C;
  --teal-chip-bd:   #22D3DB;

  /* ---- Accent: cyan / teal family ---- */
  --cyan:        #22D3DB;
  --cyan-bright: #46F0F0;
  --teal:        #2E9696;
  --cyan-dim:    #14A0A8;

  /* ---- Text ---- */
  --text:        #F5F5F5;
  --text-2:      #9A9A9A;
  --text-dim:    #6B6B6B;

  /* ---- Hardware-truth colors ---- */
  --led-blue:    #3AA0FF;
  --charge-ok:   #35C759;

  /* ---- Semantic aliases ---- */
  --page-bg:        var(--bg);
  --surface-card:   var(--surface-1);
  --surface-hover:  var(--surface-2);
  --border-hair:    var(--hairline);
  --accent:         var(--cyan);
  --accent-hover:   var(--cyan-bright);
  --accent-press:   var(--cyan-dim);
  --on-accent:      #06181A;

  /* ---- Typography ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --grad-head: linear-gradient(90deg, #82E6C8 0%, #22D3DB 50%, #78B4F0 100%);
  --fs-hero:      clamp(40px, 6vw, 72px);
  --fs-title:     clamp(30px, 4vw, 40px);
  --fs-stat:      clamp(36px, 5vw, 64px);
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-spec:      14px;
  --fs-eyebrow:   13px;
  --fs-micro:     12px;
  --lh-display:   1.05;
  --lh-title:     1.1;
  --lh-body:      1.55;
  --lh-tight:     1.2;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --track-display: -0.02em;
  --track-eyebrow: 0.18em;
  --track-body:    0;

  /* ---- Spacing / layout ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --section-y:        var(--space-24);
  --section-y-mobile: var(--space-16);
  --content-max: 1280px;
  --gutter:      24px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --radius-sm:   10px;

  /* ---- Effects ---- */
  --glow-cyan:      0 0 40px rgba(34, 211, 219, 0.35);
  --glow-cyan-soft: 0 0 24px rgba(34, 211, 219, 0.20);
  --ring-glow:      0 0 60px rgba(46, 150, 150, 0.45);
  --elev-1: inset 0 0 0 1px var(--hairline);
  --topo: repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 22px);
  --chevron: repeating-linear-gradient(135deg, rgba(34,211,219,0.03) 0 2px, transparent 2px 16px);
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur:       260ms;
  --dur-slow:  420ms;
  --pulse-loop: 3000ms;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan);
}