/**
 * RAGSec Design Tokens
 * Canonical CSS custom properties for the RAGSec visual design system.
 * Map these into WordPress Global Styles where practical.
 */

:root {
  /* ── Core palette ── */
  --ragsec-ink:          #08111f;
  --ragsec-slate:        #334155;
  --ragsec-muted:        #64748b;
  --ragsec-surface:      #f8fafc;
  --ragsec-white:        #ffffff;

  /* ── Brand colours ── */
  --ragsec-primary:      #2563eb;
  --ragsec-primary-dark: #1d4ed8;
  --ragsec-accent:       #06b6d4;

  /* ── Semantic colours ── */
  --ragsec-success:      #15803d;
  --ragsec-warning:      #d97706;
  --ragsec-danger:       #b91c1c;

  /* ── Border ── */
  --ragsec-border:       #dbe4ee;

  /* ── Severity ── */
  --ragsec-critical-bg:  #fef2f2;
  --ragsec-critical-fg:  #b91c1c;
  --ragsec-high-bg:      #fff7ed;
  --ragsec-high-fg:      #c2410c;
  --ragsec-medium-bg:    #fffbeb;
  --ragsec-medium-fg:    #b45309;
  --ragsec-low-bg:       #f0fdf4;
  --ragsec-low-fg:       #15803d;
  --ragsec-info-bg:      #eff6ff;
  --ragsec-info-fg:      #1d4ed8;

  /* ── Layout ── */
  --ragsec-content-width: 820px;
  --ragsec-wide-width:    1280px;
  --ragsec-radius:        10px;
  --ragsec-radius-sm:     6px;

  /* ── Typography ── */
  --ragsec-font-stack:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --ragsec-font-mono:
    "JetBrains Mono",
    "Cascadia Code",
    "Fira Code",
    ui-monospace,
    "SFMono-Regular",
    Menlo,
    Monaco,
    "Courier New",
    monospace;

  /* ── Spacing ── */
  --ragsec-space-xs:  0.5rem;
  --ragsec-space-sm:  0.75rem;
  --ragsec-space-md:  1.25rem;
  --ragsec-space-lg:  2rem;
  --ragsec-space-xl:  3.5rem;
  --ragsec-space-2xl: 6rem;
}