/* BeaBrand - Octograf-Style Variables */
:root {
    /* True Dark Mode */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    --bg-card: rgba(255, 255, 255, 0.02);
    --bg-glass: rgba(255, 255, 255, 0.03);

    /* Bold Accent Colors - Premium Purple Gradient */
    --accent: #a855f7;
    --accent-secondary: #6366f1;
    --accent-tertiary: #d946ef;
    --gradient-accent: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
    --gradient-hero: linear-gradient(135deg, #a855f7, #6366f1, #d946ef);
    --accent-glow: rgba(168, 85, 247, 0.4);

    /* Text - High Contrast */
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --text-muted: #555555;
    --text-strike: #666666;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-glass: rgba(255, 255, 255, 0.1);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;

    /* Container */
    --container-max: 1100px;
    --container-padding: var(--space-lg);
}