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

:root{
  color-scheme: light;

  /* ---- 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;

  /* ---- Section color system (premium multi-tone backgrounds) ---- */
  --sec-hero-a:#FFFFFF;
  --sec-hero-b:#E6EEFF;
  --sec-light-blue:#EFF5FF;
  --sec-light-blue-border:#DCE7FB;
  --sec-soft-gray:#F4F5F8;
  --sec-soft-gray-border:#E6E8EE;
  --sec-white:#FFFFFF;
  --sec-light-cyan:#EAFBFD;
  --sec-light-cyan-border:#D3F2F5;
  --sec-navy-a:#0A1220;
  --sec-navy-b:#0E1B33;
  --sec-blue-grad-a:#2563FF;
  --sec-blue-grad-b:#123199;
}

/* =========================================================
   SECTION COLOR SYSTEM
   Each section swaps the semantic tokens locally so every
   existing component (cards, buttons, eyebrow, text) adapts
   automatically without per-component overrides.
   ========================================================= */
.sec-hero{
  --bg: linear-gradient(180deg, var(--sec-hero-a) 0%, var(--sec-hero-b) 100%);
  --text-primary:#0B0F1A; --text-secondary:#4B5468; --text-tertiary:#6B7488;
  --surface-glass: rgba(10,20,50,.04); --surface-glass-border: rgba(10,20,50,.10);
  --border-subtle: rgba(10,20,50,.08); --border-strong: rgba(10,20,50,.16);
  --accent-2:#0C8FB0;
  background:var(--bg);
}
.sec-light-blue{
  --bg: var(--sec-light-blue);
  --text-primary:#0B0F1A; --text-secondary:#4B5468; --text-tertiary:#6B7488;
  --surface-glass: rgba(255,255,255,.65); --surface-glass-border: var(--sec-light-blue-border);
  --border-subtle: var(--sec-light-blue-border); --border-strong: #C3D4F2;
  --accent-2:#0C8FB0;
  background:var(--bg);
}
.sec-soft-gray{
  --bg: var(--sec-soft-gray);
  --text-primary:#0B0F1A; --text-secondary:#4B5468; --text-tertiary:#6B7488;
  --surface-glass: rgba(255,255,255,.7); --surface-glass-border: var(--sec-soft-gray-border);
  --border-subtle: var(--sec-soft-gray-border); --border-strong:#D7DAE2;
  --accent-2:#0C8FB0;
  background:var(--bg);
}
.sec-white{
  --bg: var(--sec-white);
  --text-primary:#0B0F1A; --text-secondary:#4B5468; --text-tertiary:#6B7488;
  --surface-glass: rgba(10,20,50,.03); --surface-glass-border: rgba(10,20,50,.09);
  --border-subtle: rgba(10,20,50,.08); --border-strong: rgba(10,20,50,.14);
  --accent-2:#0C8FB0;
  background:var(--bg);
}
.sec-light-cyan{
  --bg: var(--sec-light-cyan);
  --text-primary:#0B0F1A; --text-secondary:#3E5458; --text-tertiary:#5C7175;
  --surface-glass: rgba(255,255,255,.7); --surface-glass-border: var(--sec-light-cyan-border);
  --border-subtle: var(--sec-light-cyan-border); --border-strong:#BDE9EC;
  --accent-2:#0C8FB0;
  background:var(--bg);
}
.sec-navy{
  --bg: linear-gradient(160deg, var(--sec-navy-a) 0%, var(--sec-navy-b) 100%);
  --text-primary:#F5F7FF; --text-secondary:#AEB8CF; --text-tertiary:#7C87A3;
  --surface-glass: rgba(255,255,255,.05); --surface-glass-border: rgba(255,255,255,.12);
  --border-subtle: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18);
  background:var(--bg);
}
.sec-blue-grad{
  --bg: linear-gradient(135deg, var(--sec-blue-grad-a) 0%, var(--sec-blue-grad-b) 100%);
  --text-primary:#FFFFFF; --text-secondary:rgba(255,255,255,.82); --text-tertiary:rgba(255,255,255,.6);
  --surface-glass: rgba(255,255,255,.10); --surface-glass-border: rgba(255,255,255,.22);
  --border-subtle: rgba(255,255,255,.18); --border-strong: rgba(255,255,255,.3);
  background:var(--bg);
}
.sec-navy, .sec-blue-grad{ --accent-2: #6FE3F0; }

/* ---- LIGHT THEME override ---- */
[data-theme="light"]{
  color-scheme: light;
}
[data-theme="dark"]{
  color-scheme: dark;
}
[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);
}