/*
 * REMS Manager — Design System Variables
 * Based on REMS Brand Guidelines & Elementor Global Settings
 * All colors and fonts are customizable via these CSS variables.
 */

:root {
    /* ── Brand Colors (From Elementor Global Settings) ── */
    --rems-primary:           #011A2E; /* Deep Navy */
    --rems-primary-rgb:       1, 26, 46;
    --rems-primary-hover:     #072a48;
    --rems-primary-light:     rgba(1, 26, 46, 0.08);
    --rems-primary-medium:    rgba(1, 26, 46, 0.25);

    --rems-secondary:         #F05024; /* REMS Vibrant Orange */
    --rems-secondary-rgb:     240, 80, 36;
    --rems-secondary-hover:   #d94218;
    --rems-secondary-light:   #FFEDE8; /* White-Orange tint */

    --rems-accent:            #F05024;
    --rems-accent-rgb:        240, 80, 36;
    --rems-accent-hover:      #d94218;
    --rems-accent-light:      rgba(240, 80, 36, 0.10);

    --rems-powder-blue:       #E7F4FF; /* Powder Blue accent */
    --rems-text:              #1A1A1A; /* Text Dark */
    --rems-text-muted:        #555555;

    /* ── Semantic / Status Colors ────────────────── */
    --rems-success:           #10b981;
    --rems-success-light:     rgba(16, 185, 129, 0.10);
    --rems-warning:           #f59e0b;
    --rems-warning-light:     rgba(245, 158, 11, 0.10);
    --rems-danger:            #f43f5e;
    --rems-danger-light:      rgba(244, 63, 94, 0.10);
    --rems-info:              #0ea5e9;
    --rems-info-light:        rgba(14, 165, 233, 0.10);

    /* ── Neutral Palette (Slate) ─────────────────── */
    --rems-slate-50:          #f8fafc;
    --rems-slate-100:         #f1f5f9;
    --rems-slate-200:         #e2e8f0;
    --rems-slate-300:         #cbd5e1;
    --rems-slate-400:         #94a3b8;
    --rems-slate-500:         #64748b;
    --rems-slate-600:         #475569;
    --rems-slate-700:         #334155;
    --rems-slate-800:         #1e293b;
    --rems-slate-900:         #011A2E;

    /* ── Backgrounds ─────────────────────────────── */
    --rems-bg-light:          #f6f7f8;
    --rems-bg-dark:           #011A2E;
    --rems-bg-card:           #ffffff;
    --rems-bg-card-alt:       var(--rems-slate-50);

    /* ── Typography (Square721 for Headings, Montserrat for Body) ── */
    --rems-font-heading:      'Square721', 'Square 721 BT', 'Montserrat', sans-serif;
    --rems-font-body:         'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rems-font-family:       var(--rems-font-body);

    --rems-font-size-xs:      0.625rem;   /* 10px */
    --rems-font-size-sm:      0.75rem;    /* 12px */
    --rems-font-size-base:    0.875rem;   /* 14px */
    --rems-font-size-md:      1rem;       /* 16px */
    --rems-font-size-lg:      1.125rem;   /* 18px */
    --rems-font-size-xl:      1.25rem;    /* 20px */
    --rems-font-size-2xl:     1.5rem;     /* 24px */
    --rems-font-size-3xl:     1.875rem;   /* 30px */
    --rems-font-size-4xl:     2.25rem;    /* 36px */
    --rems-font-size-5xl:     3rem;       /* 48px */

    /* ── Border Radius ───────────────────────────── */
    --rems-radius-sm:         0.25rem;
    --rems-radius:            0.375rem;
    --rems-radius-md:         0.5rem;
    --rems-radius-lg:         0.75rem;
    --rems-radius-xl:         1rem;
    --rems-radius-full:       9999px;

    /* ── Shadows ─────────────────────────────────── */
    --rems-shadow-sm:         0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --rems-shadow:            0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --rems-shadow-lg:         0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --rems-shadow-primary:    0 4px 14px 0 rgba(var(--rems-primary-rgb), 0.20);
    --rems-shadow-accent:     0 4px 14px 0 rgba(var(--rems-secondary-rgb), 0.25);

    /* ── Spacing ─────────────────────────────────── */
    --rems-space-1:           0.25rem;
    --rems-space-2:           0.5rem;
    --rems-space-3:           0.75rem;
    --rems-space-4:           1rem;
    --rems-space-5:           1.25rem;
    --rems-space-6:           1.5rem;
    --rems-space-8:           2rem;
    --rems-space-10:          2.5rem;
    --rems-space-12:          3rem;

    /* ── Transitions ─────────────────────────────── */
    --rems-transition:        all 0.2s ease;
    --rems-transition-fast:   all 0.15s ease;
}

/* ── Dark Mode Overrides ──────────────────────── */
.rems-dark-mode {
    /* Base Backgrounds */
    --rems-bg-light:          #08121a;
    --rems-bg-dark:           #010c14;
    --rems-bg-card:           #0d1e2d;
    --rems-bg-card-alt:       #13283a;

    /* Invert Slate Variables for Dark Mode Text/Borders */
    --rems-slate-50:          #13283a;
    --rems-slate-100:         #1a334a;
    --rems-slate-200:         #23415c;
    --rems-slate-300:         #3b5c7c;
    --rems-slate-400:         #6b8fae;
    --rems-slate-500:         #9db8d0;
    --rems-slate-600:         #cbdbe8;
    --rems-slate-700:         #e2ecf4;
    --rems-slate-800:         #f0f5fa;
    --rems-slate-900:         #ffffff;

    /* Adjust Shadows for Dark Mode */
    --rems-shadow-sm:         0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.3);
    --rems-shadow:            0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --rems-shadow-lg:         0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
}

body.rems-dark-mode-active {
    background-color: var(--rems-bg-light);
}

.rems-dark-mode-active #wpcontent {
    background-color: var(--rems-bg-light);
}