/* ---------------------------------------------------------------
   iMatrics design tokens.
   GENERATED — do not hand-edit. Regenerate with tools/sync-tokens.sh
   Source: design_handoff_imatrics_site_v2/design/_ds/imatrics-design-system-00bda7b2-d5bc-4825-b7b8-49e9d0acc46e/tokens
   Synced: 2026-09-04
   --------------------------------------------------------------- */

/* iMatrics color tokens — sampled from brand logo, product UI, and LinkedIn campaign art */
:root {
  /* ---- Navy (primary brand) ---- */
  --navy-950: #002255; /* MUI `neutral` — deepest brand navy */
  --navy-900: #071a33;
  --navy-800: #0b2545; /* logo circle, .btn-primary, section headers, primary text */
  --navy-700: #133257;
  --navy-600: #274263; /* header gradient stop */
  --navy-500: #3a5479;
  --navy-400: #5b7093;

  /* ---- Indigo (secondary accent — graph nodes, gears, links) ---- */
  --indigo-700: #3f5397;
  --indigo-600: #4b60ab;
  --indigo-500: #586cbf; /* primary indigo */
  --indigo-400: #798aca;
  --indigo-300: #a6b2df;
  --indigo-200: #d0d7ef;

  /* ---- Mint (signature accent — "strong" pills, highlights, product screens) ---- */
  --mint-700: #159d64;
  --mint-600: #1fb877;
  --mint-500: #34cf8c;
  --mint-400: #56e39f; /* signature mint */
  --mint-300: #8eecbf;
  --mint-200: #c3f5dc;
  --mint-100: #e6fbf1;

  /* ---- Yellow (tertiary highlight) ---- */
  --yellow-500: #ffe24d;
  --yellow-400: #ffee73;
  --yellow-300: #fff4a0;

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --gray-50: #f6f8fb;
  --gray-100: #eef1f6;
  --gray-200: #e1e6ed;
  --gray-300: #cbd3de;
  --gray-400: #9aa7b8;
  --gray-500: #6b7888;
  --gray-600: #4a5563;
  --gray-700: #2f3742;
  --gray-800: #1c232d;

  /* ---- Coral / red (MUI secondary + error) ---- */
  --coral-600: #e35754;
  --coral-500: #ef6f6c; /* MUI secondary & error */
  --coral-400: #f59896;
  --coral-100: #fdecec;
  --red-500: #ef6f6c;   /* alias — LIVE / breaking / error (product theme) */
  --red-400: #f59896;
  --amber-500: #f0a13c;
  --mint-text: #1b7a43;  /* accessible mint for text/icons on white */
  --yellow-text: #8c6a00; /* accessible amber for warning text on white */

  /* ================= Semantic aliases ================= */
  --brand-primary: var(--navy-800);
  --brand-secondary: var(--indigo-500);
  --brand-accent: var(--mint-400);
  --brand-highlight: var(--yellow-400);

  /* Backgrounds & surfaces */
  --color-bg: var(--white);
  --color-bg-muted: var(--gray-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-inverse: var(--navy-800);
  --surface-accent-soft: var(--mint-100);
  --surface-indigo-soft: var(--indigo-200);

  /* Text */
  --text-primary: var(--navy-800);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-inverse: var(--white);
  --text-on-accent: var(--navy-800);

  /* Lines & borders */
  --border-color: var(--gray-200);
  --border-strong: var(--gray-300);
  --divider: var(--gray-100);

  /* Interactive */
  --link: var(--indigo-500);
  --link-hover: var(--indigo-700);
  --focus-ring: var(--indigo-400);

  /* Status */
  --status-strong: var(--mint-400);
  --status-strong-text: var(--navy-800);
  --status-live: var(--red-500);
  --status-warn: var(--amber-500);
}
/* iMatrics typography tokens — Montserrat throughout (brand font, per Product Suite deck) */
:root {
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif; /* headings, campaign titles */
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-roboto: 'Roboto', system-ui, sans-serif; /* secondary — reader body & meta */
  --font-serif: 'Crete Round', Georgia, 'Times New Roman', serif; /* iMatrics Times masthead only */

  /* Weights actually used across brand material */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale — 1.20 minor-third-ish, tuned for product UI + slides */
  --text-2xs: 0.6875rem;  /* 11px — category labels, meta */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px — default UI body */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.375rem;   /* 38px */
  --text-4xl: 3rem;       /* 48px — campaign / hero */
  --text-5xl: 3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight: 1.15;  /* @kind other */
  --leading-snug: 1.3;    /* @kind other */
  --leading-normal: 1.5;  /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  /* Letter spacing — brand uses tracked-out uppercase for labels/eyebrows */
  --tracking-tight: -0.02em; /* @kind other */
  --tracking-normal: 0;      /* @kind other */
  --tracking-wide: 0.04em;   /* @kind other */
  --tracking-wider: 0.12em;  /* @kind other */
}
/* iMatrics spacing & layout tokens — 4px base grid */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 6rem;    /* 96 */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
}
/* iMatrics effects — radii, shadows, borders, motion.
   Brand cards are soft-cornered with diffuse shadows; pills are fully rounded.
   Signature background motif: large navy "wave/blob" shapes anchored to corners. */
:root {
  /* Corner radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default card / input */
  --radius-lg: 16px;   /* raised cards, device screens */
  --radius-xl: 24px;   /* floating info cards (Authority Profile) */
  --radius-pill: 999px;

  /* Shadows — cool, navy-tinted, diffuse (never harsh black) */
  --shadow-xs: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 6px 18px rgba(11, 37, 69, 0.10);
  --shadow-lg: 0 14px 40px rgba(11, 37, 69, 0.16);
  --shadow-float: 0 20px 60px rgba(11, 37, 69, 0.22); /* floating callout cards */

  /* Focus ring */
  --ring-width: 3px; /* @kind other */
  --ring-color: rgba(88, 108, 191, 0.45);

  /* Borders */
  --border-width: 1px; /* @kind other */

  /* Motion — quick, smooth, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Signature brand gradients */
  --gradient-navy: linear-gradient(135deg, #0b2545 0%, #274263 100%); /* @kind color */
  --gradient-mint: linear-gradient(90deg, #34cf8c 0%, #8eecbf 100%); /* @kind color */
}