/**
 * MekryPro – design tokens / CSS variables (single source of truth).
 * Use only these tokens in UI. No hardcoded hex/rgba outside this file.
 *
 * @author Kaido Mägi
 * @copyright 2026
 */

:root {
    /* ─── 1. Background ───────────────────────────────────────────────────── */
    --bg-main: #08131d;
    --bg-main-2: #0b1724;
    --bg-gradient-start: #07111a;
    --bg-gradient-end: #08131d;
    --bg-gradient: linear-gradient(180deg, #07111a 0%, #08131d 100%);

    /* ─── 2. Panel ────────────────────────────────────────────────────────── */
    --panel-bg: #122437;
    --panel-bg-2: #162b40;
    --panel-bg-3: #0d1d2d;
    --panel-gradient: linear-gradient(180deg, rgba(18, 36, 55, 0.96), rgba(14, 30, 46, 0.98));

    /* ─── 3. Border ─────────────────────────────────────────────────────── */
    --border-light: rgba(124, 151, 181, 0.14);
    --border-default: rgba(124, 151, 181, 0.2);
    --border-strong: rgba(124, 151, 181, 0.34);

    /* ─── 4. Text ───────────────────────────────────────────────────────── */
    --text-main: #edf4fb;
    --text-muted: #93a8bc;
    --text-soft: #6f879d;

    /* ─── 5. Accent (MekryPro primary – mint green) ──────────────────────── */
    --accent-main: #36d3a5;
    --accent-hover: #2ec89a;
    --accent-soft: rgba(54, 211, 165, 0.1);
    --accent-border: rgba(54, 211, 165, 0.28);
    --accent-glow: rgba(54, 211, 165, 0.16);
    /* Accent gradients (button, selected row, toggle) */
    --accent-button-bg: linear-gradient(180deg, rgba(54, 211, 165, 0.18), rgba(54, 211, 165, 0.1));
    --accent-row-bg: linear-gradient(180deg, rgba(54, 211, 165, 0.12), rgba(54, 211, 165, 0.06));
    --accent-row-border: rgba(54, 211, 165, 0.24);
    --accent-toggle-bg: rgba(54, 211, 165, 0.08);
    --accent-toggle-border: rgba(54, 211, 165, 0.22);
    --accent-toggle-text: #d7fff2;

    /* ─── 6. Input / field ───────────────────────────────────────────────── */
    --field-bg: rgba(8, 20, 33, 0.82);
    --field-bg-soft: rgba(8, 20, 33, 0.72);

    /* ─── 7. Badge ───────────────────────────────────────────────────────── */
    --badge-bg: rgba(8, 20, 33, 0.78);
    --badge-border: rgba(124, 151, 181, 0.16);

    /* ─── 8. List hover / active ──────────────────────────────────────────── */
    --list-hover: rgba(54, 211, 165, 0.06);
    --list-active: rgba(54, 211, 165, 0.12);

    /* ─── 9. Shadow ───────────────────────────────────────────────────────── */
    --shadow-main: none;
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.35);
    
    /* ─── 10. Danger / error (minimal, for delete & errors only) ───────────────── */
    --danger-main: #e85c5c;
    --danger-soft: rgba(232, 92, 92, 0.12);
    --danger-border: rgba(232, 92, 92, 0.28);

    /* ─── 11. Typography ───────────────────────────────────────────────────── */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* ─── 12. Status colors ───────────────────────────────────────────────── */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #3b82f6;
    --status-neutral: #6b7280;

    /* ─── 13. Enhanced shadows ───────────────────────────────────────────────── */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.18);
    --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-button-hover: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* ─── 14. Radius ─────────────────────────────────────────────────────── */
    --radius-xl: 22px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --radius-xs: 6px;

    /* ─── 15. Legacy aliases (theme.css and others can use these until migrated) ─ */
    --mekry-font: 'DM Sans', system-ui, sans-serif;
    --mekry-bg: var(--bg-main);
    --mekry-bg-alt: var(--panel-bg-2);
    --mekry-card: var(--panel-bg);
    --mekry-border: var(--border-default);
    --mekry-text: var(--text-main);
    --mekry-text-muted: var(--text-muted);
    --mekry-accent: var(--accent-main);
    --mekry-link: var(--accent-main);
    --mekry-error: var(--danger-main);
    --mekry-shadow: var(--shadow-main);
    --mekry-transition: 0.2s ease;
}