/* ═══════════════════════════════════════════════════════════════
   LICHTGRENZE BREMEN e.V. — DESIGN TOKENS (WEBSEITEN-WORKFLOW)
   variables.css
   All CSS custom properties: colors, typography, spacing, radii,
   shadows, transitions, z-indices, and layout constants.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── COLOR PALETTE ─────────────────────────────────────────── */

  /* Primary background (dark sections, brand dark) */
  --color-bg:             #1A1A2E;

  /* Accent (orange) */
  --color-accent:         #E8652B;
  --color-accent-hover:   #D4571F;
  --color-accent-light:   rgba(232, 101, 43, 0.1);
  --color-accent-glow:    rgba(232, 101, 43, 0.15);

  /* Secondary accent (teal) */
  --color-accent-secondary:       #0A8F7F;
  --color-accent-secondary-hover: #077A6C;

  /* Backgrounds & surfaces */
  --color-bg-alt:         #FDF6EC;   /* warm neutral */
  --color-surface:        #F5F5F7;   /* cool neutral */
  --color-bg-white:       #FFFFFF;

  /* Text */
  --color-text:           #2D2D2D;
  --color-text-dim:       #6B7280;

  /* Borders */
  --color-border:         rgba(26, 26, 46, 0.12);
  --color-border-bright:  rgba(26, 26, 46, 0.3);

  /* Button text on accent background */
  --btn-text-on-accent:   #fff;

  /* Semantic / feedback */
  --color-success:        #22C55E;
  --color-error:          #EF4444;
  --color-warning:        #F59E0B;

  /* ── BACKWARD-COMPATIBILITY ALIASES ────────────────────────── */
  --brand-dark:             var(--color-bg);
  --brand-accent:           var(--color-accent);
  --brand-accent-hover:     var(--color-accent-hover);
  --brand-secondary:        var(--color-accent-secondary);
  --brand-secondary-hover:  var(--color-accent-secondary-hover);
  --warm-neutral:           var(--color-bg-alt);
  --cool-neutral:           var(--color-surface);
  --text-primary:           var(--color-text);
  --text-secondary:         var(--color-text-dim);
  --white:                  var(--color-bg-white);

  /* ── TYPOGRAPHY ────────────────────────────────────────────── */
  --font-heading:  'Playfair Display', serif;
  --font-body:     'DM Sans', sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-hero:   clamp(42px, 6.5vw, 76px);
  --fs-h2:     clamp(30px, 4vw, 44px);
  --fs-h3:     clamp(20px, 2.5vw, 26px);
  --fs-body:   17px;
  --fs-small:  14.5px;
  --fs-tiny:   12.5px;

  /* ── SPACING ───────────────────────────────────────────────── */
  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       40px;
  --space-2xl:      64px;
  --space-section:  100px;

  /* ── BORDER RADIUS ─────────────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-full:  100px;

  /* Backward-compat alias */
  --radius:       var(--radius-md);

  /* ── SHADOWS ───────────────────────────────────────────────── */
  --shadow-sm:    0 2px 16px rgba(26, 26, 46, 0.06);
  --shadow-md:    0 12px 40px rgba(26, 26, 46, 0.12);
  --shadow-lg:    0 20px 60px rgba(26, 26, 46, 0.15);
  --shadow-glow:  0 4px 20px rgba(232, 101, 43, 0.35);

  /* Backward-compat aliases */
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-md);

  /* ── TRANSITIONS ───────────────────────────────────────────── */
  --transition-fast:  0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition:       0.3s  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:  0.5s  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── LAYOUT CONSTANTS ──────────────────────────────────────── */
  --max-width:       1200px;
  --header-height:   72px;

  /* ── Z-INDEX SCALE ─────────────────────────────────────────── */
  --z-base:          1;
  --z-header:        1000;
  --z-mobile-nav:    999;
  --z-modal:         1100;
  --z-cookie-banner: 1200;
}