/* ============================================================
   DESIGN TOKENS — SimpleSaferServer "Bunker" Theme
   ============================================================ */

:root {
  /* ── Base palette ─────────────────────────────────────────── */
  --bg-root:        hsl(220, 18%, 8%);
  --bg-surface:     hsl(220, 16%, 12%);
  --bg-raised:      hsl(220, 14%, 16%);
  --bg-overlay:     hsl(220, 14%, 20%);
  --bg-input:       hsl(220, 16%, 14%);
  --bg-hover:       hsl(220, 14%, 22%);
  --bg-sidebar:     hsl(220, 18%, 10%);
  --bg-modal-scrim: hsla(220, 20%, 4%, 0.72);

  /* ── Borders ──────────────────────────────────────────────── */
  --border-subtle:  hsl(220, 12%, 20%);
  --border-default: hsl(220, 12%, 24%);
  --border-strong:  hsl(220, 10%, 32%);
  --border-input:   hsl(220, 12%, 26%);
  --border-focus:   var(--accent);

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:   hsl(220, 10%, 92%);
  --text-secondary: hsl(220, 8%, 62%);
  --text-muted:     hsl(220, 8%, 44%);
  --text-inverse:   hsl(220, 18%, 8%);
  --text-on-accent: hsl(30, 10%, 10%);

  /* ── Accent ───────────────────────────────────────────────── */
  --accent:         hsl(38, 90%, 55%);
  --accent-hover:   hsl(38, 90%, 48%);
  --accent-subtle:  hsla(38, 90%, 55%, 0.12);
  --accent-text:    hsl(38, 85%, 60%);

  /* ── Status colours ───────────────────────────────────────── */
  --success:        hsl(152, 58%, 46%);
  --success-subtle: hsla(152, 58%, 46%, 0.12);
  --success-text:   hsl(152, 50%, 58%);

  --warning:        hsl(38, 90%, 55%);
  --warning-subtle: hsla(38, 90%, 55%, 0.12);
  --warning-text:   hsl(38, 85%, 60%);

  --danger:         hsl(0, 68%, 56%);
  --danger-subtle:  hsla(0, 68%, 56%, 0.12);
  --danger-text:    hsl(0, 65%, 64%);

  --info:           hsl(200, 70%, 52%);
  --info-subtle:    hsla(200, 70%, 52%, 0.12);
  --info-text:      hsl(200, 65%, 62%);

  /* ── Typography ───────────────────────────────────────────── */
  --font-display:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

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

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px  hsla(0,0%,0%,0.25);
  --shadow-md:   0 2px 8px  hsla(0,0%,0%,0.30);
  --shadow-lg:   0 4px 16px hsla(0,0%,0%,0.35);
  --shadow-xl:   0 8px 32px hsla(0,0%,0%,0.40);
  --shadow-glow: 0 0 20px hsla(38, 90%, 55%, 0.15);

  /* ── Transitions ──────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-normal:   200ms;
  --dur-slow:     350ms;

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-width:     240px;
  --sidebar-collapsed:  64px;
  --header-height:      0px;
  --content-max-width: 1400px;
  --fake-mode-banner-height: 40px;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-sidebar:  100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-tooltip:  400;
  --z-toast:    500;
}