/* ============================================================
   BULUTRA — DESIGN TOKENS
   The single source of truth: color, type, space, motion.
   ============================================================ */

:root {
  /* ---- Brand & accents ---------------------------------- */
  --blue-700: #1E3ED1;
  --blue-600: #2A50E8;   /* brand electric blue (from the mark) */
  --blue-500: #3B63FF;
  --blue-400: #5A7CFF;
  --cyan-500: #38E8FF;   /* live signal */
  --cyan-400: #6FF1FF;
  --amber-500: #FFB257;  /* restrained — risk / active only */
  --amber-600: #F59E3C;

  /* per-product signal accent (stays in family) */
  --acc-id:  #3B63FF;    /* identity  — core blue   */
  --acc-net: #38E8FF;    /* network   — cyan        */
  --acc-sec: #FFB257;    /* security  — amber/risk  */

  /* ---- Base surfaces (deep graphite / navy / black) ----- */
  --bg-900: #06080C;     /* page base, near-black */
  --bg-850: #080B12;
  --bg-800: #0A0E16;     /* panel */
  --bg-700: #0E1320;     /* raised panel */
  --bg-650: #121829;
  --navy:   #0B1220;

  /* ---- Metallic neutrals / ink -------------------------- */
  --ink-100: #EEF3FB;    /* primary text, soft white */
  --ink-200: #C2CCDC;
  --ink-300: #9AA6BA;    /* secondary */
  --ink-400: #6B7689;    /* muted */
  --steel:   #8A94A6;

  /* hairlines & strokes */
  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --line-blue:   rgba(58, 99, 255, 0.30);

  /* glows */
  --glow-blue: rgba(42, 80, 232, 0.45);
  --glow-cyan: rgba(56, 232, 255, 0.35);

  /* ---- Typography --------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* fluid type scale */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-lede:    clamp(1.075rem, 1rem + 0.5vw, 1.3rem);
  --fs-h4:      clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-display: clamp(2.55rem, 1.6rem + 4.4vw, 4.9rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  /* ---- Spacing & layout --------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(5.5rem, 11vh, 9.5rem);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Motion ------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 720ms;
  --dur-reveal: 900ms;

  /* ---- Z-index scale ------------------------------------ */
  --z-canvas: 0;
  --z-content: 10;
  --z-cursor: 60;
  --z-header: 100;
  --z-menu: 200;
  --z-intro: 300;

  color-scheme: dark;
}

/* accent helper: any element with data-accent picks up its color */
[data-accent="id"]  { --accent: var(--acc-id); }
[data-accent="net"] { --accent: var(--acc-net); }
[data-accent="sec"] { --accent: var(--acc-sec); }