/* =========================================================
   DISI TECH — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   ========================================================= */

:root{
  /* ---- Brand color primitives (from brand guide) ---- */
  --c-black-900:#0A0A0A;
  --c-black-800:#111111;
  --c-black-700:#161616;
  --c-black-600:#1D1D1F;
  --c-white:#FFFFFF;
  --c-blue-600:#2563FF;
  --c-blue-500:#3E77FF;
  --c-cyan-400:#00E0FF;
  --c-gray-100:#F2F4F7;
  --c-gray-300:#C9CDD6;
  --c-gray-500:#8A8F9C;

  /* ---- Gradient signature (icon + wordmark gradient) ---- */
  --grad-brand: linear-gradient(90deg, var(--c-blue-600) 0%, var(--c-cyan-400) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(37,99,255,.16) 0%, rgba(0,224,255,.10) 100%);
  --grad-radial-glow: radial-gradient(60% 60% at 50% 0%, rgba(37,99,255,.25) 0%, rgba(0,224,255,0) 70%);

  /* ---- Semantic tokens — DARK THEME (default) ---- */
  --bg: var(--c-black-900);
  --bg-elevated: var(--c-black-800);
  --bg-elevated-2: var(--c-black-700);
  --surface-glass: rgba(255,255,255,.04);
  --surface-glass-border: rgba(255,255,255,.08);
  --text-primary: #F5F6F8;
  --text-secondary: #A6ABB8;
  --text-tertiary: #71768A;
  --border-subtle: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --accent: var(--c-blue-600);
  --accent-2: var(--c-cyan-400);
  --focus-ring: #6FA8FF;

  /* ---- Type ---- */
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-h1: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow / glow ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.24);
  --shadow-md: 0 8px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  --glow-blue: 0 0 0 1px rgba(37,99,255,.35), 0 8px 30px rgba(37,99,255,.25);
  --glow-cyan: 0 0 40px rgba(0,224,255,.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .18s;
  --dur-med: .4s;
  --dur-slow: .8s;

  --header-h: 76px;
}

/* ---- LIGHT THEME override ---- */
[data-theme="light"]{
  --bg: #FFFFFF;
  --bg-elevated: var(--c-gray-100);
  --bg-elevated-2: #E9ECF2;
  --surface-glass: rgba(10,10,10,.03);
  --surface-glass-border: rgba(10,10,10,.08);
  --text-primary: #0B0C10;
  --text-secondary: #4B4F5C;
  --text-tertiary: #6B7080;
  --border-subtle: rgba(10,10,10,.08);
  --border-strong: rgba(10,10,10,.14);
  --shadow-md: 0 8px 30px rgba(15,20,40,.08);
  --shadow-lg: 0 20px 60px rgba(15,20,40,.10);
}