/**
 * TWL Design Tokens — single source of truth
 * Load this FIRST before any other CSS.
 */
:root {
    /* ============ SPACING SCALE (4px base) ============ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ============ BORDER RADIUS ============ */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 100px;

    /* ============ SHADOWS ============ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 24px rgba(255, 106, 0, 0.25);

    /* ============ COLORS — canonical brand ============ */
    --c-orange: #ff6a00;
    --c-orange-hover: #e55d00;
    --c-orange-light: rgba(255, 106, 0, 0.15);

    --c-bg: #0a0a0a;
    --c-surface: #111;
    --c-surface-2: #1a1a1a;
    --c-surface-3: #222;

    --c-text: #ffffff;
    --c-text-mute: rgba(255, 255, 255, 0.7);
    --c-text-dim: rgba(255, 255, 255, 0.5);
    --c-text-faint: rgba(255, 255, 255, 0.35);

    --c-border: rgba(255, 255, 255, 0.08);
    --c-border-strong: rgba(255, 255, 255, 0.15);
    --c-border-hover: rgba(255, 255, 255, 0.25);

    --c-whatsapp: #25d366;
    --c-whatsapp-hover: #1fb855;

    /* ============ CONTAINER WIDTHS ============ */
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1400px;

    /* ============ TYPOGRAPHY SCALE ============ */
    --fs-h1: clamp(34px, 4vw, 52px);
    --fs-h2: clamp(28px, 3.2vw, 42px);
    --fs-h3: clamp(22px, 2.6vw, 32px);
    --fs-h4: clamp(18px, 2vw, 24px);
    --fs-body: clamp(15px, 1.4vw, 17px);
    --fs-small: clamp(13px, 1.1vw, 14px);

    /* ============ LINE HEIGHTS ============ */
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-base: 1.5;
    --lh-relaxed: 1.6;

    /* ============ FONT WEIGHTS ============ */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* ============ TRANSITIONS ============ */
    --t-fast: 0.15s ease;
    --t-base: 0.25s ease;
    --t-slow: 0.4s ease;
    --t-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============ Z-INDEX SCALE ============ */
    --z-base: 1;
    --z-sticky: 10;
    --z-dropdown: 100;
    --z-sticky-bar: 500;
    --z-modal: 1000;
    --z-toast: 2000;
    --z-tooltip: 3000;
    --z-preloader: 9999;
}