/* =========================================================
   DEFAULT THEME VARIABLES
   ========================================================= */

:root {

    /* ===== THEME INPUTS (ADMIN / BRAND) ===== */

    --theme-primary: #f97316;
    --theme-primary-dark: #ea580c;

    --theme-secondary: #0f172a;
    --theme-secondary-dark: #020617;

    --theme-danger: #ef4444;
    --theme-success: #22c55e;
    --theme-warning: #f59e0b;

    /* =====================================================
       LIGHT MODE DEFAULT VALUES
       ===================================================== */

    --theme-bg-body: #f8fafc;
    --theme-bg-surface: #ffffff;
    --theme-bg-subtle: #f1f5f9;

    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    --border-color: #e2e8f0;

    /* =====================================================
       SYSTEM TOKENS
       ===================================================== */

    /* Primary */
    --primary-50: color-mix(in srgb, var(--theme-primary) 5%, white);
    --primary-100: color-mix(in srgb, var(--theme-primary) 10%, white);
    --primary-200: color-mix(in srgb, var(--theme-primary) 25%, white);
    --primary-300: color-mix(in srgb, var(--theme-primary) 40%, white);
    --primary-400: color-mix(in srgb, var(--theme-primary) 60%, white);
    --primary-500: var(--theme-primary);
    --primary-600: var(--theme-primary-dark);
    --primary-700: color-mix(in srgb, var(--theme-primary-dark) 85%, black);
    --primary-800: color-mix(in srgb, var(--theme-primary-dark) 70%, black);
    --primary-900: color-mix(in srgb, var(--theme-primary-dark) 55%, black);

    /* Secondary */
    --secondary-500: var(--theme-secondary);
    --secondary-600: var(--theme-secondary-dark);

    /* Backgrounds */
    --bg-body: var(--theme-bg-body);
    --bg-surface: var(--theme-bg-surface);
    --bg-subtle: var(--theme-bg-subtle);

    /* Text */
    --text-on-primary: white;

    /* Status */
    --danger-main: var(--theme-danger);
    --success-text: var(--theme-success);

    --danger-bg: color-mix(in srgb, var(--theme-danger) 15%, white);
    --success-bg: color-mix(in srgb, var(--theme-success) 15%, white);
    --warning-text: var(--theme-warning);

    /* Borders */
    --border-focus: var(--primary-400);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.12);
    --shadow-hover: 0 20px 25px rgb(0 0 0 / 0.15);

    /* Typography */
    --font-sans: var(--font-body);

    /* Typography - Font Families (Theme Controlled via base-layout) */
    --font-inter: 'Inter', system-ui, -apple-system, sans-serif;
    --font-roboto: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-poppins: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;
    --font-playfair: 'Playfair Display', Georgia, serif;
    --font-open-sans: 'Open Sans', sans-serif;
    --font-lato: 'Lato', sans-serif;
    --font-outfit: 'Outfit', sans-serif;
    --font-merriweather: 'Merriweather', serif;
    --font-raleway: 'Raleway', sans-serif;
    --font-nunito: 'Nunito', sans-serif;
    --font-oswald: 'Oswald', sans-serif;
    --font-lora: 'Lora', serif;
    --font-libre-baskerville: 'Libre Baskerville', serif;
    --font-dancing-script: 'Dancing Script', cursive;
    --font-caveat: 'Caveat', cursive;

    /* Admin Font Selection (defaults - overridden by base-layout at runtime) */
    --theme-font-body: var(--font-poppins);
    --theme-font-heading: var(--font-playfair);

    /* System Mapped Font Tokens */
    --font-body: var(--theme-font-body);
    --font-heading: var(--theme-font-heading);

    /* Layout */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --header-height: 70px;
}

/* =========================================================
   MANUAL LIGHT MODE
   ========================================================= */

html.light {

    --theme-bg-body: #f8fafc;
    --theme-bg-surface: #ffffff;
    --theme-bg-subtle: #f1f5f9;

    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-light: #94a3b8;

    --border-color: #e2e8f0;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.12);
    --shadow-hover: 0 20px 25px rgb(0 0 0 / 0.15);
}

/* =========================================================
   MANUAL DARK MODE
   ========================================================= */

html.dark {

    --theme-bg-body: #020617;
    --theme-bg-surface: #020617;
    --theme-bg-subtle: #020617;

    --text-main: #e5e7eb;
    --text-muted: #94a3b8;
    --text-light: #64748b;

    --border-color: #1e293b;

    --danger-bg: color-mix(in srgb, var(--theme-danger) 20%, transparent);
    --success-bg: color-mix(in srgb, var(--theme-success) 20%, transparent);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.6);
    --shadow-hover: 0 20px 25px rgb(0 0 0 / 0.7);
}

/* =========================================================
   SYSTEM MODE
   ========================================================= */

@media (prefers-color-scheme: dark) {

    html.system {

        --theme-bg-body: #020617;
        --theme-bg-surface: #020617;
        --theme-bg-subtle: #020617;

        --text-main: #e5e7eb;
        --text-muted: #94a3b8;
        --text-light: #64748b;

        --border-color: #1e293b;

        --danger-bg: color-mix(in srgb, var(--theme-danger) 20%, transparent);
        --success-bg: color-mix(in srgb, var(--theme-success) 20%, transparent);

        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 6px rgb(0 0 0 / 0.5);
        --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.6);
        --shadow-hover: 0 20px 25px rgb(0 0 0 / 0.7);
    }
}

/* =========================================================
   BASE ELEMENT RESETS
   ========================================================= */

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-main);
}