/* ============================================================================
   KarasantesGroup.Com — Design Tokens (v3.0 — "Digital Future" skin)
   Dark-slate base + glowing cyan network palette, derived from brand logo.
   Dark theme is the DEFAULT. Light theme via [data-theme="light"].
   © 2026 KarasantesGroup.Com
============================================================================ */

:root {
  /* ─── BRAND (fixed, theme-independent) ─────────────────────────────────── */
  --kg-cyan:        #34C6F4;   /* primary brand accent (sphere edges) */
  --kg-cyan-bright: #57E6FF;   /* glow / node highlight */
  --kg-cyan-soft:   #7FB5D8;   /* slogan / muted accent */
  --kg-blue:        #1E9FE0;   /* deeper edge blue */
  --kg-blue-deep:   #0E7CC7;   /* CTA depth */
  --kg-glow:        rgba(52, 198, 244, 0.28);
  --kg-glow-strong: rgba(87, 230, 255, 0.45);

  --kg-gradient-brand: linear-gradient(135deg, #1E9FE0 0%, #34C6F4 55%, #57E6FF 100%);
  --kg-gradient-cta:   linear-gradient(135deg, #0E7CC7 0%, #34C6F4 100%);

  /* ─── TYPOGRAPHY ──────────────────────────────────────────────────────── */
  --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  2.75rem;
  --fs-5xl:  3.5rem;
  --fs-6xl:  4.25rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;
  --fw-black:   900;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;

  /* ─── SPACING (8pt-ish scale) ─────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  /* ─── RADII / SHADOWS / MISC ──────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 92px;
  --z-header: 100;
  --z-nav: 200;
  --z-overlay: 150;

  /* ─── DARK THEME (DEFAULT) ────────────────────────────────────────────── */
  --color-bg:            #0B0F14;
  --color-bg-deep:       #070A0E;
  --color-surface:       #11161D;
  --color-surface-elev:  #161D26;
  --color-surface-alt:   #0E141B;
  --color-border:        rgba(127, 181, 216, 0.14);
  --color-border-strong: rgba(127, 181, 216, 0.26);
  --color-divider:       rgba(127, 181, 216, 0.10);

  --color-text:        #E8EEF5;
  --color-text-strong: #FFFFFF;
  --color-text-muted:  #A7BACE;
  --color-text-faint:  #7E92A6;
  --color-text-on-cyan: #04121C;

  --color-accent:       var(--kg-cyan);
  --color-accent-hover: var(--kg-cyan-bright);

  --header-bg:    rgba(9, 13, 18, 0.82);
  --header-border: rgba(127, 181, 216, 0.12);

  --hero-bg: radial-gradient(120% 90% at 50% 0%, #11202E 0%, #0B0F14 55%, #070A0E 100%);
  --card-glow: 0 0 0 1px rgba(127,181,216,0.10), 0 18px 50px -22px rgba(0,0,0,0.8);
  --card-glow-hover: 0 0 0 1px var(--kg-glow), 0 26px 60px -20px rgba(0,0,0,0.85), 0 0 38px -12px var(--kg-glow);

  --shadow-sm: 0 2px 10px -4px rgba(0,0,0,0.6);
  --shadow-md: 0 14px 36px -18px rgba(0,0,0,0.75);

  color-scheme: dark;
}

/* ─── LIGHT THEME ─────────────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:            #F4F7FA;
  --color-bg-deep:       #E8EEF4;
  --color-surface:       #FFFFFF;
  --color-surface-elev:  #FFFFFF;
  --color-surface-alt:   #EDF2F8;
  --color-border:        #D6E0EA;
  --color-border-strong: #B9C8D6;
  --color-divider:       #E3EAF1;

  --color-text:        #0E171E;
  --color-text-strong: #05090D;
  --color-text-muted:  #41566A;
  --color-text-faint:  #5C7185;
  --color-text-on-cyan: #04121C;

  --color-accent:       var(--kg-blue-deep);
  --color-accent-hover: var(--kg-blue);

  /* Header chrome stays dark-slate in BOTH themes — it's brand chrome that
     frames the cyan logo. Keeps the network-sphere lockup readable. */
  --header-bg:    rgba(9, 13, 18, 0.92);
  --header-border: rgba(127, 181, 216, 0.16);

  --hero-bg: radial-gradient(120% 90% at 50% 0%, #DCEAF6 0%, #F4F7FA 60%, #E8EEF4 100%);
  --card-glow: 0 0 0 1px #E1E9F1, 0 16px 40px -24px rgba(16, 40, 70, 0.28);
  --card-glow-hover: 0 0 0 1px rgba(52,198,244,0.45), 0 24px 50px -22px rgba(16,40,70,0.30), 0 0 30px -14px var(--kg-glow);

  --shadow-sm: 0 2px 10px -4px rgba(16,40,70,0.14);
  --shadow-md: 0 14px 36px -18px rgba(16,40,70,0.22);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}