/**
 * CSS VARIABLES — Design System Tokens (V1.0 — MVC Refactor)
 * Single source of truth for all colors, spacing, shadows, and radii.
 * Extracted from: asset/unified_styles.css lines 1-21.
 *
 * USAGE: Every module CSS must @import this file or rely on it being
 * loaded by asset/asset.php (it always loads variables.css first).
 */

:root {
    /* ── Brand Colors ── */
    --primary:       #2563eb;
    --primary-hover: #1d4ed8;
    --success:       #10b981;
    --danger:        #ef4444;
    --warning:       #f59e0b;
    --info:          #3b82f6;

    /* ── Neutral Palette ── */
    --background: #f8fafc;
    --surface:    #ffffff;
    --border:     #e2e8f0;
    --text:       #0f172a;
    --muted:      #64748b;

    /* ── Status-specific backgrounds (for pills, alerts) ── */
    --success-bg: #ecfdf5;
    --danger-bg:  #fef2f2;
    --warning-bg: #fffbeb;
    --info-bg:    #eff6ff;

    /* ── Spacing Scale ── */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  32px;
    --spacing-2xl: 48px;

    /* ── Border Radius ── */
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-xl: 30px;

    /* ── Shadows ── */
    --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);

    /* ── Typography ── */
    --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

/* ══════════════════════════════════════════════
   DARK THEME — CSS Variable Overrides
   Applied when body has class 'dark-theme'.
   All components using var(--*) tokens adapt
   automatically without needing !important overrides.
   ══════════════════════════════════════════════ */
body.dark-theme {
    /* ── Neutral Palette ── */
    --background: #0f172a;
    --surface:    #1e293b;
    --border:     #334155;
    --text:       #f1f5f9;
    --muted:      #94a3b8;

    /* ── Status-specific backgrounds — dark variants ── */
    --success-bg: #052e16;
    --danger-bg:  #2d0a0a;
    --warning-bg: #1c1100;
    --info-bg:    #0c1a2e;
}