/* ==========================================================================
   Werkelkeller Design Tokens — CSS Custom Properties
   Single Source of Truth for all Werkelkeller projects.
   Dark Mode is the default. Light Mode via [data-theme="light"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoints (CSS cannot store breakpoints as variables — reference only)
   --------------------------------------------------------------------------
   --wk-screen-sm:   640px
   --wk-screen-md:   768px
   --wk-screen-lg:  1024px
   --wk-screen-xl:  1280px
   --wk-screen-2xl: 1536px
   -------------------------------------------------------------------------- */

:root {
  /* ========================================================================
     PRIMITIVE TOKENS — Raw values, not theme-dependent
     ======================================================================== */

  /* --- Primary: Electric Violet --- */
  --wk-color-primary-50: #f5f0ff;
  --wk-color-primary-100: #ede5ff;
  --wk-color-primary-200: #d4c4ff;
  --wk-color-primary-300: #b89dff;
  --wk-color-primary-400: #9b70ff;
  --wk-color-primary-500: #8b5cf6;
  --wk-color-primary-600: #7c3aed;
  --wk-color-primary-700: #6d28d9;
  --wk-color-primary-800: #5b21b6;
  --wk-color-primary-900: #4c1d95;
  --wk-color-primary-950: #2e1065;

  /* --- Secondary: Neon Green --- */
  --wk-color-secondary-50: #ecfdf5;
  --wk-color-secondary-100: #d1fae5;
  --wk-color-secondary-200: #a7f3d0;
  --wk-color-secondary-300: #6ee7b7;
  --wk-color-secondary-400: #34d399;
  --wk-color-secondary-500: #10b981;
  --wk-color-secondary-600: #059669;
  --wk-color-secondary-700: #047857;
  --wk-color-secondary-800: #065f46;
  --wk-color-secondary-900: #064e3b;
  --wk-color-secondary-950: #022c22;

  /* --- Accent: Hot Magenta --- */
  --wk-color-accent-50: #fdf2f8;
  --wk-color-accent-100: #fce7f3;
  --wk-color-accent-200: #fbcfe8;
  --wk-color-accent-300: #f9a8d4;
  --wk-color-accent-400: #f472b6;
  --wk-color-accent-500: #ec4899;
  --wk-color-accent-600: #db2777;
  --wk-color-accent-700: #be185d;
  --wk-color-accent-800: #9d174d;
  --wk-color-accent-900: #831843;
  --wk-color-accent-950: #500724;

  /* --- Neutral: Slate --- */
  --wk-color-neutral-50: #f8fafc;
  --wk-color-neutral-100: #f1f5f9;
  --wk-color-neutral-150: #e8edf3;
  --wk-color-neutral-200: #e2e8f0;
  --wk-color-neutral-300: #cbd5e1;
  --wk-color-neutral-400: #94a3b8;
  --wk-color-neutral-500: #64748b;
  --wk-color-neutral-600: #475569;
  --wk-color-neutral-700: #334155;
  --wk-color-neutral-800: #1e293b;
  --wk-color-neutral-850: #172033;
  --wk-color-neutral-900: #0f172a;
  --wk-color-neutral-950: #020617;

  /* --- Semantic: Success (Emerald) --- */
  --wk-color-success-50: #ecfdf5;
  --wk-color-success-100: #d1fae5;
  --wk-color-success-500: #10b981;
  --wk-color-success-600: #059669;
  --wk-color-success-900: #064e3b;
  --wk-color-success-950: #022c22;

  /* --- Semantic: Warning (Amber) --- */
  --wk-color-warning-50: #fffbeb;
  --wk-color-warning-100: #fef3c7;
  --wk-color-warning-500: #f59e0b;
  --wk-color-warning-600: #d97706;
  --wk-color-warning-900: #78350f;
  --wk-color-warning-950: #451a03;

  /* --- Semantic: Error (Rose) --- */
  --wk-color-error-50: #fff1f2;
  --wk-color-error-100: #ffe4e6;
  --wk-color-error-500: #f43f5e;
  --wk-color-error-600: #e11d48;
  --wk-color-error-900: #881337;
  --wk-color-error-950: #4c0519;

  /* --- Semantic: Info (Sky) --- */
  --wk-color-info-50: #f0f9ff;
  --wk-color-info-100: #e0f2fe;
  --wk-color-info-500: #0ea5e9;
  --wk-color-info-600: #0284c7;
  --wk-color-info-900: #0c4a6e;
  --wk-color-info-950: #082f49;

  /* --- Neon Glow Colors --- */
  --wk-color-glow-violet: #a78bfa;
  --wk-color-glow-green: #34d399;
  --wk-color-glow-magenta: #f472b6;
  --wk-color-glow-cyan: #22d3ee;

  /* --- Neon Glow Shadows --- */
  --wk-glow-violet: 0 0 20px rgba(167, 139, 250, 0.5);
  --wk-glow-green: 0 0 20px rgba(52, 211, 153, 0.5);
  --wk-glow-magenta: 0 0 20px rgba(244, 114, 182, 0.5);
  --wk-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.5);

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */

  /* --- Font Families --- */
  --wk-font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wk-font-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', monospace;

  /* --- Font Sizes --- */
  --wk-text-xs: 0.75rem;
  --wk-text-sm: 0.875rem;
  --wk-text-base: 1rem;
  --wk-text-lg: 1.125rem;
  --wk-text-xl: 1.25rem;
  --wk-text-2xl: 1.5rem;
  --wk-text-3xl: 1.875rem;
  --wk-text-4xl: 2.25rem;
  --wk-text-5xl: 3rem;
  --wk-text-6xl: 3.75rem;

  /* --- Line Heights --- */
  --wk-leading-xs: 1.5;
  --wk-leading-sm: 1.5;
  --wk-leading-base: 1.625;
  --wk-leading-lg: 1.556;
  --wk-leading-xl: 1.5;
  --wk-leading-2xl: 1.333;
  --wk-leading-3xl: 1.267;
  --wk-leading-4xl: 1.222;
  --wk-leading-5xl: 1.167;
  --wk-leading-6xl: 1.1;

  /* --- Font Weights --- */
  --wk-font-normal: 400;
  --wk-font-medium: 500;
  --wk-font-semibold: 600;
  --wk-font-bold: 700;
  --wk-font-extrabold: 800;

  /* --- Letter Spacing --- */
  --wk-tracking-tighter: -0.02em;
  --wk-tracking-tight: -0.01em;
  --wk-tracking-normal: 0;
  --wk-tracking-wide: 0.025em;
  --wk-tracking-wider: 0.05em;

  /* ========================================================================
     SPACING
     ======================================================================== */

  --wk-space-0: 0px;
  --wk-space-0-5: 2px;
  --wk-space-1: 4px;
  --wk-space-1-5: 6px;
  --wk-space-2: 8px;
  --wk-space-3: 12px;
  --wk-space-4: 16px;
  --wk-space-5: 20px;
  --wk-space-6: 24px;
  --wk-space-8: 32px;
  --wk-space-10: 40px;
  --wk-space-12: 48px;
  --wk-space-16: 64px;
  --wk-space-20: 80px;
  --wk-space-24: 96px;

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */

  --wk-radius-none: 0px;
  --wk-radius-sm: 4px;
  --wk-radius-md: 8px;
  --wk-radius-lg: 12px;
  --wk-radius-xl: 16px;
  --wk-radius-2xl: 24px;
  --wk-radius-full: 9999px;

  /* ========================================================================
     TRANSITIONS
     ======================================================================== */

  --wk-duration-fast: 100ms;
  --wk-duration-normal: 200ms;
  --wk-duration-slow: 300ms;
  --wk-duration-slower: 500ms;

  --wk-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --wk-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --wk-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --wk-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========================================================================
     SEMANTIC TOKENS — Dark Mode (Default)
     ======================================================================== */

  /* --- Backgrounds --- */
  --wk-bg: var(--wk-color-neutral-900);
  --wk-bg-elevated: var(--wk-color-neutral-800);
  --wk-bg-nav: var(--wk-color-neutral-850);
  --wk-bg-overlay: var(--wk-color-neutral-950);
  --wk-bg-code: var(--wk-color-neutral-950);
  --wk-bg-input: var(--wk-color-neutral-800);

  /* --- Text --- */
  --wk-text: var(--wk-color-neutral-50);
  --wk-text-secondary: var(--wk-color-neutral-400);
  --wk-text-muted: var(--wk-color-neutral-500);
  --wk-text-disabled: var(--wk-color-neutral-600);
  --wk-text-inverse: var(--wk-color-neutral-900);

  /* --- Borders --- */
  --wk-border: var(--wk-color-neutral-700);
  --wk-border-muted: var(--wk-color-neutral-800);
  --wk-border-focus: var(--wk-color-primary-500);

  /* --- Interactive --- */
  --wk-link: var(--wk-color-primary-400);
  --wk-link-hover: var(--wk-color-primary-300);

  --wk-btn-primary-bg: var(--wk-color-primary-500);
  --wk-btn-primary-text: var(--wk-color-neutral-50);
  --wk-btn-primary-hover: var(--wk-color-primary-400);
  --wk-btn-primary-active: var(--wk-color-primary-700);

  --wk-btn-secondary-bg: transparent;
  --wk-btn-secondary-text: var(--wk-color-primary-400);
  --wk-btn-secondary-border: var(--wk-color-primary-500);
  --wk-btn-secondary-hover-bg: var(--wk-color-primary-950);
  --wk-btn-secondary-active-bg: var(--wk-color-primary-900);

  --wk-btn-ghost-text: var(--wk-color-neutral-300);
  --wk-btn-ghost-hover-bg: var(--wk-color-neutral-800);
  --wk-btn-ghost-active-bg: var(--wk-color-neutral-700);

  --wk-btn-danger-bg: var(--wk-color-error-600);
  --wk-btn-danger-text: var(--wk-color-neutral-50);
  --wk-btn-danger-hover: var(--wk-color-error-500);
  --wk-btn-danger-active: var(--wk-color-error-900);

  /* --- Elevation (Dark Mode) --- */
  --wk-shadow-0: none;
  --wk-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --wk-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --wk-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6);
  --wk-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.7);

  /* --- Semantic Status --- */
  --wk-success-bg: var(--wk-color-success-950);
  --wk-success-text: var(--wk-color-success-500);
  --wk-success-border: var(--wk-color-success-900);

  --wk-warning-bg: var(--wk-color-warning-950);
  --wk-warning-text: var(--wk-color-warning-500);
  --wk-warning-border: var(--wk-color-warning-900);

  --wk-error-bg: var(--wk-color-error-950);
  --wk-error-text: var(--wk-color-error-500);
  --wk-error-border: var(--wk-color-error-900);

  --wk-info-bg: var(--wk-color-info-950);
  --wk-info-text: var(--wk-color-info-500);
  --wk-info-border: var(--wk-color-info-900);
}

/* ==========================================================================
   LIGHT MODE
   ========================================================================== */

[data-theme="light"] {
  /* --- Backgrounds --- */
  --wk-bg: var(--wk-color-neutral-50);
  --wk-bg-elevated: #ffffff;
  --wk-bg-nav: var(--wk-color-neutral-100);
  --wk-bg-overlay: rgba(0, 0, 0, 0.5);
  --wk-bg-code: var(--wk-color-neutral-100);
  --wk-bg-input: #ffffff;

  /* --- Text --- */
  --wk-text: var(--wk-color-neutral-800);
  --wk-text-secondary: var(--wk-color-neutral-500);
  --wk-text-muted: var(--wk-color-neutral-400);
  --wk-text-disabled: var(--wk-color-neutral-300);
  --wk-text-inverse: var(--wk-color-neutral-50);

  /* --- Borders --- */
  --wk-border: var(--wk-color-neutral-200);
  --wk-border-muted: var(--wk-color-neutral-100);
  --wk-border-focus: var(--wk-color-primary-500);

  /* --- Interactive --- */
  --wk-link: var(--wk-color-primary-600);
  --wk-link-hover: var(--wk-color-primary-700);

  --wk-btn-primary-bg: var(--wk-color-primary-600);
  --wk-btn-primary-text: #ffffff;
  --wk-btn-primary-hover: var(--wk-color-primary-700);
  --wk-btn-primary-active: var(--wk-color-primary-800);

  --wk-btn-secondary-bg: transparent;
  --wk-btn-secondary-text: var(--wk-color-primary-600);
  --wk-btn-secondary-border: var(--wk-color-primary-500);
  --wk-btn-secondary-hover-bg: var(--wk-color-primary-50);
  --wk-btn-secondary-active-bg: var(--wk-color-primary-100);

  --wk-btn-ghost-text: var(--wk-color-neutral-600);
  --wk-btn-ghost-hover-bg: var(--wk-color-neutral-100);
  --wk-btn-ghost-active-bg: var(--wk-color-neutral-200);

  --wk-btn-danger-bg: var(--wk-color-error-600);
  --wk-btn-danger-text: #ffffff;
  --wk-btn-danger-hover: var(--wk-color-error-500);
  --wk-btn-danger-active: var(--wk-color-error-900);

  /* --- Elevation (Light Mode) --- */
  --wk-shadow-0: none;
  --wk-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --wk-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1);
  --wk-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);
  --wk-shadow-4: 0 16px 48px rgba(0, 0, 0, 0.14);

  /* --- Semantic Status --- */
  --wk-success-bg: var(--wk-color-success-50);
  --wk-success-text: var(--wk-color-success-600);
  --wk-success-border: var(--wk-color-success-500);

  --wk-warning-bg: var(--wk-color-warning-50);
  --wk-warning-text: var(--wk-color-warning-600);
  --wk-warning-border: var(--wk-color-warning-500);

  --wk-error-bg: var(--wk-color-error-50);
  --wk-error-text: var(--wk-color-error-600);
  --wk-error-border: var(--wk-color-error-500);

  --wk-info-bg: var(--wk-color-info-50);
  --wk-info-text: var(--wk-color-info-600);
  --wk-info-border: var(--wk-color-info-500);
}

/* ==========================================================================
   NEON GLOW ANIMATION
   ========================================================================== */

@keyframes wk-neon-pulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.85;
    filter: brightness(1.2);
  }
}