/* ==========================================================================
   Design tokens
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Components should only reference these variables, never raw values.
   ========================================================================== */

:root {
  /* ---- Color primitives ------------------------------------------------ */
  /* Neutrals carry a faint cool tint so they don't read as flat gray. */
  --gray-0: #ffffff;
  --gray-50: #f6f8fb;
  --gray-100: #eef1f6;
  --gray-200: #e1e6ee;
  --gray-300: #c9d1dd;
  --gray-400: #9aa5b8;
  --gray-500: #6b7689;
  --gray-600: #4d5668;
  --gray-700: #353c4b;
  --gray-800: #232936;
  --gray-900: #151923;
  --gray-950: #0c0f16;

  --indigo-300: #a5a3ff;
  --indigo-400: #8482ff;
  --indigo-500: #635bff;
  --indigo-600: #5147e6;
  --indigo-700: #4237c4;

  /* ---- Semantic color (light) ------------------------------------------ */
  --color-bg: var(--gray-0);
  --color-bg-subtle: var(--gray-50);
  --color-bg-muted: var(--gray-100);
  --color-surface: var(--gray-0);
  --color-surface-raised: var(--gray-0);

  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: var(--gray-0);

  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-accent: var(--indigo-500);
  --color-accent-hover: var(--indigo-600);
  --color-accent-active: var(--indigo-700);
  --color-accent-soft: rgba(99, 91, 255, 0.08);
  --color-accent-text: var(--indigo-600);

  --color-focus-ring: rgba(99, 91, 255, 0.45);

  /* Nav background when scrolled: translucent + backdrop blur */
  --color-nav-bg: rgba(255, 255, 255, 0.82);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Fluid type scale. Each step is clamp(min, preferred, max) so it scales
     smoothly between ~360px and ~1280px viewports. Ratio is roughly 1.25. */
  --text-xs: 0.75rem;                                   /* 12px */
  --text-sm: 0.875rem;                                  /* 14px */
  --text-base: 1rem;                                    /* 16px */
  --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17–18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);  /* 18–20px */
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);     /* 20–24px */
  --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);  /* 24–30px */
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);     /* 30–40px */
  --text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.25rem);   /* 36–52px */
  --text-5xl: clamp(2.75rem, 1.6rem + 4.8vw, 4.25rem);   /* 44–68px */

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Vertical rhythm between page sections; grows with viewport. */
  --section-padding: clamp(var(--space-16), 6vw + 2rem, var(--space-32));

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 72rem;   /* 1152px */
  --container-narrow: 44rem; /* 704px, for prose */
  --container-gutter: clamp(var(--space-4), 4vw, var(--space-8));
  --nav-height: 4rem;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(21, 25, 35, 0.06);
  --shadow-md: 0 2px 6px rgba(21, 25, 35, 0.06), 0 8px 24px rgba(21, 25, 35, 0.06);
  --shadow-lg: 0 4px 12px rgba(21, 25, 35, 0.08), 0 24px 48px rgba(21, 25, 35, 0.1);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;

  /* Distance elements travel during scroll reveal */
  --reveal-offset: 16px;

  color-scheme: light;
}

/* ==========================================================================
   Dark theme
   Applied via [data-theme="dark"] on <html>. The inline script in index.html
   sets this before first paint based on stored preference or system setting.
   ========================================================================== */

[data-theme="dark"] {
  --color-bg: var(--gray-950);
  --color-bg-subtle: var(--gray-900);
  --color-bg-muted: var(--gray-800);
  --color-surface: var(--gray-900);
  --color-surface-raised: var(--gray-800);

  --color-text: var(--gray-50);
  --color-text-secondary: var(--gray-300);
  --color-text-muted: var(--gray-400);
  --color-text-inverse: var(--gray-950);

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-accent: var(--indigo-400);
  --color-accent-hover: var(--indigo-300);
  --color-accent-active: var(--indigo-500);
  --color-accent-soft: rgba(132, 130, 255, 0.12);
  --color-accent-text: var(--indigo-300);

  --color-focus-ring: rgba(132, 130, 255, 0.5);

  --color-nav-bg: rgba(12, 15, 22, 0.78);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}