/**
 * THE DIGI GHOST - Global Design System & Design Tokens
 * Built directly around the official black, white, and red brand identity.
 * Tagline: "We Pop You Up, Out of Nowhere"
 */

:root {
    /* Brand Colors - Exact Logo Palette */
    --color-brand-black: #000000;
    --color-brand-white: #ffffff;
    --color-brand-red: #e61919;
    --color-brand-red-hover: #c91414;
    --color-brand-red-glow: rgba(230, 25, 25, 0.28);
    --color-brand-red-subtle: rgba(230, 25, 25, 0.08);

    /* Architectural Dark Surfaces */
    --color-bg: #08090b;
    --color-surface-base: #0e1014;
    --color-surface-card: #14171d;
    --color-surface-elevated: #1a1e26;
    --color-surface-hover: #212631;

    /* Hairline & Component Borders */
    --color-border: #232834;
    --color-border-subtle: rgba(255, 255, 255, 0.07);
    --color-border-hover: rgba(230, 25, 25, 0.45);
    --color-border-focus: #e61919;

    /* Typography Color Hierarchy (WCAG 2.1 AA Compliant Contrast) */
    --color-text-primary: #ffffff;
    --color-text-secondary: #cbd2df;
    --color-text-muted: #9aa3b5;
    --color-text-accent: #e61919;
    --color-text-on-accent: #ffffff;

    /* Utility & Channel Colors */
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #20ba5a;
    --color-phone: #3b82f6;

    /* Typography System */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-brand-serif: 'Cinzel', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, monospace;

    /* Type Scales (Fluid Mobile-First) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: clamp(1.85rem, 1.6rem + 1.25vw, 2.375rem);
    --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3.125rem);
    --text-5xl: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);

    /* Spacing Scale */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4.5rem;    /* 72px */
    --space-4xl: 6.5rem;    /* 104px */

    /* Container & Structure Max Widths */
    --container-max: 1240px;
    --container-narrow: 820px;
    --container-wide: 1380px;
    --header-height: 84px;

    /* Border Radius System (Confident, Architectural) */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 9999px;

    /* Shadows & Glows */
    --shadow-subtle: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 10px 24px -4px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 20px 40px -8px rgba(0, 0, 0, 0.65);
    --shadow-red-glow: 0 0 28px rgba(230, 25, 25, 0.35);

    /* Transitions */
    --transition-snappy: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-expressive: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index Structure */
    --z-negative: -1;
    --z-normal: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-floating: 800;
    --z-drawer: 900;
    --z-modal: 1000;
}