/* ============================================
   DESIGN TOKENS — Single Source of Truth
   All CSS custom properties live here
   ============================================ */

:root {
    /* ── Brand Colors ── */
    --color-primary: #E60000;
    --color-primary-dark: #cc0000;
    --color-primary-light: #ff3333;
    --color-primary-alpha: rgba(230, 0, 0, 0.2);

    /* ── Backgrounds ── */
    --color-bg-body: #121212;
    --color-bg-surface: #1a1a1a;
    --color-bg-surface-hover: #252525;
    --color-bg-glass: rgba(20, 20, 20, 0.8);

    /* ── Text ── */
    --color-text-main: #FFFFFF;
    --color-text-secondary: #B0B0B0;
    --color-text-muted: #666666;
    --color-text-tertiary: #888888;

    /* ── Status ── */
    --color-success: #00E676;
    --color-warning: #FFAB00;
    --color-danger: #FF1744;
    --color-info: #00B0FF;

    /* ── Borders ── */
    --color-border: #333333;
    --color-border-light: #444444;

    /* ── Control Sizing ── */
    --control-height: 44px;
    --control-padding-x: 14px;

    /* ── Border Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 50rem;

    /* ── Spacing Scale ── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* ── Layout ── */
    --header-height: 76px;
    --icon-size: 16px;

    /* ── Typography ── */
    --font-heading: 'Kanit', sans-serif;
    --font-body: 'Prompt', sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 11px;

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, #E60000 0%, #B30000 100%);
    --gradient-surface: linear-gradient(145deg, var(--color-bg-surface), #0f0f0f);

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 15px rgba(230, 0, 0, 0.3);
    --shadow-glow-red: 0 0 20px rgba(230, 0, 0, 0.3);

    /* ── Transitions ── */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;

    /* ── Navbar Tokens ── */
    --navbar-height: 80px;
    --navbar-bg: rgba(5, 5, 5, 0.75);
    --navbar-blur: 20px;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --navbar-z-index: 1000;
    --navbar-active-color: var(--color-primary);
    --navbar-text-color: rgba(255, 255, 255, 0.85);

    /* ── Admin Tokens ── */
    --admin-sidebar-width: 280px;
}

/* Alias tokens used by older page-specific CSS (footer, events) */
:root {
    --color-accent-red: var(--color-primary);
    --footer-text: rgba(255, 255, 255, 0.6);
    --event-red: var(--color-primary);
    --event-gradient: var(--gradient-primary);
    --card-gradient: var(--gradient-surface);

    /* Profile aliases → unified to global tokens */
    --profile-primary: var(--color-primary);
    --profile-secondary: var(--color-primary-dark);
    --profile-surface: var(--color-bg-surface);
    --profile-border: var(--color-border);
    --profile-text: var(--color-text-main);
    --profile-text-muted: var(--color-text-muted);
    --profile-glow-red: var(--shadow-glow-red);
    --profile-success: var(--color-success);
}