/* ============================================================
   tokens.css — kapy.ch v2 Design System
   Per spec/v2/02-DESIGN-SYSTEM.md
   Welt A — Neutral-Premium-Indigo
   Light = default, Dark = prefers-color-scheme + [data-theme="dark"]
   ============================================================ */

:root {
  /* ---------- COLOR · RAW SCALES (oklch) ---------- */

  /* Brand — Deep Indigo (Primary) */
  --brand-50: oklch(97.5% 0.012 270);
  --brand-100: oklch(94% 0.028 270);
  --brand-200: oklch(88% 0.058 270);
  --brand-300: oklch(80% 0.105 270);
  --brand-400: oklch(68% 0.165 270);
  --brand-500: oklch(52% 0.22 270); /* locked: Hauptmarke */
  --brand-600: oklch(45% 0.215 270);
  --brand-700: oklch(38% 0.19 270);
  --brand-800: oklch(30% 0.15 270);
  --brand-900: oklch(22% 0.105 270);
  --brand-950: oklch(14% 0.065 270);

  /* Accent — Cyan-Spotlight (nur Aurora/Glow/Hover-Spot) */
  --accent-50: oklch(97.5% 0.018 210);
  --accent-100: oklch(93.5% 0.04 210);
  --accent-200: oklch(88% 0.075 210);
  --accent-300: oklch(82% 0.115 210);
  --accent-400: oklch(72% 0.155 210); /* locked: Cyan-Spotlight */
  --accent-500: oklch(62% 0.15 210);
  --accent-600: oklch(52% 0.135 210);
  --accent-700: oklch(42% 0.115 210);
  --accent-800: oklch(32% 0.09 210);
  --accent-900: oklch(22% 0.06 210);
  --accent-950: oklch(14% 0.038 210);

  /* Neutral — Off-Black bis Snow, 270-Hue-shifted, kühl */
  --neutral-50: oklch(98.5% 0.002 270); /* locked: Snow */
  --neutral-100: oklch(96.5% 0.004 270);
  --neutral-200: oklch(92% 0.006 270);
  --neutral-300: oklch(85% 0.008 270);
  --neutral-400: oklch(72% 0.012 270);
  --neutral-500: oklch(58% 0.014 270);
  --neutral-600: oklch(46% 0.016 270);
  --neutral-700: oklch(36% 0.018 270);
  --neutral-800: oklch(26% 0.02 270);
  --neutral-900: oklch(15% 0.022 270); /* locked: Off-Black */
  --neutral-950: oklch(9% 0.018 270);

  /* Status — Success / Warning / Danger / Info */
  --success-50: oklch(96% 0.025 155);
  --success-500: oklch(55% 0.14 155);
  --success-900: oklch(24% 0.075 155);

  --warning-50: oklch(96.5% 0.04 80);
  --warning-500: oklch(72% 0.15 80);
  --warning-900: oklch(32% 0.085 80);

  --danger-50: oklch(96% 0.025 25);
  --danger-500: oklch(58% 0.205 25);
  --danger-900: oklch(28% 0.11 25);

  --info-50: oklch(96.5% 0.025 240);
  --info-500: oklch(60% 0.155 240);
  --info-900: oklch(28% 0.09 240);

  /* ---------- COLOR · SEMANTIC (Light Default) ---------- */

  --bg-canvas: var(--neutral-50);
  --bg-surface: oklch(100% 0 0);
  --bg-elevated: oklch(99.5% 0.002 270);
  --bg-overlay: oklch(15% 0.022 270 / 0.45);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-600); /* bumped from -500 for WCAG AA 4.5:1 on --bg-canvas */
  --text-on-brand: var(--neutral-50);
  --text-disabled: var(--neutral-400);
  --text-link: var(--brand-600);

  --border-subtle: oklch(92% 0.006 270);
  --border-strong: oklch(85% 0.008 270);
  --border-focus: var(--brand-500);
  --border-error: var(--danger-500);

  --action-primary-bg: var(--brand-500);
  --action-primary-hover: var(--brand-600);
  --action-primary-active: var(--brand-700);
  --action-primary-text: var(--neutral-50);

  --action-secondary-bg: oklch(100% 0 0);
  --action-secondary-hover: var(--neutral-100);
  --action-secondary-text: var(--neutral-900);
  --action-secondary-border: var(--border-strong);

  --action-ghost-bg: transparent;
  --action-ghost-hover: oklch(52% 0.22 270 / 0.08);
  --action-ghost-text: var(--brand-700);

  --action-destructive-bg: var(--danger-500);
  --action-destructive-hover: oklch(50% 0.205 25);

  /* ---------- TYPOGRAPHY ---------- */

  --font-sans:
    'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Fluid type scale (clamp) */
  --fs-display-2xl: clamp(3.5rem, 6vw + 1rem, 6.5rem); /* 56-104px */
  --fs-display-xl: clamp(3rem, 5vw + 1rem, 5.25rem); /* 48-84px */
  --fs-display-lg: clamp(2.5rem, 4vw + 1rem, 4.5rem); /* 40-72px */

  --fs-headline-xl: clamp(2rem, 2.5vw + 1rem, 3rem); /* 32-48px H1 */
  --fs-headline-lg: clamp(1.625rem, 1.5vw + 1rem, 2.25rem); /* 26-36px H2 */
  --fs-headline-md: clamp(1.375rem, 1vw + 1rem, 1.75rem); /* 22-28px H3 */
  --fs-headline-sm: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* 18-22px H4 */

  --fs-body-xl: clamp(1.125rem, 0.25vw + 1rem, 1.25rem); /* 18-20px Lead */
  --fs-body-lg: 1.0625rem;
  --fs-body-md: 1rem; /* 16px default */
  --fs-body-sm: 0.9375rem;
  --fs-body-xs: 0.875rem;

  --fs-caption: 0.8125rem;
  --fs-overline: 0.75rem;
  --fs-micro: 0.6875rem;

  --lh-display: 1.02;
  --ls-display: -0.025em;
  --lh-headline: 1.15;
  --ls-headline: -0.015em;
  --lh-body-loose: 1.65;
  --lh-body: 1.55;
  --lh-body-tight: 1.35;
  --ls-body: 0;
  --lh-mono: 1.5;
  --lh-caps: 1.25;
  --ls-caps: 0.08em;

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

  /* ---------- SPACING (4px base, geometric) ---------- */

  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */
  --space-9: 6rem; /* 96 */
  --space-10: 8rem; /* 128 */

  /* ---------- RADII ---------- */

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------- SHADOWS ---------- */

  --shadow-xs: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 1px 2px -1px oklch(15% 0.022 270 / 0.06);

  --shadow-sm:
    0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 1px 3px -1px oklch(15% 0.022 270 / 0.08),
    0 2px 6px -2px oklch(15% 0.022 270 / 0.06);

  --shadow-md:
    0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 4px 12px -2px oklch(15% 0.022 270 / 0.1),
    0 8px 24px -4px oklch(15% 0.022 270 / 0.08);

  --shadow-lg:
    0 1px 0 oklch(100% 0 0 / 0.1) inset, 0 8px 20px -4px oklch(15% 0.022 270 / 0.14),
    0 16px 40px -8px oklch(15% 0.022 270 / 0.1);

  --shadow-xl:
    0 1px 0 oklch(100% 0 0 / 0.12) inset, 0 16px 32px -8px oklch(15% 0.022 270 / 0.2),
    0 32px 64px -16px oklch(15% 0.022 270 / 0.14);

  --glow-brand:
    0 0 0 1px oklch(52% 0.22 270 / 0.2), 0 8px 24px -4px oklch(52% 0.22 270 / 0.35),
    0 0 60px -8px oklch(52% 0.22 270 / 0.3);

  --glow-accent:
    0 0 0 1px oklch(72% 0.155 210 / 0.25), 0 8px 32px -4px oklch(72% 0.155 210 / 0.4),
    0 0 80px -12px oklch(72% 0.155 210 / 0.35);

  /* ---------- MOTION ---------- */

  --ease-linear: linear;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-instant: 50ms;
  --dur-fast: 120ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;
  --dur-deliberate: 600ms;
  --dur-ambient: 30s;

  /* ---------- Z-INDEX ---------- */

  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-popover: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-nav-pill: 60;
  --z-fab: 70;
  --z-debug: 100;

  /* ---------- CONTAINERS ---------- */

  --cq-narrow: 640px;
  --cq-default: 960px;
  --cq-prose: 720px;
  --cq-wide: 1200px;
  --container-max: 1440px;

  /* ---------- FOCUS-RING (A11y) ---------- */
  --ring-focus: 0 0 0 3px oklch(52% 0.22 270 / 0.4);
  --ring-error: 0 0 0 3px oklch(58% 0.205 25 / 0.3);
}

/* ============================================================
   DARK MODE — Auto via OS, Override via [data-theme="dark"]
   Pragmatic: kein Theme-Animator, kein Crossfade. Instant swap.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-canvas: oklch(11% 0.02 270);
    --bg-surface: oklch(15% 0.022 270);
    --bg-elevated: oklch(19% 0.024 270);
    --bg-overlay: oklch(5% 0.015 270 / 0.65);

    --text-primary: oklch(97% 0.004 270);
    --text-secondary: oklch(85% 0.006 270);
    --text-tertiary: oklch(65% 0.01 270);
    --text-on-brand: oklch(98% 0.002 270);
    --text-disabled: oklch(45% 0.014 270);
    --text-link: var(--brand-400);

    --border-subtle: oklch(24% 0.022 270);
    --border-strong: oklch(32% 0.024 270);
    --border-focus: var(--brand-400);

    --action-primary-bg: var(--brand-500);
    --action-primary-hover: var(--brand-400);
    --action-primary-active: var(--brand-300);

    --action-secondary-bg: oklch(19% 0.024 270);
    --action-secondary-hover: oklch(24% 0.026 270);
    --action-secondary-text: oklch(95% 0.004 270);
    --action-secondary-border: oklch(28% 0.024 270);

    --action-ghost-text: var(--brand-300); /* lighter for dark-mode contrast (WCAG AA) */
    --action-ghost-hover: oklch(62% 0.215 270 / 0.14);

    --shadow-sm: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 2px 8px -2px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 8px 24px -4px oklch(0% 0 0 / 0.5);
    --shadow-xl: 0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 24px 48px -8px oklch(0% 0 0 / 0.6);

    --ring-focus: 0 0 0 3px oklch(68% 0.165 270 / 0.5);
  }
}

[data-theme='dark'] {
  --bg-canvas: oklch(11% 0.02 270);
  --bg-surface: oklch(15% 0.022 270);
  --bg-elevated: oklch(19% 0.024 270);
  --bg-overlay: oklch(5% 0.015 270 / 0.65);

  --text-primary: oklch(97% 0.004 270);
  --text-secondary: oklch(85% 0.006 270);
  --text-tertiary: oklch(65% 0.01 270);
  --text-on-brand: oklch(98% 0.002 270);
  --text-disabled: oklch(45% 0.014 270);
  --text-link: var(--brand-400);

  --border-subtle: oklch(24% 0.022 270);
  --border-strong: oklch(32% 0.024 270);
  --border-focus: var(--brand-400);

  --action-primary-bg: var(--brand-500);
  --action-primary-hover: var(--brand-400);
  --action-primary-active: var(--brand-300);

  --action-secondary-bg: oklch(19% 0.024 270);
  --action-secondary-hover: oklch(24% 0.026 270);
  --action-secondary-text: oklch(95% 0.004 270);
  --action-secondary-border: oklch(28% 0.024 270);

  --action-ghost-text: var(--brand-300); /* lighter for dark-mode contrast (WCAG AA) */
  --action-ghost-hover: oklch(62% 0.215 270 / 0.14);

  --shadow-sm: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 2px 8px -2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 8px 24px -4px oklch(0% 0 0 / 0.5);
  --shadow-xl: 0 1px 0 oklch(100% 0 0 / 0.08) inset, 0 24px 48px -8px oklch(0% 0 0 / 0.6);

  --ring-focus: 0 0 0 3px oklch(68% 0.165 270 / 0.5);
}

/* ============================================================
   prefers-reduced-motion — Pflicht
   Volle Implementation kommt mit Components (Task 4+).
   Hier: globaler Override für alle Animationen.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}