/* /styles/01-variables.css */
/* Design tokens — OKLCH color system */

:root {
  /* Surface scale (dark default) */
  --bg-base: oklch(0.13 0.015 50);
  --bg-elevated: oklch(0.18 0.020 50);
  --bg-card: oklch(0.22 0.025 55);
  --bg-overlay: oklch(0.10 0.015 50 / 0.85);

  /* Brand */
  --accent-primary: oklch(0.62 0.130 55);
  --accent-hover: oklch(0.68 0.135 55);
  --accent-glow: oklch(0.78 0.150 65);
  --surface-warm: oklch(0.85 0.025 60); /* #E0CFC3 logo bg */
  --surface-warm-soft: oklch(0.90 0.020 60);

  /* Text */
  --text-primary: oklch(0.96 0.010 60);
  --text-secondary: oklch(0.82 0.015 55);
  --text-muted: oklch(0.65 0.020 55);
  --text-on-warm: oklch(0.20 0.020 50);

  /* Borders & dividers */
  --border-subtle: oklch(0.30 0.020 50 / 0.4);
  --border-strong: oklch(0.40 0.025 55);
  --border-warm: oklch(0.75 0.030 60);

  /* Gradients (3+ stops) */
  --gradient-aurora: linear-gradient(
    135deg,
    oklch(0.62 0.130 55) 0%,
    oklch(0.78 0.150 65) 35%,
    oklch(0.55 0.110 45) 70%,
    oklch(0.40 0.080 40) 100%
  );
  --gradient-warm-glow: radial-gradient(
    circle at 30% 20%,
    oklch(0.78 0.150 65 / 0.4),
    oklch(0.62 0.130 55 / 0.2) 40%,
    transparent 70%
  );
  --gradient-card-hover: linear-gradient(
    145deg,
    oklch(0.25 0.030 55),
    oklch(0.20 0.025 55) 50%,
    oklch(0.18 0.020 55)
  );

  /* Spacing scale (fluid) */
  --space-xs: clamp(0.5rem, 0.4vw + 0.4rem, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6vw + 0.6rem, 1.25rem);
  --space-md: clamp(1.25rem, 1vw + 1rem, 2rem);
  --space-lg: clamp(2rem, 2.5vw + 1.5rem, 4rem);
  --space-xl: clamp(3.5rem, 5vw + 2rem, 7rem);
  --space-section: clamp(5rem, 8vw + 2rem, 10rem);

  /* Type scale (fluid) */
  --fs-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.7vw + 0.7rem, 1rem);
  --fs-base: clamp(1rem, 0.6vw + 0.8rem, 1.125rem);
  --fs-lg: clamp(1.125rem, 0.8vw + 0.9rem, 1.375rem);
  --fs-xl: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  --fs-2xl: clamp(2rem, 2.5vw + 1.2rem, 3rem);
  --fs-3xl: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);
  --fs-display: clamp(3rem, 8vw + 1rem, 9rem);

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* Easing & duration */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Container */
  --container-max: 1440px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* Z-index */
  --z-grain: 1;
  --z-content: 10;
  --z-header: 80;
  --z-cursor: 90;
  --z-loader: 100;
}

/* Light mode */
[data-theme="light"] {
  --bg-base: oklch(0.85 0.025 60); /* #E0CFC3 */
  --bg-elevated: oklch(0.90 0.020 60);
  --bg-card: oklch(0.94 0.015 60);
  --bg-overlay: oklch(0.85 0.025 60 / 0.85);
  --text-primary: oklch(0.18 0.020 50);
  --text-secondary: oklch(0.30 0.025 50);
  --text-muted: oklch(0.45 0.025 50);
  --border-subtle: oklch(0.55 0.030 55 / 0.4);
  --border-strong: oklch(0.45 0.030 55);
}