/* ═══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES - Automatisch generiert aus Pencil.dev
   ═══════════════════════════════════════════════════════════════════════════
   
   ⚠️  WICHTIG: Diese Datei wird automatisch generiert!
   
   WORKFLOW:
   1. Design in Pencil.dev ändern
   2. In Claude Code eingeben: "Sync Pencil variables to CSS"
   3. Diese Datei wird automatisch überschrieben
   
   MANUELL BEARBEITEN: css/variables.custom.css (für zusätzliche Variablen)
   
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     FARBEN (Light Mode)
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Basis-Farben */
  --black: #000000;
  --white: #FFFFFF;
  
  /* Primär & Sekundär */
  --primary: #FF8400;
  --primary-foreground: #111111;
  --secondary: #E7E8E5;
  --secondary-foreground: #111111;
  
  /* Hintergrund & Vordergrund */
  --background: #F2F3F0;
  --foreground: #111111;
  
  /* Karten */
  --card: #FFFFFF;
  --card-foreground: #111111;
  
  /* Muted (gedämpft) */
  --muted: #F2F3F0;
  --muted-foreground: #666666;
  
  /* Accent */
  --accent: #F2F3F0;
  --accent-foreground: #111111;
  
  /* Popover */
  --popover: #FFFFFF;
  --popover-foreground: #111111;
  
  /* Border & Input */
  --border: #CBCCC9;
  --input: #CBCCC9;
  --ring: #666666;
  
  /* Destructive */
  --destructive: #D93C15;
  
  /* Status-Farben (Info, Success, Warning, Error) */
  --color-info: #DFDFE6;
  --color-info-foreground: #000066;
  
  --color-success: #DFE6E1;
  --color-success-foreground: #004D1A;
  
  --color-warning: #E9E3D8;
  --color-warning-foreground: #804200;
  
  --color-error: #E5DCDA;
  --color-error-foreground: #8C1C00;
  
  /* Sidebar */
  --sidebar: #E7E8E5;
  --sidebar-foreground: #666666;
  --sidebar-primary: #18181b;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #CBCCC9;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: #CBCCC9;
  --sidebar-ring: #71717a;
  
  /* ═══════════════════════════════════════════════════════════════════════
     TYPOGRAFIE
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Font Families */
  --font-primary: 'JetBrains Mono', monospace;
  --font-secondary: 'Geist', sans-serif;
  
  /* Fallback für Fraunces (wird im Design verwendet) */
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  
  /* ═══════════════════════════════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════════════════════════════ */
  
  --radius-none: 0px;
  --radius-m: 16px;
  --radius-pill: 999px;
  
  /* ═══════════════════════════════════════════════════════════════════════
     ZUSÄTZLICHE VARIABLEN (Kompatibilität mit bestehendem Code)
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Legacy-Farben (für bestehenden Code) */
  --color-dark-gray: #2D2D2D;
  --color-green: #7C9082;
  --color-beige: #FAF8F5;
  
  /* Text Farben */
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-light: var(--white);
  
  /* Background Farben */
  --bg-primary: var(--background);
  --bg-secondary: var(--card);
  --bg-dark: var(--color-dark-gray);
  --bg-green: var(--color-green);
  
  /* Font Sizes */
  --fs-10: 0.625rem;   /* 10px */
  --fs-12: 0.75rem;    /* 12px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-15: 0.9375rem;  /* 15px */
  --fs-16: 1rem;       /* 16px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-32: 2rem;       /* 32px */
  --fs-36: 2.25rem;    /* 36px */
  --fs-40: 2.5rem;     /* 40px */
  --fs-42: 2.625rem;   /* 42px */
  --fs-48: 3rem;       /* 48px */
  --fs-56: 3.5rem;     /* 56px */
  
  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.8;
  
  /* Letter Spacing */
  --ls-tight: -0.5px;
  --ls-tight-em: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.05em;
  
  /* Spacing */
  --space-8: 0.5rem;     /* 8px */
  --space-12: 0.75rem;   /* 12px */
  --space-16: 1rem;      /* 16px */
  --space-20: 1.25rem;   /* 20px */
  --space-24: 1.5rem;    /* 24px */
  --space-28: 1.75rem;   /* 28px */
  --space-32: 2rem;      /* 32px */
  --space-40: 2.5rem;    /* 40px */
  --space-48: 3rem;      /* 48px */
  --space-60: 3.75rem;   /* 60px */
  --space-64: 4rem;      /* 64px */
  --space-80: 5rem;      /* 80px */
  --space-120: 7.5rem;   /* 120px */
  
  /* Padding Presets */
  --padding-section: var(--space-80) var(--space-120);
  --padding-section-mobile: var(--space-48) var(--space-24);
  
  /* Borders */
  --border-radius-sm: 16px;
  --border-radius-md: 20px;
  --border-radius-lg: 24px;
  --border-radius-pill: 999px;
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  
  /* Layout */
  --max-width-desktop: 1440px;
  --max-width-mobile: 390px;
  --max-width-content: 1200px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* Z-Index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Basis-Farben bleiben gleich */
    /* --black und --white bleiben unverändert */
    
    /* Primär & Sekundär */
    --primary: #FF8400;
    --primary-foreground: #111111;
    --secondary: #2E2E2E;
    --secondary-foreground: #FFFFFF;
    
    /* Hintergrund & Vordergrund */
    --background: #111111;
    --foreground: #FFFFFF;
    
    /* Karten */
    --card: #1A1A1A;
    --card-foreground: #FFFFFF;
    
    /* Muted (gedämpft) */
    --muted: #2E2E2E;
    --muted-foreground: #B8B9B6;
    
    /* Accent */
    --accent: #111111;
    --accent-foreground: #F2F3F0;
    
    /* Popover */
    --popover: #1A1A1A;
    --popover-foreground: #FFFFFF;
    
    /* Border & Input */
    --border: #2E2E2E;
    --input: #2E2E2E;
    --ring: #666666;
    
    /* Destructive */
    --destructive: #FF5C33;
    
    /* Status-Farben (Info, Success, Warning, Error) */
    --color-info: #222229;
    --color-info-foreground: #B2B2FF;
    
    --color-success: #222924;
    --color-success-foreground: #B6FFCE;
    
    --color-warning: #291C0F;
    --color-warning-foreground: #FF8400;
    
    --color-error: #24100B;
    --color-error-foreground: #FF5C33;
    
    /* Sidebar */
    --sidebar: #18181b;
    --sidebar-foreground: #fafafa;
    --sidebar-primary: #18181b;
    --sidebar-primary-foreground: #fafafa;
    --sidebar-accent: #2a2a30;
    --sidebar-accent-foreground: #fafafa;
    --sidebar-border: #ffffff1a;
    --sidebar-ring: #71717a;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HINWEIS: Für zusätzliche benutzerdefinierte Variablen
   Datei erstellen: css/variables.custom.css
   ═══════════════════════════════════════════════════════════════════════════ */