/* ===== DESIGN TOKENS ===== */
:root {
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --container-max-width: 1200px;
    --container-padding: 24px;
    --nav-height: 72px;

    /* Border radii */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 999px;

    /* Brand colors — 180 Properties */
    --color-accent: #ED2019;
    --color-secondary: #820200;
    --color-accent-hover: #820200;
    --color-accent-muted: rgba(130, 2, 0, 0.45);
    --color-accent-20: rgba(130, 2, 0, 0.2);
    --color-accent-10: rgba(130, 2, 0, 0.10);
}

/* ===== DARK THEME (default) ===== */
.theme-dark {
    --color-bg: #0a0a0a;
    --color-bg-nav: rgba(10, 10, 10, 0.85);

    --color-text-primary: #ffffff;
    --color-text-secondary: #e5e5e5;
    --color-text-tertiary: #cccccc;
    --color-text-muted: #aaaaaa;
    --color-text-subtle: #999999;
    --color-text-dim: #888888;
    --color-text-faint: #777777;
    --color-text-ghost: #666666;
    --color-text-placeholder: #555555;

    --color-card-bg: rgba(255, 255, 255, 0.03);
    --color-card-bg-alt: rgba(255, 255, 255, 0.04);
    --color-card-bg-hover: rgba(255, 255, 255, 0.05);
    --color-card-bg-icon: rgba(255, 255, 255, 0.06);

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-medium: rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.12);
    --color-border-hover: rgba(255, 255, 255, 0.15);
    --color-border-active: rgba(255, 255, 255, 0.20);
    --color-border-focus: rgba(255, 255, 255, 0.25);
    --color-border-bright: rgba(255, 255, 255, 0.35);

    --color-btn-primary-bg: #ED2019;
    --color-btn-primary-text: #ffffff;
    --color-btn-primary-hover: #820200;

    --color-slider-track: #333333;
    --color-bullet-dot: #555555;
    --color-checklist-dot: #ED2019;
}

/* ===== LIGHT THEME ===== */
.theme-light {
    --color-bg: #ffffff;
    --color-bg-nav: rgba(255, 255, 255, 0.92);

    --color-text-primary: #0a0a0a;
    --color-text-secondary: #1a1a1a;
    --color-text-tertiary: #333333;
    --color-text-muted: #555555;
    --color-text-subtle: #666666;
    --color-text-dim: #777777;
    --color-text-faint: #888888;
    --color-text-ghost: #999999;
    --color-text-placeholder: #aaaaaa;

    --color-card-bg: rgba(0, 0, 0, 0.02);
    --color-card-bg-alt: rgba(0, 0, 0, 0.03);
    --color-card-bg-hover: rgba(0, 0, 0, 0.04);
    --color-card-bg-icon: rgba(0, 0, 0, 0.05);

    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-subtle: rgba(0, 0, 0, 0.06);
    --color-border-medium: rgba(0, 0, 0, 0.10);
    --color-border-strong: rgba(0, 0, 0, 0.12);
    --color-border-hover: rgba(0, 0, 0, 0.15);
    --color-border-active: rgba(0, 0, 0, 0.18);
    --color-border-focus: rgba(0, 0, 0, 0.25);
    --color-border-bright: rgba(0, 0, 0, 0.35);

    --color-btn-primary-bg: #ED2019;
    --color-btn-primary-text: #ffffff;
    --color-btn-primary-hover: #820200;

    --color-slider-track: #dddddd;
    --color-bullet-dot: #aaaaaa;
    --color-checklist-dot: #ED2019;
}