/* Phase 9 — design tokens.
 *
 * All other CSS files reference these. If you find a hex value
 * anywhere outside this file, surface it to a token and reference
 * it back from here.
 */

:root {
  /* ---------------- Brand ---------------- */
  --color-primary:        #2563eb; /* blue-600 */
  --color-primary-hover:  #1d4ed8; /* blue-700 */
  --color-primary-light:  #dbeafe; /* blue-100 */

  /* ---------------- Neutrals ---------------- */
  --color-bg:             #ffffff;
  --color-surface:        #f9fafb; /* gray-50 */
  --color-surface-strong: #f3f4f6; /* gray-100 */
  --color-border:         #e5e7eb; /* gray-200 */
  --color-border-strong:  #d1d5db; /* gray-300 */
  --color-text:           #111827; /* gray-900 */
  --color-text-muted:     #6b7280; /* gray-500 */
  --color-text-subtle:    #9ca3af; /* gray-400 */

  /* ---------------- Semantic ---------------- */
  --color-success:        #059669; /* green-600 */
  --color-success-bg:     #d1fae5; /* green-100 */
  --color-success-border: #6ee7b7; /* green-300 */
  --color-warning:        #d97706; /* amber-600 */
  --color-warning-bg:     #fef3c7; /* amber-100 */
  --color-warning-border: #fcd34d; /* amber-300 */
  --color-danger:         #dc2626; /* red-600 */
  --color-danger-bg:      #fee2e2; /* red-100 */
  --color-danger-border:  #fca5a5; /* red-300 */
  --color-info:           #2563eb;
  --color-info-bg:        #dbeafe;
  --color-info-border:    #93c5fd;

  /* ---------------- Severity (harmonised) ---------------- */
  --severity-critical:    #b91c1c; /* red-700 */
  --severity-critical-bg: #fee2e2;
  --severity-high:        #dc2626; /* red-600 */
  --severity-high-bg:     #fee2e2;
  --severity-medium:      #d97706; /* amber-600 */
  --severity-medium-bg:   #fef3c7;
  --severity-low:         #ca8a04; /* yellow-600 */
  --severity-low-bg:      #fef9c3;
  --severity-info:        #6b7280; /* gray-500 */
  --severity-info-bg:     #f3f4f6;

  /* Role badges */
  --role-admin-bg:        #fee2e2;
  --role-admin-fg:        #991b1b;
  --role-technician-bg:   #dbeafe;
  --role-technician-fg:   #1d4ed8;
  --role-viewer-bg:       #f3f4f6;
  --role-viewer-fg:       #4b5563;

  /* IG (Implementation Group) badge */
  --color-ig-bg:          #ede9fe; /* violet-100 */
  --color-ig-fg:          #6d28d9; /* violet-700 */

  /* ---------------- Typography ---------------- */
  --font-family-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:
    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Type scale */
  --font-size-micro: 0.75rem;   /* 12px */
  --font-size-small: 0.8125rem; /* 13px */
  --font-size-body:  0.9375rem; /* 15px */
  --font-size-lg:    1rem;      /* 16px */
  --font-size-h4:    1.125rem;  /* 18px */
  --font-size-h3:    1.25rem;   /* 20px */
  --font-size-h2:    1.5rem;    /* 24px */
  --font-size-h1:    2rem;      /* 32px */
  --font-size-display: 2.5rem;  /* 40px — for big numbers (KPIs) */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  --line-height-tight: 1.2;
  --line-height-snug:  1.3;
  --line-height-base:  1.6;

  /* ---------------- Spacing ---------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------------- Layout ---------------- */
  --container-max:    1280px;
  --container-pad:    var(--space-6);
  --container-pad-sm: var(--space-4);
  --nav-height:       56px;

  /* ---------------- Effects ---------------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06),
               0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 6px -1px rgba(15, 23, 42, 0.08),
               0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08),
               0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition:      180ms ease;
  --transition-slow: 240ms ease;
}