/**
 * VigiCloud Design Tokens
 * =======================
 * Single source of truth for all visual constants.
 * Import BEFORE any other VigiCloud CSS.
 *
 * Usage: <link rel="stylesheet" href="/assets/css/design-tokens.css">
 */

:root {
    /* ── Brand ───────────────────────────────────────── */
    --vc-navy:          #060d1e;
    --vc-navy-mid:      #0a1628;
    --vc-navy-light:    #0f2040;
    --vc-blue:          #1a6cff;
    --vc-blue-dark:     #1457d4;
    --vc-blue-light:    #3d86ff;
    --vc-cyan:          #00d4ff;
    --vc-cyan-dim:      rgba(0, 212, 255, 0.12);

    /* ── Surface (light mode) ────────────────────────── */
    --vc-bg:            #f4f6fb;
    --vc-surface:       #ffffff;
    --vc-surface-hover: #f8faff;
    --vc-border:        #e2e8f0;
    --vc-border-light:  #f0f4fa;

    /* ── Text ────────────────────────────────────────── */
    --vc-text-primary:  #111827;
    --vc-text-secondary:#4b5563;
    --vc-text-muted:    #9ca3af;
    --vc-text-inverse:  #ffffff;

    /* ── Semantic (WCAG-AA on light bg) ─────────────── */
    --vc-success:       #16a34a;
    --vc-success-bg:    #f0fdf4;
    --vc-success-text:  #15803d;
    --vc-success-border:#bbf7d0;

    --vc-warning:       #d97706;
    --vc-warning-bg:    #fffbeb;
    --vc-warning-text:  #b45309;
    --vc-warning-border:#fde68a;

    --vc-danger:        #dc2626;
    --vc-danger-bg:     #fef2f2;
    --vc-danger-text:   #b91c1c;
    --vc-danger-border: #fecaca;

    --vc-info:          #0ea5e9;
    --vc-info-bg:       #f0f9ff;
    --vc-info-text:     #0369a1;
    --vc-info-border:   #bae6fd;

    /* ── Accent border colors (card left-borders) ────── */
    --vc-accent-blue:   var(--vc-blue);
    --vc-accent-green:  var(--vc-success);
    --vc-accent-orange: var(--vc-warning);
    --vc-accent-red:    var(--vc-danger);
    --vc-accent-cyan:   var(--vc-cyan);
    --vc-accent-purple: #7c3aed;

    /* ── Typography ──────────────────────────────────── */
    --vc-font:          'Inter', system-ui, -apple-system, sans-serif;
    --vc-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

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

    --vc-fw-normal:     400;
    --vc-fw-medium:     500;
    --vc-fw-semibold:   600;
    --vc-fw-bold:       700;

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

    /* ── Radius ──────────────────────────────────────── */
    --vc-radius-sm:     6px;
    --vc-radius:        10px;
    --vc-radius-lg:     14px;
    --vc-radius-xl:     20px;
    --vc-radius-full:   9999px;

    /* ── Shadows ─────────────────────────────────────── */
    --vc-shadow-xs:     0 1px 2px rgba(0,0,0,0.05);
    --vc-shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
    --vc-shadow:        0 4px 16px rgba(0,0,0,0.10);
    --vc-shadow-lg:     0 8px 32px rgba(0,0,0,0.14);
    --vc-shadow-xl:     0 16px 48px rgba(0,0,0,0.18);

    /* ── Transitions ─────────────────────────────────── */
    --vc-transition-fast:   0.15s ease;
    --vc-transition:        0.25s ease;
    --vc-transition-slow:   0.4s ease;

    /* ── Z-index scale ───────────────────────────────── */
    --vc-z-dropdown:    1000;
    --vc-z-sticky:      1020;
    --vc-z-fixed:       1030;
    --vc-z-modal-bg:    1040;
    --vc-z-modal:       1050;
    --vc-z-toast:       1060;
    --vc-z-tooltip:     1070;

    /* ── Navbar ──────────────────────────────────────── */
    --vc-navbar-bg:     var(--vc-navy-mid);
    --vc-navbar-border: rgba(255,255,255,0.06);
    --vc-navbar-height: 58px;
}