/* ============================================================
   Design Tokens — Security Brigade Platform (LEGACY server-rendered pages)
   ============================================================

   SCOPE — READ BEFORE DELETING. This file styles the LEGACY server-rendered
   PHP pages ONLY. It is linked by views/templates/header.php and
   header_login.php (the login screen and the old admin surface). The Vue SPA
   under /portal/ does NOT import this file — its tokens are
   resources/css/tokens.css, a separate and more complete system with different
   values. Do not delete this as "dead code" (it is live for login), and do not
   treat it as the SPA's token source.

   Usage: Reference these variables throughout the legacy pages' CSS.
   Never hardcode hex colors — always use var(--token-name).
   This ensures consistent branding and easy theme switching.
   ============================================================ */

:root {
    /* ── Brand ── */
    --sb-red: #d42020;
    --sb-navy: #0f172a;

    /* ── Primary Actions ── */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #eff6ff;

    /* ── Severity / Status ── */
    --color-critical: #1a1a2e;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-light: #fffbeb;
    --color-success: #16a34a;
    --color-success-light: #f0fdf4;
    --color-info: #2563eb;
    --color-info-light: #eff6ff;

    /* ── Surfaces ── */
    --color-bg: #ffffff;
    --color-bg-alt: #f8fafc;
    --color-bg-hover: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;

    /* ── Text ── */
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;

    /* ── Borders ── */
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-border-focus: #2563eb;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);

    /* ── Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */

    /* ── Spacing ── */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* ── Z-index Scale ── */
    --z-dropdown: 100;
    --z-modal: 200;
    --z-toast: 300;
    --z-tooltip: 400;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    --color-bg: #0a121a;
    --color-bg-alt: #111827;
    --color-bg-hover: #1e293b;
    --color-surface: #131c2e;
    --color-surface-raised: #1e293b;

    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #64748b;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ── Utility Classes ── */

/* Text */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

/* Spacing */
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Components */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}
.badge-critical { background: var(--color-critical); color: white; }
.badge-high { background: var(--color-danger); color: white; }
.badge-medium { background: var(--color-warning); color: white; }
.badge-low { background: var(--color-info); color: white; }
.badge-info { background: var(--color-success); color: white; }
.badge-vulnerable { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid #fecaca; }
.badge-fixed { background: var(--color-success-light); color: var(--color-success); border: 1px solid #bbf7d0; }

.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}
.metric-card .metric-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.metric-card .metric-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}
.btn-primary {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg-hover); }

/* Responsive */
@media (max-width: 768px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr;
    }
    .hide-mobile { display: none; }
}
@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}