/**
 * Timelapse Design System — CSS Custom Properties
 *
 * Consolidated from all 21 code snippets.
 * Single source of truth for colors, typography, spacing, animations.
 */

:root {
    /* ── Colors: Primary ── */
    --tl-neon: #00ff66;
    --tl-neon-hover: #00cc52;
    --tl-neon-rgb: 0, 255, 102;
    --tl-white: #ffffff;
    --tl-black: #000000;

    /* ── Colors: Backgrounds ── */
    --tl-bg: #0a0a0a;
    --tl-bg-dark: #050505;
    --tl-bg-base: #121212;
    --tl-surface: #1e1e1e;
    --tl-surface-hover: #2a2a2a;

    /* ── Colors: Special ── */
    --tl-gold: #FFD700;
    --tl-gold-dark: #C09000;
    --tl-gold-grad: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #C09000 100%);
    --tl-red: #ff3b30;
    --tl-red-light: #ff4d4d;
    --tl-green-tag: #1ed760;
    --tl-green-tag-bg: rgba(30, 215, 96, 0.15);

    /* ── Colors: Grays ── */
    --tl-gray-100: #e0e0e0;
    --tl-gray-200: #cccccc;
    --tl-gray-300: #bbbbbb;
    --tl-gray-400: #aaaaaa;
    --tl-gray-500: #888888;
    --tl-gray-600: #666666;
    --tl-gray-700: #555555;
    --tl-gray-800: #444444;
    --tl-gray-900: #222222;
    --tl-gray-950: #1a1a1a;

    /* ── Colors: Glass / Transparency ── */
    --tl-glass-bg: rgba(10, 10, 10, 0.65);
    --tl-glass-bg-strong: rgba(10, 10, 10, 0.85);
    --tl-glass-border: rgba(255, 255, 255, 0.15);
    --tl-glass-border-subtle: rgba(255, 255, 255, 0.12);
    --tl-glass-border-faint: rgba(255, 255, 255, 0.08);
    --tl-hover-bg: rgba(255, 255, 255, 0.05);
    --tl-hover-bg-strong: rgba(255, 255, 255, 0.1);
    --tl-divider: rgba(255, 255, 255, 0.08);

    /* ── Typography: Fonts ── */
    --tl-font-primary: 'Helvetica Now Display', Helvetica, Arial, sans-serif;
    --tl-font-secondary: 'Monument Extended', sans-serif;

    /* ── Typography: Sizes ── */
    --tl-text-hero: clamp(42px, 7vw, 100px);
    --tl-text-h1: clamp(32px, 5vw, 64px);
    --tl-text-h2: clamp(24px, 4vw, 48px);
    --tl-text-h3: 1.5rem;
    --tl-text-h4: 1.25rem;
    --tl-text-body: 1rem;
    --tl-text-small: 0.875rem;
    --tl-text-xs: 0.75rem;
    --tl-text-xxs: 0.625rem;

    /* ── Typography: Weights ── */
    --tl-weight-regular: 400;
    --tl-weight-medium: 500;
    --tl-weight-semibold: 600;
    --tl-weight-bold: 700;
    --tl-weight-extrabold: 800;
    --tl-weight-black: 900;

    /* ── Typography: Line Heights ── */
    --tl-leading-tight: 0.95;
    --tl-leading-snug: 1.1;
    --tl-leading-normal: 1.4;
    --tl-leading-relaxed: 1.6;

    /* ── Typography: Letter Spacing ── */
    --tl-tracking-tight: -0.02em;
    --tl-tracking-normal: 0;
    --tl-tracking-wide: 0.5px;
    --tl-tracking-wider: 1px;
    --tl-tracking-widest: 2px;

    /* ── Spacing ── */
    --tl-space-xs: 4px;
    --tl-space-sm: 8px;
    --tl-space-md: 16px;
    --tl-space-lg: 24px;
    --tl-space-xl: 32px;
    --tl-space-2xl: 48px;
    --tl-space-3xl: 64px;
    --tl-space-4xl: 80px;

    /* ── Border Radius ── */
    --tl-radius-sm: 8px;
    --tl-radius-md: 12px;
    --tl-radius-lg: 16px;
    --tl-radius-xl: 24px;
    --tl-radius-pill: 50px;
    --tl-radius-circle: 50%;

    /* ── Shadows ── */
    --tl-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.3);
    --tl-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --tl-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.8);
    --tl-shadow-neon: 0 0 15px rgba(var(--tl-neon-rgb), 0.6);
    --tl-shadow-neon-soft: 0 0 15px rgba(var(--tl-neon-rgb), 0.4);
    --tl-shadow-neon-btn: 0 8px 25px rgba(var(--tl-neon-rgb), 0.5);
    --tl-shadow-glow: 0 0 25px rgba(255, 255, 255, 0.5);
    --tl-shadow-gold: 0 0 15px rgba(255, 215, 0, 0.3);

    /* ── Transitions ── */
    --tl-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --tl-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tl-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --tl-ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --tl-duration-fast: 0.2s;
    --tl-duration-normal: 0.3s;
    --tl-duration-slow: 0.5s;
    --tl-transition-default: all 0.3s var(--tl-ease-out);
    --tl-transition-fast: all 0.2s ease-out;

    /* ── Z-Index Scale ── */
    --tl-z-base: 1;
    --tl-z-content: 2;
    --tl-z-carousel-nav: 100;
    --tl-z-tooltip: 999;
    --tl-z-header: 5000;
    --tl-z-backdrop: 9998;
    --tl-z-sidebar: 9999;
    --tl-z-menu-trigger: 10000;
    --tl-z-sticky-bar: 99990;
    --tl-z-modal: 99999999;

    /* ── Layout ── */
    --tl-container-max: 1120px;
    --tl-container-padding: 20px;
    --tl-sidebar-width: 40vw;
    --tl-sidebar-width-mobile: 90vw;
}