/* Design tokens — Material-based design system
   Exact hex values from the Foundation Colour Palette.
   Variable names kept stable so existing components continue to work. */
:root {
  /* ─── Primary / "main blue" ──────────────────────────── */
  --primary-50:  #EDF1FD;   /* blue/100 */
  --primary-100: #DAE3FB;   /* blue/200 */
  --primary-200: #C8D5F9;   /* blue/300 */
  --primary-300: #A3B9F5;   /* blue/400 */
  --primary-400: #5980EE;   /* blue/500 */
  --primary-500: #1E54E7;   /* blue/600 — primary default */
  --primary-600: #1546CB;   /* blue/700 — hover */
  --primary-700: #1139A6;   /* blue/800 — focus / active */
  --primary-800: #0C266F;   /* blue/900 */
  --primary-900: #08194A;   /* blue/1000 */

  /* Aliases for legacy "accent" usage — collapsed to primary */
  --accent-500: var(--primary-500);
  --accent-600: var(--primary-600);

  /* ─── Neutral / cool grey ─────────────────────────────── */
  --grey-0:    #FFFFFF;     /* neutral/100 */
  --grey-25:   #FAFAFC;     /* bg/page/light-grey */
  --grey-50:   #F7F8FC;     /* bg/component/hover */
  --grey-100:  #E8EAEE;     /* neutral/200 */
  --grey-150:  #D0D6DC;     /* neutral/300 */
  --grey-200:  #C4CBD3;     /* neutral/400 */
  --grey-300:  #A1ADBA;     /* neutral/500 */
  --grey-400:  #8A98A8;     /* neutral/600 */
  --grey-500:  #68798D;     /* neutral/700 */
  --grey-600:  #4E5B68;     /* neutral/800 */
  --grey-700:  #2B323B;     /* neutral/900 */
  --grey-800:  #1A1E23;     /* neutral/1000 */
  --grey-900:  #000000;     /* neutral/1200 */

  /* Legacy slate aliases — point at the same neutral ramp */
  --slate-0:   var(--grey-0);
  --slate-25:  var(--grey-25);
  --slate-50:  var(--grey-50);
  --slate-100: var(--grey-100);
  --slate-200: var(--grey-150);
  --slate-300: var(--grey-300);
  --slate-400: var(--grey-400);
  --slate-500: var(--grey-500);
  --slate-600: var(--grey-600);
  --slate-700: var(--grey-700);
  --slate-800: var(--grey-800);
  --slate-900: var(--grey-900);
  --ink-900:   var(--grey-900);
  --ink-800:   var(--grey-800);
  --ink-700:   var(--grey-700);
  --cream-0:   var(--grey-0);
  --cream-25:  var(--grey-25);
  --cream-50:  var(--grey-50);
  --cream-100: var(--grey-100);
  --cream-200: var(--grey-150);

  /* ─── Semantic ────────────────────────────────────────── */
  --success-500: #1DA534;   /* green/500 — bg-default-success */
  --success-600: #188B2C;   /* green/600 */
  --success-100: #DCF9E1;   /* green/200 — bg-light-success */

  --warning-500: #F36E2B;   /* orange/500 — text-warning */
  --warning-400: #F9A26C;   /* lighter orange */
  --warning-100: #FEF2EC;   /* orange/100 — bg-light-warning */

  --danger-500:  #CC0000;   /* red/500 — bg-default-error */
  --danger-100:  #FFF2F2;   /* red/100 — bg-light-error */

  --info-500:    #169DCA;   /* cyan/700 — bg-default-info */
  --info-100:    #EDF9FD;   /* cyan/100 — bg-light-info */

  /* "purple" / accent in existing code maps to primary family */
  --purple-500:  var(--primary-500);
  --purple-100:  var(--primary-50);

  /* Stat-tile tint backgrounds (used on Home) */
  --tint-purple: var(--primary-50);
  --tint-red:    #FFEBEB;   /* red/200 */
  --tint-blue:   #C8EDF9;   /* cyan/200 */
  --tint-green:  var(--success-100);
  --tint-amber:  var(--warning-100);

  /* ─── Surfaces ────────────────────────────────────────── */
  --bg-app:     #F4F6FB;            /* tinted page so white cards lift */
  --bg-surface: #FFFFFF;            /* bg/component/default */
  --bg-raised:  #FFFFFF;
  --bg-sunken:  #EEF1F8;            /* tinted sunken */
  --bg-hover:   #F2F5FB;            /* bg/component/hover */
  --bg-overlay: rgba(0, 0, 0, 0.32);

  /* ─── Text ────────────────────────────────────────────── */
  --text-primary:   #000000;        /* text-default */
  --text-secondary: #4E5B68;        /* text-secondary (neutral/800) */
  --text-tertiary:  #68798D;        /* neutral/700 — muted */
  --text-disabled:  #6A6A6C;        /* text-disabled at 50% opacity */
  --text-inverse:   #FFFFFF;
  --text-link:      #1E54E7;        /* text-active */

  /* ─── Borders ─────────────────────────────────────────── */
  --border-subtle:  #E8EAEE;        /* border-default (neutral/200) */
  --border-default: #D0D6DC;        /* neutral/300 */
  --border-strong:  #68798D;        /* border-hover (neutral/700) */
  --border-focus:   #1E54E7;        /* border-focus */

  /* ─── Brand (Pin/icon accents) ───────────────────────── */
  --brand-orange:     #FF600F;
  --brand-blue:       #0041ED;
  --brand-navy:       #0A003C;
  --brand-grey:       #A0AFBE;
  --brand-light-grey: #F4F7FA;
  --brand-green:      #00CD91;
  --brand-light-green:#CDE600;

  /* ─── Typography ──────────────────────────────────────── */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, sans-serif;

  /* ─── Radii ───────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ─── Elevation (MUI-subtle, monochrome) ─────────────── */
  --elev-1: 0 1px 2px rgba(20,28,56,0.05), 0 1px 3px rgba(20,28,56,0.07);
  --elev-2: 0 2px 4px rgba(20,28,56,0.06), 0 8px 20px -6px rgba(20,28,56,0.10);
  --elev-3: 0 6px 12px -2px rgba(20,28,56,0.08), 0 16px 36px -8px rgba(20,28,56,0.12);
  --elev-4: 0 12px 28px -6px rgba(20,28,56,0.10), 0 32px 56px -12px rgba(20,28,56,0.16);
  --elev-primary: 0 1px 2px rgba(30,84,231,0.18), 0 2px 4px rgba(30,84,231,0.10);
  --elev-accent:  var(--elev-primary);
  --elev-ink:     var(--elev-1);

  /* ─── Spacing (8px grid) ─────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;

  /* ─── Layout ──────────────────────────────────────────── */
  --topbar-h:  56px;
  --sidebar-w: 260px;

  /* Type scale — math-based ratio */

  /* Disabled-cell hatch */
  --hatch: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,0.04) 6px 7px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-app); }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.scroll { scrollbar-width: thin; scrollbar-color: var(--grey-150) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--grey-150); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* Type utilities — 32 / 24 / 18 / 14 / 12 */
.t-hero    { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.t-display { font-size: 24px; line-height: 1.2;  font-weight: 600; letter-spacing: -0.015em; }
.t-h1      { font-size: 18px; line-height: 1.3;  font-weight: 600; letter-spacing: -0.01em; }
.t-h2      { font-size: 14px; line-height: 1.4;  font-weight: 600; }
.t-h3      { font-size: 13px; line-height: 1.4;  font-weight: 600; }
.t-body    { font-size: 14px; line-height: 1.55; }
.t-body-strong { font-size: 14px; line-height: 1.55; font-weight: 600; }
.t-small   { font-size: 13px; line-height: 1.5; }
.t-caption { font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.t-eyebrow { font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.t-mono    { font-family: var(--font-mono); font-size: 12px; }
.t-num     { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── Motion layer ─────────────────────────────────────── */
@keyframes om-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes om-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes om-draw { to { stroke-dashoffset: 0; } }
@keyframes om-grow-w { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes om-grow-h { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes om-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes om-pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes om-livepulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
@keyframes om-shimmer { 100% { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

.om-rise { opacity: 1; animation: om-rise 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.om-draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: om-draw 1.1s cubic-bezier(0.4,0,0.2,1) forwards; }
.om-grow-w { transform-origin: left center; animation: om-grow-w 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.om-grow-h { transform-origin: bottom center; animation: om-grow-h 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.om-pop { animation: om-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.om-fade { opacity: 1; animation: om-fade 0.5s ease forwards; }