:root {

    /* ========================================
       COLORS
    ======================================== */

    --bcn-color-bg: #0f0f0f;
    --bcn-color-surface: #1a1a1a;

    --bcn-color-text: #ffffff;
    --bcn-color-text-muted: #999999;

    --bcn-color-primary: #4fc3ff;
    --bcn-color-primary-hover: #9ad1ff;

    --bcn-color-accent: #ffcc00;

    --bcn-color-border: rgba(255,255,255,0.1);

    /* ========================================
       TYPOGRAPHY
    ======================================== */

    --bcn-font-size-xs: 0.85rem;
    --bcn-font-size-sm: 0.95rem;
    --bcn-font-size-md: 1rem;
    --bcn-font-size-lg: 1.25rem;
    --bcn-font-size-xl: 1.75rem;
    --bcn-font-size-xxl: 3rem;

    --bcn-line-height-base: 1.5;

    /* ========================================
       SPACING
    ======================================== */

    --bcn-space-xs: 4px;
    --bcn-space-sm: 8px;
    --bcn-space-md: 16px;
    --bcn-space-lg: 24px;
    --bcn-space-xl: 32px;
    --bcn-space-xxl: 50px;

    /* ========================================
       BORDERS / RADIUS
    ======================================== */

    --bcn-radius-sm: 4px;
    --bcn-radius-md: 8px;
    --bcn-radius-round: 999px;

    /* ========================================
       SHADOWS
    ======================================== */

    --bcn-shadow-card: 0 6px 18px rgba(0,0,0,0.45);
    --bcn-shadow-card-hover: 0 8px 24px rgba(0,0,0,0.6);

    /* ========================================
       TRANSITIONS
    ======================================== */

    --bcn-transition-fast: 0.2s ease;
    --bcn-transition-medium: 0.3s ease;

}