/* ─────────────────────────────────────────────────────────────────────────────
   Design tokens — the single source of truth for colour, spacing, type, etc.
   Components must reference these variables, never hard-coded values.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --color-brand-navy: #0b2545;
    --color-brand-navy-700: #133a63;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-primary-soft-border: #dbeafe;

    /* Neutrals */
    --color-bg: #f7f8fa;
    --color-surface: #ffffff;
    --color-surface-alt: #f9fafb;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;

    /* Text */
    --color-text: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #9ca3af;
    --color-text-on-dark: #e5edf7;
    --color-text-on-dark-muted: #93a8c4;

    /* Status */
    --color-success: #16a34a;
    --color-success-bg: #dcfce7;
    --color-warning: #d97706;
    --color-warning-bg: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-bg: #fee2e2;
    --color-info: #2563eb;
    --color-info-bg: #dbeafe;
    --color-neutral-badge: #6b7280;
    --color-neutral-badge-bg: #f3f4f6;

    /* Typography */
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-brand: "Friz Quadrata Std", Georgia, "Times New Roman", serif;
    --font-size-xs: 0.6875rem;   /* 11px */
    --font-size-sm: 0.8125rem;   /* 13px */
    --font-size-base: 0.875rem;  /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.25rem;     /* 20px */
    --font-size-xl: 1.75rem;     /* 28px */
    --font-size-2xl: 2.25rem;    /* 36px */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --letter-spacing-label: 0.06em;

    /* Spacing scale — includes two micro steps so compact controls (chips, tags,
       segmented buttons, stacked labels) stay on the scale instead of hard-coding px. */
    --spacing-05: 0.125rem;   /* 2px — hairline gaps inside compact components */
    --spacing-1: 0.25rem;
    --spacing-1-5: 0.375rem;  /* 6px — vertical padding on compact controls */
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

    /* Layout */
    --sidebar-width: 248px;
    --header-height: 64px;
    --content-max-width: 1200px;
}