/* ==========================================================================
   Design tokens — the single source of truth for the visual system.
   Dark mode is the default theme; [data-theme="light"] overrides the
   color tokens. Every other stylesheet consumes these variables only.
   ========================================================================== */

:root {
  /* ---- Type scale (fluid, clamp based) --------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm:   clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.08rem, 1.02rem + 0.35vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.35rem + 0.9vw, 2rem);
  --text-3xl:  clamp(1.85rem, 1.6rem + 1.4vw, 2.6rem);
  --text-4xl:  clamp(2.3rem, 1.9rem + 2.2vw, 3.5rem);
  --text-5xl:  clamp(2.8rem, 2.2rem + 3.2vw, 4.5rem);

  --leading-tight:  1.12;
  --leading-snug:   1.3;
  --leading-normal: 1.65;

  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;

  /* ---- Spacing 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: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 74rem;
  --container-narrow: 46rem;
  --container-wide: 84rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---- Brand ramp (theme independent) ----------------------------------- */
  --accent-300: #93b4ff;
  --accent-400: #6f97ff;
  --accent-500: #4f7dff;
  --accent-600: #3b63e8;
  --cyan-400:   #22d3ee;
  --cyan-500:   #06b6d4;
  --violet-500: #8b7cf6;

  --gradient-brand: linear-gradient(120deg, var(--accent-400) 0%, var(--cyan-400) 100%);
  --gradient-brand-soft: linear-gradient(120deg, rgba(79, 125, 255, 0.16), rgba(34, 211, 238, 0.12));

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.44, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* ---- Z layers --------------------------------------------------------- */
  --z-header: 60;
  --z-mega: 55;
  --z-mobile: 70;
  --z-overlay: 80;

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-400);
}

/* ==========================================================================
   Dark theme (default)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #07090f;
  --bg-raised:     #0b0e17;
  --bg-sunken:     #05070c;
  --surface:       rgba(255, 255, 255, 0.03);
  --surface-2:     rgba(255, 255, 255, 0.055);
  --surface-3:     rgba(255, 255, 255, 0.09);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(111, 151, 255, 0.35);

  --text:          #e8ecf4;
  --text-strong:   #ffffff;
  --text-muted:    #9aa4b8;
  --text-faint:    #67718a;

  --accent:        var(--accent-400);
  --accent-strong: var(--accent-300);
  --accent-contrast: #0a0f1e;
  --link:          var(--accent-300);

  --success: #34d399;
  --warning: #fbbf24;
  --danger:  #f87171;

  --header-bg: rgba(7, 9, 15, 0.78);
  --glass: rgba(13, 17, 28, 0.72);

  --glow-1: rgba(79, 125, 255, 0.16);
  --glow-2: rgba(34, 211, 238, 0.10);

  --code-bg: #0a0d16;
  --code-border: rgba(255, 255, 255, 0.08);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 60px rgba(79, 125, 255, 0.18);
}

/* ==========================================================================
   Light theme
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #f7f8fb;
  --bg-raised:     #ffffff;
  --bg-sunken:     #eef1f6;
  --surface:       rgba(15, 23, 42, 0.03);
  --surface-2:     rgba(15, 23, 42, 0.055);
  --surface-3:     rgba(15, 23, 42, 0.09);

  --border:        rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.20);
  --border-accent: rgba(59, 99, 232, 0.35);

  --text:          #2a3347;
  --text-strong:   #0d1424;
  --text-muted:    #5a6478;
  --text-faint:    #8a93a6;

  --accent:        var(--accent-600);
  --accent-strong: var(--accent-500);
  --accent-contrast: #ffffff;
  --link:          var(--accent-600);

  --success: #059669;
  --warning: #b45309;
  --danger:  #dc2626;

  --header-bg: rgba(255, 255, 255, 0.82);
  --glass: rgba(255, 255, 255, 0.78);

  --glow-1: rgba(79, 125, 255, 0.10);
  --glow-2: rgba(34, 211, 238, 0.08);

  --code-bg: #0d1220;
  --code-border: rgba(15, 23, 42, 0.12);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 8px 30px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 24px 70px rgba(15, 23, 42, 0.14);
  --shadow-glow: 0 0 60px rgba(79, 125, 255, 0.12);
}