/* ============================================================
   FABIUS DESIGN SYSTEM — CSS Custom Properties
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────────── */
  --fab-gold:          hsl(42, 78%, 55%);
  --fab-gold-light:    hsl(42, 78%, 70%);
  --fab-gold-dark:     hsl(42, 78%, 40%);
  --fab-shield-blue:   hsl(215, 65%, 50%);
  --fab-shield-dark:   hsl(215, 65%, 35%);
  --fab-shield-light:  hsl(215, 65%, 70%);

  /* ── Semantic Colors ──────────────────────────────────────── */
  --fab-critical:      hsl(0, 72%, 55%);
  --fab-critical-bg:   hsla(0, 72%, 55%, 0.12);
  --fab-high:          hsl(25, 85%, 55%);
  --fab-high-bg:       hsla(25, 85%, 55%, 0.12);
  --fab-medium:        hsl(42, 90%, 50%);
  --fab-medium-bg:     hsla(42, 90%, 50%, 0.12);
  --fab-low:           hsl(200, 60%, 50%);
  --fab-low-bg:        hsla(200, 60%, 50%, 0.12);
  --fab-success:       hsl(145, 60%, 45%);
  --fab-success-bg:    hsla(145, 60%, 45%, 0.12);
  --fab-info:          hsl(210, 60%, 55%);
  --fab-info-bg:       hsla(210, 60%, 55%, 0.12);

  /* ── Dark Theme (Default) ─────────────────────────────────── */
  --fab-bg-0:          hsl(222, 30%, 8%);
  --fab-bg-1:          hsl(222, 25%, 11%);
  --fab-bg-2:          hsl(222, 22%, 14%);
  --fab-bg-3:          hsl(222, 20%, 18%);
  --fab-bg-hover:      hsl(222, 20%, 20%);
  --fab-bg-active:     hsl(222, 20%, 22%);
  --fab-bg-glass:      hsla(222, 25%, 14%, 0.75);
  --fab-bg-card:       hsla(222, 22%, 16%, 0.85);

  --fab-border:        hsl(222, 15%, 22%);
  --fab-border-light:  hsl(222, 15%, 28%);
  --fab-border-focus:  var(--fab-shield-blue);

  --fab-text-0:        hsl(222, 10%, 93%);
  --fab-text-1:        hsl(222, 10%, 72%);
  --fab-text-2:        hsl(222, 10%, 50%);
  --fab-text-muted:    hsl(222, 10%, 38%);

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

  --fab-fs-xs:    0.6875rem;   /* 11px */
  --fab-fs-sm:    0.75rem;     /* 12px */
  --fab-fs-base:  0.8125rem;   /* 13px */
  --fab-fs-md:    0.875rem;    /* 14px */
  --fab-fs-lg:    1rem;        /* 16px */
  --fab-fs-xl:    1.25rem;     /* 20px */
  --fab-fs-2xl:   1.5rem;      /* 24px */
  --fab-fs-3xl:   2rem;        /* 32px */
  --fab-fs-hero:  3rem;        /* 48px */

  --fab-fw-normal:  400;
  --fab-fw-medium:  500;
  --fab-fw-semi:    600;
  --fab-fw-bold:    700;

  --fab-lh-tight:   1.2;
  --fab-lh-normal:  1.5;
  --fab-lh-relaxed: 1.7;

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

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

  /* ── Shadows ──────────────────────────────────────────────── */
  --fab-shadow-sm:    0 1px 3px hsla(0,0%,0%,0.3);
  --fab-shadow-md:    0 4px 12px hsla(0,0%,0%,0.35);
  --fab-shadow-lg:    0 8px 30px hsla(0,0%,0%,0.4);
  --fab-shadow-glow:  0 0 20px hsla(215, 65%, 50%, 0.2);

  /* ── Transitions ──────────────────────────────────────────── */
  --fab-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --fab-duration:  180ms;
  --fab-dur-slow:  350ms;

  /* ── Z-Index Scale ────────────────────────────────────────── */
  --fab-z-base:     1;
  --fab-z-sticky:   100;
  --fab-z-dropdown: 200;
  --fab-z-modal:    300;
  --fab-z-toast:    400;
  --fab-z-tooltip:  500;

  /* ── Layout ───────────────────────────────────────────────── */
  --fab-sidebar-w:     240px;
  --fab-sidebar-w-min: 56px;
  --fab-header-h:      48px;
  --fab-content-max:   1200px;
}