/* =============================
   PROFESSIONAL COLOR SYSTEM - Teal & Gold
   Primary = Teal (trust, action)
   Premium = Gold (special CTAs only)
============================= */

/* 1. Base Brand Tokens */
:root {
    /* Brand core */
    --color-brand-gold: #D4AF37;
    --color-brand-gold-dark: #B38F1F;
    --color-brand-gold-soft: #F6EAC3;

    --color-brand-teal: #1E7F7F;
    --color-brand-teal-dark: #155C5C;
    --color-brand-teal-soft: #E0F3F3;

    /* Neutrals */
    --color-neutral-900: #111111;
    --color-neutral-800: #1F1F1F;
    --color-neutral-700: #3A3A3A;
    --color-neutral-600: #555555;
    --color-neutral-500: #7A7A7A;
    --color-neutral-400: #A3A3A3;
    --color-neutral-300: #D0D0D0;
    --color-neutral-200: #E5E5E5;
    --color-neutral-100: #F5F5F7;
    --color-neutral-50: #FAFAFB;

    /* Brand black & whites */
    --color-black-deep: #1A1A1A;
    --color-white: #FFFFFF;

    /* Semantic / states */
    --color-success: #15803D;
    --color-success-soft: #DCFCE7;

    --color-warning: #D97706;
    --color-warning-soft: #FEF3C7;

    --color-error: #B91C1C;
    --color-error-soft: #FEE2E2;

    --color-info: #1D4ED8;
    --color-info-soft: #DBEAFE;

    /* Backgrounds */
    --bg-body: var(--color-neutral-50);
    --bg-surface: var(--color-white);
    --bg-surface-muted: var(--color-neutral-100);

    /* Text */
    --text-main: var(--color-neutral-900);
    --text-muted: var(--color-neutral-600);
    --text-soft: var(--color-neutral-500);
    --text-on-dark: var(--color-white);
    --text-on-accent: var(--color-white);

    /* Borders */
    --border-subtle: var(--color-neutral-200);
    --border-strong: var(--color-neutral-300);

    /* Shadows */
    --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-strong: 0 18px 45px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

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

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
}

/* 2. Button Tokens */
:root {
    /* Primary button = TEAL (main actions) */
    --btn-primary-bg: var(--color-brand-teal);
    --btn-primary-bg-hover: var(--color-brand-teal-dark);
    --btn-primary-text: var(--color-white);
    --btn-primary-border: transparent;

    /* Secondary button (outline) */
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--color-neutral-100);
    --btn-secondary-text: var(--color-brand-teal);
    --btn-secondary-border: var(--color-brand-teal);

    /* Premium button = GOLD (special CTAs only!) */
    --btn-premium-bg: var(--color-brand-gold);
    --btn-premium-bg-hover: var(--color-brand-gold-dark);
    --btn-premium-text: var(--color-black-deep);
    --btn-premium-border: transparent;

    /* Disabled */
    --btn-disabled-bg: var(--color-neutral-200);
    --btn-disabled-text: var(--color-neutral-500);
    --btn-disabled-border: var(--color-neutral-200);
}

/* 3. Card & Accent Tokens */
:root {
    /* Cards */
    --card-bg: var(--color-white);
    --card-bg-muted: var(--color-neutral-100);
    --card-border: var(--border-subtle);
    --card-shadow: var(--shadow-soft);

    /* Accent highlights */
    --accent-gold: var(--color-brand-gold);
    --accent-gold-soft-bg: var(--color-brand-gold-soft);

    --accent-teal: var(--color-brand-teal);
    --accent-teal-soft-bg: var(--color-brand-teal-soft);
}

/* 4. Alert & Badge Tokens */
:root {
    /* Success */
    --alert-success-bg: var(--color-success-soft);
    --alert-success-border: var(--color-success);
    --alert-success-text: var(--color-success);

    /* Error */
    --alert-error-bg: var(--color-error-soft);
    --alert-error-border: var(--color-error);
    --alert-error-text: var(--color-error);

    /* Warning */
    --alert-warning-bg: var(--color-warning-soft);
    --alert-warning-border: var(--color-warning);
    --alert-warning-text: var(--color-warning);

    /* Info */
    --alert-info-bg: var(--color-info-soft);
    --alert-info-border: var(--color-info);
    --alert-info-text: var(--color-info);
}

/* 5. Dark Mode */
body.dark-mode {
    --bg-body: #050505;
    --bg-surface: #111111;
    --bg-surface-muted: #181818;

    --text-main: #F9FAFB;
    --text-muted: #9CA3AF;
    --text-soft: #6B7280;

    --border-subtle: #272727;
    --border-strong: #3A3A3A;

    --card-bg: #111111;
    --card-bg-muted: #181818;
    --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);

    --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 18px 45px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
}