/* ---- Design Tokens & CSS Custom Properties ---- */
:root {
    /* Green Variant*/
    --primary: #95C123;
    --primary-rgb: 149, 193, 35;
    --primary-dark: #56A050;
    --primary-dark-rgb: 86, 160, 80;
    --secondary: #3d7a39;
    --secondary-rgb: 61, 122, 57;
    --primary-light: #f4f7ee;

    --tinted-bg-25: #fcfdf8;
    --tinted-bg-50: #f9fbf4;
    --tinted-bg-100: #f4f7ee;
    --tinted-bg-150: #f0f4e8;
    --tinted-bg-200: #eef2e6;
    --tinted-bg-250: #e8eddb;
    --tinted-bg-hover-light: #f4f9ec;
    --tinted-bg-hover: #eef5e0;

    /* Blue Variant
    --primary: #2389C1;
    --primary-rgb: 35, 137, 193;
    --primary-dark: #1a6fa0;
    --primary-dark-rgb: 26, 111, 160;
    --secondary: #1b5a8a;
    --secondary-rgb: 27, 90, 138;
    --primary-light: #eef5fa;

    --tinted-bg-25: #f8fcfd;
    --tinted-bg-50: #f4f9fb;
    --tinted-bg-100: #eef5fa;
    --tinted-bg-150: #e8f0f6;
    --tinted-bg-200: #e2ecf4;
    --tinted-bg-250: #d9e5ef;
    --tinted-bg-hover-light: #ecf5fa;
    --tinted-bg-hover: #e0eef7;
*/

    --text-main: #333333;
    --bg-main: #ffffff;
    --bg-body: #1e293b;

    /* Brand Neutral */
    --brand-mid: #8a939d;

    /* Named Colors */
    --color-orange: #f59e0b;
    --color-violet: #8b5cf6;
    --color-cyan: #06b6d4;
    --color-blue: #3b82f6;

    /* Semantic Colors */
    --danger: #dc2626;
    --danger-rgb: 220, 38, 38;
    --danger-light: #fca5a5;
    --success: #4ade80;
    --info: #0369a1;
    --warning: #d97706;

    /* Status: OK / Green */
    --status-ok: #22c55e;
    --status-ok-mid: #16a34a;
    --status-ok-dark: #15803d;
    --status-ok-bg: #dcfce7;
    --status-ok-bg-light: #bbf7d0;

    /* Status: Warning / Amber */
    --status-warn: #f59e0b;
    --status-warn-mid: #d97706;
    --status-warn-dark: #b45309;
    --status-warn-darker: #92400e;
    --status-warn-bg: #fef3c7;
    --status-warn-bg-light: #fde68a;
    --status-warn-bg-subtle: #fffbeb;

    /* Status: Critical / Red */
    --status-critical: #ef4444;
    --status-critical-mid: #dc2626;
    --status-critical-dark: #b91c1c;
    --status-critical-darker: #991b1b;
    --status-critical-darkest: #7f1d1d;
    --status-critical-bg: #fee2e2;
    --status-critical-bg-light: #fecaca;
    --status-critical-bg-subtle: #fef2f2;

    /* Status: Pending / Sky */
    --status-pending: #0284c7;
    --status-pending-bg: #e0f2fe;
    --status-pending-bg-light: #bae6fd;

    /* Status: Failed / Gray */
    --status-failed: #6b7280;
    --status-failed-bg: #f3f4f6;
    --status-failed-bg-light: #e5e7eb;

    /* Alert: Note / Blue */
    --alert-note: #3b82f6;
    --alert-note-bg: #eff6ff;
    --alert-note-header: #dbeafe;
    --alert-note-text: #1e40af;
    --alert-note-content: #1e3a8a;

    /* Alert: Tip / Emerald */
    --alert-tip: #10b981;
    --alert-tip-bg: #f0fdf4;
    --alert-tip-header: #dcfce7;
    --alert-tip-text: #166534;
    --alert-tip-content: #153e0f;

    /* Alert: Important / Violet */
    --alert-important: #8b5cf6;
    --alert-important-bg: #faf5ff;
    --alert-important-header: #f3e8ff;
    --alert-important-text: #6d28d9;
    --alert-important-content: #581c87;

    /* Alert: Warning (reuses status-warn palette) */
    --alert-warning: var(--status-warn);
    --alert-warning-bg: var(--status-warn-bg-subtle);
    --alert-warning-header: var(--status-warn-bg);
    --alert-warning-text: var(--status-warn-dark);
    --alert-warning-content: var(--status-warn-darker);

    /* Alert: Caution / Red (reuses status-critical palette) */
    --alert-caution: var(--status-critical-mid);
    --alert-caution-bg: var(--status-critical-bg-subtle);
    --alert-caution-header: var(--status-critical-bg);
    --alert-caution-text: var(--status-critical-darker);
    --alert-caution-content: var(--status-critical-darkest);

    /* Code Blocks */
    --code-bg: #f6f8fa;

    /* Dark Mode Palette */
    --dark-border: #374151;
    --dark-header-bg: #243447;
    --dark-code-bg: #0d1520;
    --dark-hover-bg: #2d3f57;
    --dark-error-bg: #2d1515;

    /* Typography */
    --fs-xs: 0.5rem;
    --fs-sm: 0.7rem;
    --fs-base: 0.9rem;
    --fs-md: 1rem;
    --fs-lg: 1.1rem;
    --fs-xl: 1.2rem;
    --fs-2xl: 1.6rem;

    /* Borders */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-circle: 50%;

    /* Colors (Slate Palette) */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
}