/* ============================================
   DESIGN TOKENS – Open Platform
   Premium Obsidian, Luxury Warm Sand & Champagne Gold
   Usability, Contrast & Semantic Enhancements
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Primary Brand Hue (Deep Walnut / Dark Wood - Not orange) ── */
  --primary: hsl(22, 25%, 22%);
  --primary-light: hsl(22, 20%, 35%);
  --primary-dark: hsl(22, 35%, 12%);
  --primary-glow: hsla(22, 25%, 22%, 0.25);
  --primary-subtle: hsla(22, 25%, 22%, 0.08);

  /* ── Secondary / Semantic Hues (Warm Caramel / Sand) ── */
  --secondary: hsl(35, 40%, 42%);       
  --secondary-light: hsl(35, 45%, 52%);
  --secondary-glow: hsla(35, 40%, 42%, 0.25);
  --secondary-subtle: hsla(35, 40%, 42%, 0.08);

  /* ── Velvet Surfaces (White Glass over Rich Background) ── */
  --surface-0: hsl(35, 30%, 97%);        
  --surface-1: hsla(0, 0%, 100%, 0.55);  
  --surface-2: hsla(0, 0%, 100%, 0.75);  
  --surface-3: hsla(0, 0%, 100%, 0.9);   
  --surface-4: hsla(24, 40%, 20%, 0.08); 

  /* ── Text Hues (Deep Dark Wood - dunkles Holzbraun) ── */
  --text-primary: hsl(22, 20%, 15%);     /* Sehr dunkles Holzbraun, nicht orangig */
  --text-secondary: hsl(22, 15%, 32%);   /* Abgestuftes dunkles Holz */
  --text-tertiary: hsl(22, 10%, 45%);    
  --text-inverse: hsl(0, 0%, 100%);      

  /* ── Semantic Hues ── */
  --danger: hsl(355, 75%, 45%);
  --danger-light: hsl(355, 80%, 55%);
  --warning: hsl(38, 90%, 48%);
  --info: hsl(205, 70%, 48%);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, hsl(28, 45%, 32%), hsl(35, 50%, 46%));
  --gradient-accent: linear-gradient(135deg, hsl(28, 45%, 32%), hsl(35, 55%, 56%));
  
  /* Helle, leuchtende Farben für die Hintergrund-Blobs (Sunrise / Warm Glow) */
  --gradient-mesh-1: hsl(30, 85%, 75%);
  --gradient-mesh-2: hsl(45, 90%, 75%);
  --gradient-mesh-3: hsl(15, 85%, 80%);

  /* ── Typography (Slightly downscaled for a sleeker, modern tech feel) ── */
  --font-sans: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs: 0.72rem;                      /* 11.5px (Crisp microtext) */
  --fs-sm: 0.825rem;                     /* 13.2px (Crisp subtext) */
  --fs-base: 0.95rem;                    /* 15.2px (Highly readable body text) */
  --fs-lg: 1.08rem;                      /* 17.3px */
  --fs-xl: 1.2rem;                       /* 19.2px */
  --fs-2xl: 1.4rem;                      /* 22.4px */
  --fs-3xl: 1.75rem;                     /* 28px */
  --fs-4xl: 2.1rem;                      /* 33.6px */
  --fs-5xl: 2.85rem;                     /* 45.6px */
  --fs-6xl: 3.5rem;                      /* 56px */
  --fs-hero: clamp(2.3rem, 6vw, 4.4rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.04em;                     /* Slightly wider spacing for modern micro-layout */

  /* ── Spacing ── */
  --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-24: 6rem;

  /* ── Borders ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --border-subtle: 1px solid hsla(0, 0%, 100%, 0.35); /* Bright white thin crystal edge! */
  --border-medium: 1px solid hsla(0, 0%, 100%, 0.5);

  /* ── Shadows & Glows ── */
  --shadow-sm: 0 1px 2px hsla(24, 40%, 20%, 0.06);
  --shadow-md: 0 8px 24px -4px hsla(24, 40%, 20%, 0.1);
  --shadow-lg: 0 16px 40px -8px hsla(24, 40%, 20%, 0.15);
  --shadow-xl: 0 24px 60px -12px hsla(24, 40%, 20%, 0.2);
  --shadow-glow: 0 0 40px var(--primary-glow);
  --shadow-glow-secondary: 0 0 40px var(--secondary-glow);

  /* ── High-End Glassmorphism (Intensified Blur & Contrast) ── */
  --glass-bg: hsla(0, 0%, 100%, 0.65); /* Ultra-Premium Bright White Crystal-Glass Base */
  --glass-border: hsla(0, 0%, 100%, 0.9); /* Brilliant White Light edge! */
  --glass-blur: 32px;
  --glass-shadow: 0 12px 40px 0 hsla(24, 40%, 15%, 0.12), inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.8);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Z-Index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Layout ── */
  --max-width: 1200px;
  --max-width-narrow: 640px;
  --max-width-chat: 900px;
  --header-height: 72px;
}