/* ==========================================================================
   UEMTools design tokens  v1.0  (Nov 2026)
   Import fonts:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================================== */
:root {
  /* ---- Brand core ---- */
  --uem-blue-500: #177DFF;      /* Signal Blue  - gradient start */
  --uem-violet-500: #8136F8;    /* Ultra Violet - gradient end   */
  --uem-indigo-500: #4C5AFC;    /* gradient midpoint (reference only) */
  --uem-navy-900: #071A45;      /* Deep Navy - wordmark, headings, dark UI */
  --uem-cyan-500: #12C2E9;      /* Signal Cyan - accent */

  /* ---- Gradients ---- */
  --uem-gradient-brand: linear-gradient(90deg, #177DFF 0%, #8136F8 100%);       /* logo, decorative, large display */
  --uem-gradient-brand-diag: linear-gradient(135deg, #177DFF 0%, #8136F8 100%); /* backgrounds, hero panels */
  --uem-gradient-ui: linear-gradient(90deg, #0A63DB 0%, #6A22D9 100%);          /* AA-safe behind white text (buttons) */
  --uem-gradient-night: radial-gradient(120% 120% at 100% 0%, #24386B 0%, #071A45 55%, #040F2B 100%);

  /* ---- Blue scale ---- */
  --uem-blue-50:#EEF5FF; --uem-blue-100:#D9E8FF; --uem-blue-200:#B3D1FF; --uem-blue-300:#7DB3FF; --uem-blue-400:#4895FF;
  --uem-blue-600:#0A63DB; --uem-blue-700:#0A4FAD; --uem-blue-800:#0D3F85; --uem-blue-900:#0E2F5F;
  /* ---- Violet scale ---- */
  --uem-violet-50:#F4EEFF; --uem-violet-100:#E8DCFE; --uem-violet-200:#D1B8FD; --uem-violet-300:#B38BFB; --uem-violet-400:#9A60FA;
  --uem-violet-600:#6A22D9; --uem-violet-700:#551BAE; --uem-violet-800:#421886; --uem-violet-900:#2F1460;
  /* ---- Navy ---- */
  --uem-navy-700:#24386B; --uem-navy-800:#13275A; --uem-navy-950:#040F2B;
  /* ---- Neutrals (navy-tinted slate) ---- */
  --uem-white:#FFFFFF;
  --uem-slate-50:#F7F9FC; --uem-slate-100:#EFF2F7; --uem-slate-200:#E1E5EE; --uem-slate-300:#C5CBD8;
  --uem-slate-400:#9AA3B8; --uem-slate-500:#737D97; --uem-slate-600:#55607D; --uem-slate-700:#3B4766;

  /* ---- Semantic (base / text-safe / surface) ---- */
  --uem-success:#12A15E; --uem-success-text:#0B7A45; --uem-success-bg:#E7F7EF;
  --uem-warning:#F5A524; --uem-warning-text:#9A5B00; --uem-warning-bg:#FEF4E2;
  --uem-error:#E5484D;   --uem-error-text:#C2272D;   --uem-error-bg:#FDECEC;
  --uem-info:#177DFF;    --uem-info-text:#0A63DB;    --uem-info-bg:#EEF5FF;

  /* ---- Data visualisation (categorical, use in order) ---- */
  --uem-viz-1:#177DFF; --uem-viz-2:#8136F8; --uem-viz-3:#12C2E9; --uem-viz-4:#0A4FAD; --uem-viz-5:#B38BFB; --uem-viz-6:#9AA3B8;
  /* ---- Maturity scale (sequential, Level 1 -> 5) ---- */
  --uem-level-1:#D9E8FF; --uem-level-2:#7DB3FF; --uem-level-3:#177DFF; --uem-level-4:#5A4BFA; --uem-level-5:#8136F8;

  /* ---- Semantic roles (light theme) ---- */
  --uem-bg: var(--uem-white);
  --uem-bg-subtle: var(--uem-slate-50);
  --uem-surface: var(--uem-white);
  --uem-border: var(--uem-slate-200);
  --uem-border-strong: var(--uem-slate-300);
  --uem-text: var(--uem-navy-900);
  --uem-text-secondary: var(--uem-slate-600);
  --uem-text-muted: var(--uem-slate-500);   /* large text / non-essential only */
  --uem-link: var(--uem-blue-600);
  --uem-focus-ring: 0 0 0 3px rgba(23,125,255,.40);

  /* ---- Typography ---- */
  --uem-font-display: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --uem-font-body: "Inter", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --uem-font-mono: "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  /* size / line-height (web, 16px base) */
  --uem-text-display: 4rem;    --uem-lh-display: 4.5rem;   /* 64/72 Outfit 600 -0.02em */
  --uem-text-h1: 3rem;         --uem-lh-h1: 3.5rem;        /* 48/56 Outfit 600 -0.015em */
  --uem-text-h2: 2.25rem;      --uem-lh-h2: 2.75rem;       /* 36/44 Outfit 600 -0.01em */
  --uem-text-h3: 1.75rem;      --uem-lh-h3: 2.25rem;       /* 28/36 Outfit 500 */
  --uem-text-h4: 1.375rem;     --uem-lh-h4: 1.875rem;      /* 22/30 Outfit 500 */
  --uem-text-h5: 1.125rem;     --uem-lh-h5: 1.625rem;      /* 18/26 Inter 600 */
  --uem-text-lg: 1.125rem;     --uem-lh-lg: 1.75rem;       /* 18/28 Inter 400 */
  --uem-text-md: 1rem;         --uem-lh-md: 1.5rem;        /* 16/24 Inter 400 */
  --uem-text-sm: 0.875rem;     --uem-lh-sm: 1.25rem;       /* 14/20 Inter 400 */
  --uem-text-xs: 0.75rem;      --uem-lh-xs: 1rem;          /* 12/16 Inter 500 */
  --uem-weight-regular:400; --uem-weight-medium:500; --uem-weight-semibold:600; --uem-weight-bold:700;

  /* ---- Spacing (4px base) ---- */
  --uem-space-0:0; --uem-space-1:4px; --uem-space-2:8px; --uem-space-3:12px; --uem-space-4:16px; --uem-space-5:20px;
  --uem-space-6:24px; --uem-space-8:32px; --uem-space-10:40px; --uem-space-12:48px; --uem-space-16:64px; --uem-space-20:80px; --uem-space-24:96px; --uem-space-32:128px;

  /* ---- Radius ---- */
  --uem-radius-xs:4px; --uem-radius-sm:6px; --uem-radius-md:10px; --uem-radius-lg:14px; --uem-radius-xl:20px; --uem-radius-2xl:28px; --uem-radius-pill:999px;

  /* ---- Elevation (navy-tinted) ---- */
  --uem-shadow-xs: 0 1px 2px rgba(7,26,69,.06);
  --uem-shadow-sm: 0 1px 3px rgba(7,26,69,.08), 0 1px 2px rgba(7,26,69,.04);
  --uem-shadow-md: 0 6px 16px -4px rgba(7,26,69,.10), 0 2px 4px rgba(7,26,69,.04);
  --uem-shadow-lg: 0 16px 40px -8px rgba(7,26,69,.16), 0 4px 8px rgba(7,26,69,.04);
  --uem-shadow-brand: 0 12px 32px -8px rgba(76,90,252,.45);

  /* ---- Layout ---- */
  --uem-container: 1200px; --uem-gutter: 24px; --uem-columns: 12;
  --uem-bp-sm:640px; --uem-bp-md:768px; --uem-bp-lg:1024px; --uem-bp-xl:1280px; --uem-bp-2xl:1536px;

  /* ---- Motion ---- */
  --uem-ease: cubic-bezier(.2,.8,.2,1); --uem-duration-fast:150ms; --uem-duration-base:250ms; --uem-duration-slow:400ms;
}

/* Dark theme roles (portals, dark hero sections) */
[data-theme="dark"] {
  --uem-bg: var(--uem-navy-900);
  --uem-bg-subtle: var(--uem-navy-950);
  --uem-surface: var(--uem-navy-800);
  --uem-border: rgba(255,255,255,.12);
  --uem-border-strong: rgba(255,255,255,.24);
  --uem-text: #FFFFFF;
  --uem-text-secondary: #C5CBD8;
  --uem-text-muted: #9AA3B8;
  --uem-link: var(--uem-blue-300);
}

/* ---- Reference component styles ---- */
.uem-btn{font:600 var(--uem-text-md)/1 var(--uem-font-body);display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--uem-radius-md);border:1px solid transparent;cursor:pointer;transition:all var(--uem-duration-fast) var(--uem-ease)}
.uem-btn--primary{background:var(--uem-blue-600);color:#fff}
.uem-btn--primary:hover{background:var(--uem-blue-700)}
.uem-btn--gradient{background:var(--uem-gradient-ui);color:#fff;box-shadow:var(--uem-shadow-brand)}
.uem-btn--secondary{background:#fff;color:var(--uem-navy-900);border-color:var(--uem-slate-300)}
.uem-btn--secondary:hover{border-color:var(--uem-navy-900)}
.uem-btn--ghost{background:transparent;color:var(--uem-blue-600)}
.uem-btn--ghost:hover{background:var(--uem-blue-50)}
.uem-btn:focus-visible{outline:none;box-shadow:var(--uem-focus-ring)}
.uem-btn:disabled{background:var(--uem-slate-200);color:var(--uem-slate-500);box-shadow:none;cursor:not-allowed}
.uem-card{background:var(--uem-surface);border:1px solid var(--uem-border);border-radius:var(--uem-radius-lg);padding:var(--uem-space-6);box-shadow:var(--uem-shadow-sm)}
.uem-input{font:400 var(--uem-text-md)/1.5 var(--uem-font-body);height:44px;padding:0 14px;border:1px solid var(--uem-slate-300);border-radius:var(--uem-radius-md);color:var(--uem-text);background:#fff}
.uem-input:focus{outline:none;border-color:var(--uem-blue-500);box-shadow:var(--uem-focus-ring)}
.uem-input[aria-invalid="true"]{border-color:var(--uem-error)}