/* ========================================
   GUARDTECH ADMIN - DESIGN SYSTEM v1
   Fallback when no custom theme in Admin > Theme.
   Brand: slate surfaces + orange accent (matches mobile app).
   ======================================== */

:root {
    /* ---- Primary / Brand ---- */
    --gt-primary: #ff6a00;
    --gt-primary-rgb: 255, 106, 0;
    --gt-primary-alt: #ff8a3d;
    --gt-primary-legacy: #ff6a00;
    --gt-accent-cyan: #22d3ee;
    --gt-accent-cyan-rgb: 34, 211, 238;

    /* ---- Semantic colors ---- */
    --gt-success: #22c55e;
    --gt-success-rgb: 34, 197, 94;
    --gt-danger: #ef4444;
    --gt-danger-rgb: 239, 68, 68;
    --gt-warning: #f59e0b;
    --gt-warning-rgb: 245, 158, 11;
    --gt-info: #06b6d4;
    --gt-info-rgb: 6, 182, 212;

    /* ---- Neutrals / Surfaces ---- */
    --gt-white: #ffffff;
    --gt-bg-body: #f1f5f9;
    --gt-bg-card: #ffffff;
    --gt-bg-gradient-start: #ffffff;
    --gt-bg-gradient-end: #f8fafc;
    --gt-slate-900: #0f172a;
    --gt-slate-950: #020617;

    /* ---- Table / list headers ---- */
    --gt-table-header-bg: var(--gt-sidebar-bg);
    --gt-table-header-text: #ffffff;
    --gt-table-header-border: rgba(255, 255, 255, 0.12);
    --gt-table-header-accent: rgba(255, 106, 0, 0.45);
    --gt-border: #e2e8f0;
    --gt-border-light: #f1f5f9;
    --gt-border-row: #f8fafc;
    --gt-border-muted: #94a3b8;
    --gt-text: #0f172a;
    --gt-text-muted: #64748b;
    --gt-text-label: #334155;
    --gt-text-heading: #0f172a;
    --gt-text-muted-sm: #64748b;

    /* ---- Info panel ---- */
    --gt-info-panel-bg: #ecfeff;
    --gt-info-panel-border: #a5f3fc;
    --gt-info-panel-accent: var(--gt-primary);

    /* ---- Focus ring ---- */
    --gt-focus-ring: rgba(var(--gt-primary-rgb), 0.28);

    /* ---- Layout ---- */
    --gt-sidebar-width: 16.666667%;
    --gt-sidebar-bg: #0f172a;
    --gt-sidebar-link: rgba(255, 255, 255, 0.78);
    --gt-sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);
    --gt-sidebar-link-active-bg: rgba(255, 106, 0, 0.18);
    --gt-sidebar-border: rgba(255, 255, 255, 0.08);
    --gt-main-bg: var(--gt-bg-body);

    /* ---- Spacing ---- */
    --gt-spacer-xs: 0.25rem;
    --gt-spacer-sm: 0.5rem;
    --gt-spacer: 1rem;
    --gt-spacer-lg: 1.5rem;
    --gt-spacer-xl: 2rem;
    --gt-spacer-2xl: 3rem;
    --gt-container-px: 15px;

    /* ---- Border radius ---- */
    --gt-radius-sm: 0.375rem;
    --gt-radius: 0.5rem;
    --gt-radius-md: 0.75rem;
    --gt-radius-lg: 1rem;
    --gt-radius-xl: 1.25rem;
    --gt-radius-badge: 999px;

    /* ---- Shadows ---- */
    --gt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --gt-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --gt-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
    --gt-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    /* ---- Transitions ---- */
    --gt-transition: all 0.15s ease-in-out;
    --gt-transition-slow: all 0.3s ease;

    /* Bootstrap 5 alignment */
    --bs-primary: var(--gt-primary);
    --bs-primary-rgb: var(--gt-primary-rgb);
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --bs-border-radius: var(--gt-radius-md);
    --bs-border-radius-lg: var(--gt-radius-lg);
}