/* Krafts AI brand tokens — derived from krafts.ai live stylesheet
   Source: --brand-cyan/frost/surf/teal/twilight + Inter type system. */

:root {
  /* Brand — HSL components so we can compose alphas */
  --brand-cyan: 195 78% 88%;
  --brand-frost: 189 81% 75%;
  --brand-surf: 191 100% 42%;
  --brand-teal: 200 100% 36%;
  --brand-twilight: 240 96% 19%;
  --brand-deep: 240 60% 8%;

  /* Light theme surfaces */
  --background: 195 78% 97%;
  --surface: 0 0% 100%;
  --surface-raised: 195 60% 98%;
  --surface-sunken: 195 50% 94%;
  --foreground: 240 96% 12%;
  --foreground-muted: 215 25% 35%;
  --foreground-subtle: 215 20% 50%;
  --border: 195 50% 88%;
  --border-strong: 195 40% 78%;
  --border-accent: 191 100% 42%;
  --input-bg: 0 0% 100%;
  --ring: 191 100% 50%;

  /* Semantic accents */
  --primary: 240 96% 19%;        /* twilight — text/headlines */
  --accent: 191 100% 42%;        /* surf — buttons, links */
  --accent-strong: 200 100% 36%; /* teal — hover */
  --success: 156 72% 36%;
  --warning: 36 95% 50%;
  --danger: 0 70% 55%;

  /* Composed gradients (matches krafts.ai exactly) */
  --gradient-hero: linear-gradient(135deg, hsl(var(--brand-twilight)) 0%, hsl(var(--brand-teal)) 50%, hsl(var(--brand-surf)) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(var(--brand-teal)) 0%, hsl(var(--brand-surf)) 100%);
  --gradient-text: linear-gradient(135deg, hsl(var(--brand-twilight)) 0%, hsl(var(--brand-teal)) 100%);
  --gradient-soft: linear-gradient(135deg, hsl(var(--brand-cyan)) 0%, hsl(var(--brand-frost)) 100%);
  --gradient-aurora: radial-gradient(ellipse 80% 60% at 20% 0%, hsl(var(--brand-frost) / 0.55), transparent 60%),
                     radial-gradient(ellipse 60% 80% at 100% 30%, hsl(var(--brand-surf) / 0.35), transparent 65%),
                     radial-gradient(ellipse 70% 50% at 50% 100%, hsl(var(--brand-twilight) / 0.25), transparent 60%);

  /* Shadows — soft, brand-tinted, real depth */
  --shadow-xs: 0 1px 2px hsl(var(--brand-twilight) / 0.06);
  --shadow-sm: 0 2px 6px -1px hsl(var(--brand-twilight) / 0.08);
  --shadow-md: 0 8px 24px -8px hsl(var(--brand-twilight) / 0.18);
  --shadow-lg: 0 20px 50px -16px hsl(var(--brand-twilight) / 0.28);
  --shadow-glow: 0 12px 40px -12px hsl(var(--brand-surf) / 0.45);
  --shadow-inset: inset 0 1px 0 0 hsl(0 0% 100% / 0.6);

  /* Typography — fluid, deliberately wide range */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Inter', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem);
  --text-hero: clamp(3rem, 2rem + 5vw, 6rem);

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

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

  /* Spacing — section rhythm matters for editorial feel */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --space-section-sm: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

  --container: 1240px;
  --container-narrow: 820px;
  --container-wide: 1440px;

  /* Radii — rounded modern (matches krafts.ai 1rem) */
  --radius-sm: 0.375rem;
  --radius: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 160ms;
  --duration-normal: 280ms;
  --duration-slow: 520ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z layers */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}

/* Dark theme — toggleable via [data-theme="dark"] on <html> */
[data-theme="dark"] {
  --background: 240 60% 8%;
  --surface: 240 50% 12%;
  --surface-raised: 240 45% 15%;
  --surface-sunken: 240 55% 6%;
  --foreground: 195 78% 95%;
  --foreground-muted: 195 30% 70%;
  --foreground-subtle: 195 20% 55%;
  --border: 240 35% 20%;
  --border-strong: 240 30% 28%;
  --input-bg: 240 45% 14%;

  --primary: 191 100% 50%;
  --accent: 191 100% 50%;
  --accent-strong: 189 81% 75%;

  --gradient-hero: linear-gradient(135deg, hsl(var(--brand-deep)) 0%, hsl(var(--brand-twilight)) 45%, hsl(var(--brand-teal)) 100%);
  --gradient-text: linear-gradient(135deg, hsl(var(--brand-frost)) 0%, hsl(var(--brand-surf)) 100%);

  --shadow-md: 0 8px 24px -12px hsl(0 0% 0% / 0.6);
  --shadow-lg: 0 20px 50px -16px hsl(0 0% 0% / 0.7);
  --shadow-glow: 0 12px 40px -12px hsl(var(--brand-surf) / 0.6);
  --shadow-inset: inset 0 1px 0 0 hsl(255 100% 100% / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 60% 8%;
    --surface: 240 50% 12%;
    --surface-raised: 240 45% 15%;
    --surface-sunken: 240 55% 6%;
    --foreground: 195 78% 95%;
    --foreground-muted: 195 30% 70%;
    --foreground-subtle: 195 20% 55%;
    --border: 240 35% 20%;
    --border-strong: 240 30% 28%;
    --input-bg: 240 45% 14%;
    --primary: 191 100% 50%;
    --accent: 191 100% 50%;
    --accent-strong: 189 81% 75%;
    --gradient-hero: linear-gradient(135deg, hsl(var(--brand-deep)) 0%, hsl(var(--brand-twilight)) 45%, hsl(var(--brand-teal)) 100%);
    --gradient-text: linear-gradient(135deg, hsl(var(--brand-frost)) 0%, hsl(var(--brand-surf)) 100%);
    --shadow-md: 0 8px 24px -12px hsl(0 0% 0% / 0.6);
    --shadow-lg: 0 20px 50px -16px hsl(0 0% 0% / 0.7);
    --shadow-glow: 0 12px 40px -12px hsl(var(--brand-surf) / 0.6);
    --shadow-inset: inset 0 1px 0 0 hsl(255 100% 100% / 0.05);
  }
}