/* ============================================================
   AFD GLOBAL THEME — SINGLE SOURCE OF TRUTH
   Change a token here → every page updates.
   ============================================================ */

/* ---------- Base tokens (light mode defaults) ---------- */
:root {
    /* Brand */
    --primary: #0f5e3a;
    --primary-dark: #0a4a2e;
    --primary-light: #e8f2ec;
    --gold: #d4af5a;
    --gold-bright: #e6c579;
    --gold-deep: #b88b4a;
    --gold-grad: linear-gradient(135deg, #e6c579 0%, #b88b4a 100%);

    /* Semantic */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Surfaces */
    --bg-body: #eef2f0;
    --bg-content: #f1f5f9;
    --bg-card: #ffffff;
    --bg-panel: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --bg-hover: #f8faf9;
    --bg-tertiary: #f1f5f9;

    /* Text */
    --text-primary: #1a1a1a;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-on-primary: #ffffff;

    /* Borders */
    --border: #e9ecef;
    --border-strong: #d1d9d4;
    --border-light: #eef1ef;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #d1d9d4;
    --input-text: #1a1a1a;
    --input-placeholder: #9aa3a0;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 14px -8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.3);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s var(--ease);
}

/* ============================================================
   DARK MODE — matches backend dashboard palette
   ============================================================ */
html.theme-dark,
body.dark-mode {
    --primary: #2d8c5a;
    --primary-dark: #1a6b42;
    --primary-light: #1a3c34;
    --gold: #2d8c5a;
    --gold-bright: #4ade80;
    --gold-deep: #1a6b42;
    --gold-grad: linear-gradient(135deg, #4ade80 0%, #2d8c5a 100%);

    --success: #4ade80;
    --warning: #fbbf24;
    --error: #f87171;
    --info: #60a5fa;

    --bg-body: #18181b;
    --bg-content: #18181b;
    --bg-card: #1c1d20;
    --bg-panel: #1c1d20;
    --bg-glass: rgba(28, 29, 32, 0.9);
    --bg-hover: #212327;
    --bg-tertiary: #212327;

    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-on-primary: #ffffff;

    --border: #2d3748;
    --border-strong: #3a4151;
    --border-light: #2d3748;

    --input-bg: #18181b;
    --input-border: #2d3748;
    --input-text: #e4e4e7;
    --input-placeholder: #71717a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   SYSTEM MODE — deep green palette
   ============================================================ */
html.theme-system,
html.theme-system body.dark-mode {
    --primary: #0f5e3a;
    --primary-dark: #0a4a2e;
    --primary-light: #1a3c34;
    --gold: #d4af5a;
    --gold-bright: #e6c579;
    --gold-deep: #b88b4a;

    --success: #22c55e;
    --warning: #fbbf24;
    --error: #f87171;
    --info: #60a5fa;

    --bg-body: transparent;
    --bg-content: transparent;
    --bg-card: rgba(6, 42, 25, 0.72);
    --bg-panel: rgba(6, 42, 25, 0.72);
    --bg-glass: rgba(6, 42, 25, 0.72);
    --bg-hover: rgba(10, 58, 36, 0.9);
    --bg-tertiary: rgba(10, 58, 36, 0.75);

    --text-primary: #f0fff5;
    --text-secondary: rgba(232, 242, 236, 0.9);
    --text-muted: rgba(232, 242, 236, 0.65);
    --text-on-primary: #ffffff;

    --border: rgba(212, 175, 90, 0.25);
    --border-strong: rgba(212, 175, 90, 0.4);
    --border-light: rgba(212, 175, 90, 0.18);

    --input-bg: rgba(10, 58, 36, 0.75);
    --input-border: rgba(212, 175, 90, 0.35);
    --input-text: #f0fff5;
    --input-placeholder: rgba(240, 255, 245, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px -8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   BASE THEMING — applies tokens to common elements
   ============================================================ */
html.theme-dark,
html.theme-dark body,
html.theme-system,
html.theme-system body {
    background: var(--bg-body);
    color: var(--text-primary);
}

body {
    background: var(--bg-body);
    color: var(--text-primary);
    transition: var(--transition);
}

/* Common surfaces */
.card,
.panel,
.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* Inputs */
input,
select,
textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    -webkit-text-fill-color: var(--input-text);
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
    -webkit-text-fill-color: var(--input-placeholder);
}