/**
 * CSS Custom Properties (Variables)
 * Central source of truth for the brand color palette
 * 
 * Organization:
 * - Background colors
 * - Accent colors
 * - Text colors
 * - Neutral/utility colors
 * 
 * Usage: Use var(--color-name) throughout all stylesheets
 * This enables easy rebranding and A/B testing
 */

:root {
    /* ===== Background Colors ===== */
    --color-bg-dark: #020626;
    --color-bg-dark-alt: #151738;
    --color-bg-light: #f7f8fd;
    --color-bg-light-warm: #f6f2ed;
    --color-bg-dropdown: #0d1b2e;

    /* ===== Accent Colors ===== */
    --color-accent-green: #76f05a;
    --color-accent-blue: #002ff5;

    /* ===== Text Colors ===== */
    --color-text-white: #ffffff;
    --color-text-white-strong: #fff;
    --color-text-light: rgba(255, 255, 255, 0.85);
    --color-text-light-muted: rgba(255, 255, 255, 0.75);
    --color-text-light-lighter: rgba(255, 255, 255, 0.92);
    --color-text-light-dim: rgba(255, 255, 255, 0.82);
    --color-text-light-faded: rgba(255, 255, 255, 0.55);
    --color-text-light-very-faded: rgba(255, 255, 255, 0.45);
    --color-text-dark: #020626;
    --color-text-dark-secondary: #5b5347;
    --color-text-dark-muted: #6b7280;

    /* ===== Neutral/Border Colors ===== */
    --color-border-dark-subtle: rgba(2, 6, 38, 0.08);
    --color-border-dark-light: rgba(2, 6, 38, 0.15);
    --color-border-dark-mid: rgba(2, 6, 38, 0.25);
    --color-border-light-subtle: rgba(255, 255, 255, 0.08);
    --color-border-light-light: rgba(255, 255, 255, 0.10);
    --color-border-light-mid: rgba(255, 255, 255, 0.15);
    --color-border-light-border: #e6e1d8;

    /* ===== Overlay/Shadow Colors ===== */
    --color-overlay-green-light: rgba(118, 240, 90, 0.12);
    --color-overlay-green-lighter: rgba(118, 240, 90, 0.20);
    --color-overlay-green-faint: rgba(118, 240, 90, 0.18);
    --color-overlay-blue-light: rgba(0, 47, 245, 0.10);
    --color-overlay-blue-lighter: rgba(0, 47, 245, 0.30);
    --color-overlay-blue-faint: rgba(0, 47, 245, 0.12);
    --color-overlay-blue-focus: rgba(0, 47, 245, 0.55);
    --color-overlay-white-subtle: rgba(255, 255, 255, 0.03);
    --color-overlay-white-light: rgba(255, 255, 255, 0.08);
    --color-overlay-dark-shadow: rgba(2, 6, 38, 0.22);

    /* ===== Label/Tag Colors ===== */
    --color-label-neutral: #9a8f80;
    --color-label-inactive: rgba(2, 6, 38, 0.55);
    --color-label-text: rgba(2, 6, 38, 0.7);

    /* ===== Gradient Colors (preserved for reference) ===== */
    --gradient-dark-to-blue: linear-gradient(135deg, #020626 0%, #0a1a66 100%);
    --gradient-green-blue: linear-gradient(135deg, rgba(118, 240, 90, 0.12), rgba(0, 47, 245, 0.10));
}