/**
 * ZI design tokens — always load before other app stylesheets (see main.go buildPageData).
 *
 * Layers: tokens → reset/base (styles.css) → feature CSS (dashboard, alerts, status, …).
 * Prefer var(--token) over raw hex in new rules; extend this file when a value repeats.
 */

:root {
    /* Typography (align with templates/base.gohtml font links) */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Spacing scale (rem) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Border radii */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-pill: 25px;

    /* Stacking */
    --z-navbar: 1000;
    --z-nav-backdrop: 999;
    --z-nav-mobile-panel: 1001;

    /* Page & layout surfaces */
    --bg-page: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --bg-light: #f8fafc;
    --bg-subtle-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --surface-white: #ffffff;
    --border-subtle: rgba(102, 126, 234, 0.1);
    --border-subtle-strong: rgba(102, 126, 234, 0.15);
    --border-input: #e2e8f0;
    --border-muted: #e5e7eb;

    /* Brand gradients */
    --primary-gradient: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    --error-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    --neutral-gradient: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    --github-green-gradient: linear-gradient(135deg, #2ea043 0%, #238636 100%);

    /* Brand & semantic colors */
    --primary-color: #667eea;
    --secondary-color: #f093fb;
    --accent-color: #4facfe;
    --success-color: #43e97b;
    --warning-color: #fa709a;
    --error-color: #ff6b6b;

    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --text-white: #ffffff;

    /* Shadows */
    --shadow-light: 0 4px 15px rgba(102, 126, 234, 0.15);
    --shadow-medium: 0 8px 30px rgba(102, 126, 234, 0.2);
    --shadow-heavy: 0 15px 50px rgba(102, 126, 234, 0.3);

    /* Alerts / notification header (distinct purple; used in alerts.css) */
    --alerts-header-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --alerts-header-gradient-hover: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);

    /* Alert severity accents (Bulma-style; alerts list + dots) */
    --severity-critical: #ff3860;
    --severity-high: #ff6b6b;
    --severity-medium: #ffaa5a;
    --severity-low: #ffdd57;

    /* Neutral chips (alert meta) */
    --surface-muted: #f8f9fa;
    --border-neutral: #e9ecef;
    --text-muted-strong: #495057;

    /* Dashboard badges (Bootstrap-style names in markup) */
    --accent-pink: #d63384;
    --accent-gray: #6c757d;
    --github-green: #238636;
    --github-green-dark: #1a7f37;

    /* Endpoint detail modal — semantic button surfaces */
    --btn-outline-blue-fg: #1e40af;
    --btn-outline-blue-border: #3b82f6;
    --btn-outline-blue-bg-hover: #eff6ff;
    --btn-outline-blue-fg-hover: #1e3a8a;
    --btn-outline-blue-border-hover: #2563eb;

    --btn-success-solid-bg: #15803d;
    --btn-success-solid-border: #166534;
    --btn-success-solid-bg-hover: #166534;
    --btn-success-solid-border-hover: #14532d;

    --btn-slate-bg: #f8fafc;
    --btn-slate-fg: #0f172a;
    --btn-slate-border: #cbd5e1;
    --btn-slate-bg-hover: #f1f5f9;
    --btn-slate-border-hover: #94a3b8;
    --btn-slate-fg-hover: #020617;

    --btn-info-tint-bg: #eff6ff;
    --btn-info-tint-fg: #1e40af;
    --btn-info-tint-border: #93c5fd;
    --btn-info-tint-bg-hover: #dbeafe;
    --btn-info-tint-border-hover: #60a5fa;
    --btn-info-tint-fg-hover: #1e3a8a;

    --btn-danger-tint-bg: #fef2f2;
    --btn-danger-tint-fg: #b91c1c;
    --btn-danger-tint-border: #fecaca;
    --btn-danger-tint-bg-hover: #fee2e2;
    --btn-danger-tint-border-hover: #f87171;
    --btn-danger-tint-fg-hover: #991b1b;

    /* Modal actions — dark secondary */
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Danger / warning accents */
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --warning-amber: #f59e0b;

    /* Focus / accent indigo (matches brand purple) */
    --indigo-600: #4c51bf;

    --red-500: #ef4444;
    --color-black: #000000;
}