/* ============================================================================
   theme.css – Design Tokens (Gold/Yellow Edition)
   Zentrale CSS Custom Properties für das gesamte Design System
   ============================================================================ */

:root {
  /* Native form control + scrollbar theming */
  color-scheme: light;

  /* === Gold Brand Scale – warm, luxurious, premium === */
  --gold-50:  #fffbeb;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;
  --gold-800: #92400e;
  --gold-900: #78350f;
  --gold-950: #451a03;

  /* === Yellow Accent Scale – bright, vibrant, lively === */
  --yellow-50:  #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;

  /* === Warm Neutral Scale (Light, cream-warm) === */
  --neutral-0:   #ffffff;
  --neutral-50:  #fdfbf5;
  --neutral-100: #f8f4ea;
  --neutral-200: #ede4d0;
  --neutral-300: #d6c9a8;
  --neutral-400: #a89878;
  --neutral-500: #7d6f55;
  --neutral-600: #5c5140;
  --neutral-700: #443c30;
  --neutral-800: #2c2519;
  --neutral-900: #1a1408;
  --neutral-950: #0d0a04;

  /* === Semantic (Light) === */
  --color-bg:           var(--neutral-50);
  --color-bg-elevated:  var(--neutral-0);
  --color-bg-muted:     var(--neutral-100);
  --color-bg-subtle:    var(--neutral-100);
  --color-bg-overlay:   rgba(28, 20, 8, 0.45);

  --color-text:         var(--neutral-900);
  --color-text-muted:   var(--neutral-600);
  --color-text-subtle:  var(--neutral-500);
  --color-text-inverse: var(--neutral-0);

  --color-border:        color-mix(in srgb, var(--neutral-300) 70%, transparent);
  --color-border-strong: var(--neutral-300);
  --color-border-focus:  var(--gold-500);

  --color-primary:        var(--gold-600);
  --color-primary-hover:  var(--gold-700);
  --color-primary-active: var(--gold-800);
  --color-primary-soft:   color-mix(in srgb, var(--gold-500) 14%, transparent);
  --color-primary-text:   var(--gold-700);

  --color-info:        #0284c7;
  --color-info-soft:   #e0f2fe;
  --color-info-text:   #0369a1;

  --color-warning:        #d97706;
  --color-warning-soft:   #fef3c7;
  --color-warning-text:   #b45309;

  --color-success:        #16a34a;
  --color-success-soft:   #f0fdf4;
  --color-success-text:   #15803d;

  --color-danger:         #dc2626;
  --color-danger-soft:    #fef2f2;
  --color-danger-text:    #dc2626;
  --color-danger-hover:   #b91c1c;

  /* === Gradients – warm gold → bright yellow === */
  --gradient-primary: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--yellow-400) 0%, var(--yellow-600) 100%);
  --gradient-hero:    radial-gradient(ellipse at top, var(--gold-100), transparent 60%),
                      radial-gradient(ellipse at bottom right, var(--yellow-100), transparent 60%);
  --gradient-shine:   linear-gradient(135deg, var(--gold-400) 0%, var(--yellow-500) 100%);

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  --text-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --text-sm:   clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --text-base: clamp(0.96rem, 0.94rem + 0.10vw, 1.02rem);
  --text-lg:   clamp(1.06rem, 1.04rem + 0.15vw, 1.16rem);
  --text-xl:   clamp(1.18rem, 1.14rem + 0.20vw, 1.32rem);
  --text-2xl:  clamp(1.38rem, 1.32rem + 0.30vw, 1.58rem);
  --text-3xl:  clamp(1.72rem, 1.60rem + 0.50vw, 2.00rem);
  --text-4xl:  clamp(2.10rem, 1.90rem + 0.80vw, 2.55rem);
  --text-5xl:  clamp(2.60rem, 2.20rem + 1.20vw, 3.30rem);
  --text-6xl:  clamp(3.00rem, 2.50rem + 1.80vw, 4.00rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-base:   1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

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

  /* === Spacing (4px base) === */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Radius (larger, more modern) === */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-3xl:  36px;
  --radius-full: 9999px;

  /* === Shadows (warm-tinted for gold theme) === */
  --shadow-xs: 0 1px 2px rgba(120, 53, 15, 0.04);
  --shadow-sm: 0 1px 3px rgba(120, 53, 15, 0.05), 0 1px 2px rgba(120, 53, 15, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(120, 53, 15, 0.08), 0 2px 4px -2px rgba(120, 53, 15, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(120, 53, 15, 0.10), 0 4px 8px -4px rgba(120, 53, 15, 0.05);
  --shadow-xl: 0 24px 40px -8px rgba(120, 53, 15, 0.12), 0 8px 16px -8px rgba(120, 53, 15, 0.06);
  --shadow-2xl: 0 32px 64px -12px rgba(120, 53, 15, 0.18);

  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--gold-500) 25%, transparent);
  --shadow-glow:  0 0 32px color-mix(in srgb, var(--gold-500) 30%, transparent);

  /* === Transitions === */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* === Layout === */
  --header-height:    68px;
  --content-max:      1100px;
  --content-max-wide: 1280px;
  --sidebar-width:    264px;
  --nav-height:       56px;

  /* === Z-Index Scale === */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-popover: 400;
  --z-toast:   500;
  --z-tooltip: 600;
  --z-skiplink: 9999;

  /* === Global smooth color transitions on theme change === */
  --theme-transition: background-color var(--duration-slow) var(--ease-out),
                      color var(--duration-slow) var(--ease-out),
                      border-color var(--duration-slow) var(--ease-out),
                      box-shadow var(--duration-slow) var(--ease-out);
}

/* ============================================================================
   Dark Theme – deep warm cocoa, never pure black
   ============================================================================ */
[data-theme="dark"],
:root.admin-mode {
  color-scheme: dark;

  --color-bg:           #14100a;
  --color-bg-elevated:  #1f1810;
  --color-bg-muted:     #2a2218;
  --color-bg-subtle:    #322820;
  --color-bg-overlay:   rgba(0, 0, 0, 0.7);

  --color-text:         #f5ecd9;
  --color-text-muted:   #b8a987;
  --color-text-subtle:  #7d6f55;
  --color-text-inverse: #14100a;

  --color-border:        color-mix(in srgb, #3a2f1c 80%, transparent);
  --color-border-strong: #4d3f26;
  --color-border-focus:  var(--gold-400);

  --color-primary:        #fbbf24;
  --color-primary-hover:  #fcd34d;
  --color-primary-active: #fde047;
  --color-primary-soft:   color-mix(in srgb, var(--gold-400) 18%, transparent);
  --color-primary-text:   #fcd34d;

  --color-info:        #38bdf8;
  --color-info-soft:   color-mix(in srgb, #38bdf8 16%, transparent);
  --color-info-text:   #7dd3fc;

  --color-warning:        #fbbf24;
  --color-warning-soft:   color-mix(in srgb, #fbbf24 16%, transparent);
  --color-warning-text:   #fcd34d;

  --color-success:        #4ade80;
  --color-success-soft:   color-mix(in srgb, #4ade80 16%, transparent);
  --color-success-text:   #86efac;

  --color-danger:         #f87171;
  --color-danger-soft:    color-mix(in srgb, #f87171 16%, transparent);
  --color-danger-text:    #fca5a5;
  --color-danger-hover:   #fca5a5;

  /* Dark mode shadows: deeper, with warm undertone */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.7), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.8), 0 8px 16px -8px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.9);

  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--gold-400) 30%, transparent);
  --shadow-glow:  0 0 32px color-mix(in srgb, var(--gold-400) 25%, transparent);

  /* Dark mode gradients: warm gold with deep contrast */
  --gradient-primary: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  --gradient-accent:  linear-gradient(135deg, #facc15 0%, #854d0e 100%);
  --gradient-hero:    radial-gradient(ellipse at top, color-mix(in srgb, var(--gold-500) 14%, transparent), transparent 60%),
                      radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--yellow-500) 10%, transparent), transparent 60%);
  --gradient-shine:   linear-gradient(135deg, var(--yellow-300) 0%, var(--gold-500) 100%);
}

/* ============================================================================
   System preference (only when no explicit choice AND not admin)
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(.admin-mode) {
    color-scheme: dark;

    --color-bg:           #14100a;
    --color-bg-elevated:  #1f1810;
    --color-bg-muted:     #2a2218;
    --color-bg-subtle:    #322820;
    --color-bg-overlay:   rgba(0, 0, 0, 0.7);

    --color-text:         #f5ecd9;
    --color-text-muted:   #b8a987;
    --color-text-subtle:  #7d6f55;
    --color-text-inverse: #14100a;

    --color-border:        color-mix(in srgb, #3a2f1c 80%, transparent);
    --color-border-strong: #4d3f26;
    --color-border-focus:  var(--gold-400);

    --color-primary:        #fbbf24;
    --color-primary-hover:  #fcd34d;
    --color-primary-active: #fde047;
    --color-primary-soft:   color-mix(in srgb, var(--gold-400) 18%, transparent);
    --color-primary-text:   #fcd34d;

    --color-info:        #38bdf8;
    --color-info-soft:   color-mix(in srgb, #38bdf8 16%, transparent);
    --color-info-text:   #7dd3fc;

    --color-warning:        #fbbf24;
    --color-warning-soft:   color-mix(in srgb, #fbbf24 16%, transparent);
    --color-warning-text:   #fcd34d;

    --color-success:        #4ade80;
    --color-success-soft:   color-mix(in srgb, #4ade80 16%, transparent);
    --color-success-text:   #86efac;

    --color-danger:         #f87171;
    --color-danger-soft:    color-mix(in srgb, #f87171 16%, transparent);
    --color-danger-text:    #fca5a5;
    --color-danger-hover:   #fca5a5;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.7), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.8), 0 8px 16px -8px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.9);

    --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--gold-400) 30%, transparent);
    --shadow-glow:  0 0 32px color-mix(in srgb, var(--gold-400) 25%, transparent);

    --gradient-primary: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
    --gradient-accent:  linear-gradient(135deg, #facc15 0%, #854d0e 100%);
    --gradient-hero:    radial-gradient(ellipse at top, color-mix(in srgb, var(--gold-500) 14%, transparent), transparent 60%),
                        radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--yellow-500) 10%, transparent), transparent 60%);
    --gradient-shine:   linear-gradient(135deg, var(--yellow-300) 0%, var(--gold-500) 100%);
  }
}

/* ============================================================================
   Accessibility: respect reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition: none;
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}