/* ============================================================
   SFS Theme — Color & Visual Variables
   ALL color, shadow, radius, and animation values live here.
   No other CSS file may define color values.
   ============================================================ */

:root {
    /* Primary — Deep Emerald */
    --primary-color:        #0F4C3A;
    --primary-light:        #166534;
    --primary-dark:         #0B3528;
    --primary-hover:        #0d4234;
    --primary-rgb:          15, 76, 58;

    /* Secondary — Gold */
    --secondary-color:      #C9A227;
    --secondary-light:      #D4AF37;
    --secondary-dark:       #A07A0B;
    --secondary-hover:      #b8911f;

    /* Backgrounds */
    --background-color:     #FAF8F2;
    --surface-color:        #FFFFFF;
    --surface-alt:          #F3F0E8;
    --surface-dark:         #0F4C3A;

    /* Text */
    --text-primary:         #1F2937;
    --text-secondary:       #4B5563;
    --text-muted:           #9CA3AF;
    --text-inverse:         #FFFFFF;
    --text-gold:            #C9A227;

    /* Semantic */
    --success-color:        #059669;
    --success-bg:           #ECFDF5;
    --warning-color:        #D97706;
    --warning-bg:           #FFFBEB;
    --danger-color:         #DC2626;
    --danger-bg:            #FEF2F2;
    --info-color:           #2563EB;
    --info-bg:              #EFF6FF;

    /* Borders */
    --border-color:         #E5E2D8;
    --border-light:         #F0EDE4;
    --border-dark:          #D1CEC4;

    /* Shadows (primary-tinted) */
    --shadow-sm:            0 1px 3px rgba(15, 76, 58, 0.08);
    --shadow-md:            0 4px 12px rgba(15, 76, 58, 0.12);
    --shadow-lg:            0 8px 24px rgba(15, 76, 58, 0.15);
    --shadow-xl:            0 16px 48px rgba(15, 76, 58, 0.20);
    --shadow-card:          0 2px 8px rgba(15, 76, 58, 0.10);

    /* Border Radius */
    --radius-xs:            2px;
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            20px;
    --radius-2xl:           32px;
    --radius-full:          9999px;

    /* Transitions */
    --transition-fast:      150ms ease;
    --transition-normal:    250ms ease;
    --transition-slow:      400ms ease;

    /* Animations */
    --animation-fast:       200ms ease-in-out;
    --animation-normal:     350ms ease-in-out;
    --animation-slow:       600ms ease-in-out;

    /* Overlay */
    --overlay-light:        rgba(255, 255, 255, 0.95);
    --overlay-dark:         rgba(11, 53, 40, 0.85);
    --overlay-primary:      rgba(15, 76, 58, 0.90);
}

/* Dark Mode overrides */
[data-theme="dark"] {
    --background-color:     #0D1F1A;
    --surface-color:        #1A2F28;
    --surface-alt:          #1F3830;

    --text-primary:         #F9FAFB;
    --text-secondary:       #D1D5DB;
    --text-muted:           #6B7280;

    --border-color:         #2D4A3E;
    --border-light:         #253D32;
    --border-dark:          #3A5E50;

    --primary-color:        #22C55E;
    --primary-light:        #4ADE80;
    --primary-dark:         #16A34A;
}