/* ============================================================================
   Method8 Design System — colors_and_type.css
   AI-enabled Assurance, Improvement & Workforce Engagement (Onwards Analytics)

   Built on an Untitled-UI foundation shared by both surfaces:
     • method8-website  (Webflow → React/Vite, Tailwind v4)
     • method8-client   (React 19 + antd v6 + Hugeicons Pro)

   Token prefix: --m8-*   ·   Font: Inter   ·   Accent: blue #2E90FA
   NOTE ON NAMING: the codebase calls its slate/navy neutral scale "brand".
   We keep that (--m8-brand-* = slate). The chromatic ACCENT is blue
   (--m8-accent = #2E90FA). Primary BUTTONS use slate; LINKS/ICONS use blue.
   ========================================================================== */

/* ----- Fonts -------------------------------------------------------------- */
@font-face { font-family:"Inter"; src:url("fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* === Base ============================================================== */
  --m8-white: #ffffff;
  --m8-black: #000000;

  /* === Gray (light mode) ================================================ */
  --m8-gray-25:  #fcfcfd;
  --m8-gray-50:  #f9fafb;
  --m8-gray-100: #f2f4f7;
  --m8-gray-200: #e4e7ec;
  --m8-gray-300: #d0d5dd;
  --m8-gray-400: #98a2b3;
  --m8-gray-500: #667085;
  --m8-gray-600: #475467;
  --m8-gray-700: #344054;
  --m8-gray-800: #182230;
  --m8-gray-900: #101828;
  --m8-gray-950: #0c111d;

  /* === Brand = Slate / Navy (primary actions, dark ink) ================= */
  --m8-brand-25:  #fcfcfd;
  --m8-brand-50:  #f8fafc;
  --m8-brand-100: #eef2f6;
  --m8-brand-200: #e3e8ef;
  --m8-brand-300: #cdd5df;
  --m8-brand-400: #9aa4b2;
  --m8-brand-500: #697586;
  --m8-brand-600: #4b5565;
  --m8-brand-700: #364152;   /* primary button bg / wordmark ink */
  --m8-brand-800: #202939;   /* primary button hover */
  --m8-brand-900: #121926;
  --m8-brand-950: #0d121c;

  /* === Blue = ACCENT (logo mark, links, active, icons) ================== */
  --m8-blue-25:  #f5faff;
  --m8-blue-50:  #eff8ff;
  --m8-blue-100: #d1e9ff;
  --m8-blue-200: #b2ddff;
  --m8-blue-300: #84caff;
  --m8-blue-400: #53b1fd;   /* logo infinity-mark stroke */
  --m8-blue-500: #2e90fa;   /* ACCENT — links, icons, focus */
  --m8-blue-600: #1570ef;
  --m8-blue-700: #175cd3;
  --m8-blue-800: #1849a9;
  --m8-blue-900: #194185;
  --m8-blue-950: #102a56;

  --m8-accent:        var(--m8-blue-500);
  --m8-accent-hover:  var(--m8-blue-600);

  /* === Semantic state scales =========================================== */
  --m8-error-25:#fffbfa; --m8-error-50:#fef3f2; --m8-error-100:#fee4e2; --m8-error-200:#fecdca;
  --m8-error-300:#fda29b; --m8-error-400:#f97066; --m8-error-500:#f04438; --m8-error-600:#d92d20;
  --m8-error-700:#b42318; --m8-error-800:#912018; --m8-error-900:#7a271a; --m8-error-950:#55160c;

  --m8-warning-25:#fffcf5; --m8-warning-50:#fffaeb; --m8-warning-100:#fef0c7; --m8-warning-200:#fedf89;
  --m8-warning-300:#fec84b; --m8-warning-400:#fdb022; --m8-warning-500:#f79009; --m8-warning-600:#dc6803;
  --m8-warning-700:#b54708; --m8-warning-800:#93370d; --m8-warning-900:#7a2e0e; --m8-warning-950:#4e1d09;

  --m8-success-25:#f6fef9; --m8-success-50:#ecfdf3; --m8-success-100:#dcfae6; --m8-success-200:#abefc6;
  --m8-success-300:#75e0a7; --m8-success-400:#47cd89; --m8-success-500:#17b26a; --m8-success-600:#079455;
  --m8-success-700:#067647; --m8-success-800:#085d3a; --m8-success-900:#074d31; --m8-success-950:#053321;

  /* === Categorical accents (charts, tags, icon tiles) ================== */
  /* Each hue: -50 tint background  ·  -500/600 solid glyph/fill            */
  --m8-purple-50:#f4f3ff; --m8-purple-100:#ebe9fe; --m8-purple-400:#9b8afb; --m8-purple-500:#7a5af8; --m8-purple-600:#6938ef; --m8-purple-700:#5925dc;
  --m8-indigo-50:#eef4ff; --m8-indigo-100:#e0eaff; --m8-indigo-400:#8098f9; --m8-indigo-500:#6172f3; --m8-indigo-600:#444ce7; --m8-indigo-700:#3538cd;
  --m8-violet-50:#f5f3ff; --m8-violet-100:#ece9fe; --m8-violet-400:#a48afb; --m8-violet-500:#875bf7; --m8-violet-600:#7839ee; --m8-violet-700:#6927da;
  --m8-pink-50:#fdf2fa;   --m8-pink-100:#fce7f6;   --m8-pink-400:#f670c7;   --m8-pink-500:#ee46bc;   --m8-pink-600:#dd2590;   --m8-pink-700:#c11574;
  --m8-orange-50:#fef6ee; --m8-orange-100:#fdead7; --m8-orange-400:#f7b27a; --m8-orange-500:#ef6820; --m8-orange-600:#e04f16; --m8-orange-700:#b93815;
  --m8-moss-50:#f5fbee;   --m8-moss-100:#e6f4d7;   --m8-moss-400:#85e13a;   --m8-moss-500:#669f2a;   --m8-moss-600:#4f7a21;   --m8-moss-700:#3f621a;
  --m8-teal-50:#f0fdf9;   --m8-teal-100:#ccfbef;   --m8-teal-400:#2ed3b7;   --m8-teal-500:#15b79e;   --m8-teal-600:#0e9384;   --m8-teal-700:#107569;
  --m8-cyan-50:#ecfdff;   --m8-cyan-100:#cff9fe;   --m8-cyan-400:#22ccee;   --m8-cyan-500:#06aed4;   --m8-cyan-600:#088ab2;   --m8-cyan-700:#0e7090;

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

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

  /* === Shadows (Untitled-UI cool-gray elevation) ====================== */
  --m8-shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --m8-shadow-sm: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --m8-shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --m8-shadow-lg: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
  --m8-shadow-xl: 0 20px 24px -4px rgba(16,24,40,.08), 0 8px 8px -4px rgba(16,24,40,.03);
  --m8-shadow-2xl: 0 24px 48px -12px rgba(16,24,40,.18);
  --m8-shadow-focus: 0 0 0 4px rgba(46,144,250,.20);  /* blue accent ring */

  /* === Typography ====================================================== */
  --m8-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --m8-feature-settings: "cv02","cv03","cv04","cv11";

  --m8-text-xs:12px;  --m8-text-sm:14px;  --m8-text-md:16px;  --m8-text-lg:18px;  --m8-text-xl:20px;
  --m8-display-xs:24px; --m8-display-sm:30px; --m8-display-md:36px; --m8-display-lg:48px; --m8-display-xl:60px; --m8-display-2xl:72px;

  --m8-lh-xs:18px; --m8-lh-sm:20px; --m8-lh-md:24px; --m8-lh-lg:28px; --m8-lh-xl:30px;
  --m8-lh-display-xs:32px; --m8-lh-display-sm:38px; --m8-lh-display-md:44px;
  --m8-lh-display-lg:60px; --m8-lh-display-xl:72px; --m8-lh-display-2xl:90px;

  /* === Semantic — text / bg / border / fg (light) ===================== */
  --m8-text-primary:#101828; --m8-text-secondary:#344054; --m8-text-tertiary:#475467;
  --m8-text-quaternary:#667085; --m8-text-placeholder:#667085; --m8-text-white:#ffffff; --m8-text-on-brand:#ffffff;

  --m8-bg-primary:#ffffff; --m8-bg-secondary:#f9fafb; --m8-bg-tertiary:#f2f4f7;
  --m8-bg-brand:#f8f9fb; --m8-bg-brand-solid:#4a5565; --m8-bg-disabled:#f2f4f7;

  --m8-border-primary:#d0d5dd; --m8-border-secondary:#e4e7ec; --m8-border-tertiary:#f2f4f7; --m8-border-brand:#697485;

  /* === Component — buttons ============================================ */
  --m8-btn-primary-bg:#364152;  --m8-btn-primary-bg-hover:#202939;  --m8-btn-primary-fg:#ffffff;
  --m8-btn-secondary-bg:#ffffff; --m8-btn-secondary-bg-hover:#f9fafb; --m8-btn-secondary-fg:#344054; --m8-btn-secondary-border:#d0d5dd;

  /* === App navigation (client sidebar) =============================== */
  --m8-nav-bg-current:#d1e9ff;  --m8-nav-bg-hover:#d1e9ff;
  --m8-nav-fg:#475467; --m8-nav-fg-active:#182230;
  --m8-nav-icon-fg:#667085; --m8-nav-icon-fg-active:#182230;
  --m8-focus-ring:#b2ddff;

  --m8-container: 1280px;   /* marketing max-width */
}

/* ============================================================================
   SEMANTIC ELEMENT CLASSES — drop-in, surface-agnostic
   ========================================================================== */
.m8-font { font-family: var(--m8-font); font-feature-settings: var(--m8-feature-settings); }

/* Display + headings (marketing scale, fluid-friendly) */
.m8-display-2xl{ font:700 var(--m8-display-2xl)/1.05 var(--m8-font); letter-spacing:-.02em; color:var(--m8-text-primary); }
.m8-display-xl { font:700 var(--m8-display-xl)/1.1  var(--m8-font); letter-spacing:-.02em; color:var(--m8-text-primary); }
.m8-display-lg { font:600 var(--m8-display-lg)/1.15 var(--m8-font); letter-spacing:-.02em; color:var(--m8-text-primary); }
.m8-display-md { font:600 var(--m8-display-md)/1.22 var(--m8-font); letter-spacing:-.02em; color:var(--m8-text-primary); }
.m8-h1 { font:600 var(--m8-display-sm)/var(--m8-lh-display-sm) var(--m8-font); letter-spacing:-.02em; color:var(--m8-text-primary); }
.m8-h2 { font:600 var(--m8-display-xs)/var(--m8-lh-display-xs) var(--m8-font); letter-spacing:-.01em; color:var(--m8-text-primary); }
.m8-h3 { font:600 var(--m8-text-xl)/var(--m8-lh-xl) var(--m8-font); color:var(--m8-text-primary); }
.m8-h4 { font:600 var(--m8-text-lg)/var(--m8-lh-lg) var(--m8-font); color:var(--m8-text-primary); }

/* Body */
.m8-body-lg { font:400 var(--m8-text-lg)/var(--m8-lh-lg) var(--m8-font); color:var(--m8-text-tertiary); }
.m8-body    { font:400 var(--m8-text-md)/var(--m8-lh-md) var(--m8-font); color:var(--m8-text-tertiary); }
.m8-body-sm { font:400 var(--m8-text-sm)/var(--m8-lh-sm) var(--m8-font); color:var(--m8-text-tertiary); }
.m8-caption { font:400 var(--m8-text-xs)/var(--m8-lh-xs) var(--m8-font); color:var(--m8-text-quaternary); }

/* Eyebrow — small blue accent label above section headings (marketing identity beat) */
.m8-eyebrow { font:600 var(--m8-text-sm)/var(--m8-lh-sm) var(--m8-font); color:var(--m8-accent); }

/* Links */
.m8-link { color:var(--m8-accent); text-decoration:none; }
.m8-link:hover { color:var(--m8-accent-hover); text-decoration:underline; }

/* === Buttons ========================================================= */
.m8-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 var(--m8-text-md)/1 var(--m8-font);
  border-radius:var(--m8-radius-md); padding:11px 18px; cursor:pointer;
  border:1px solid transparent; transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.m8-btn--primary   { background:var(--m8-btn-primary-bg); color:var(--m8-btn-primary-fg); }
.m8-btn--primary:hover { background:var(--m8-btn-primary-bg-hover); }
.m8-btn--accent    { background:var(--m8-accent); color:#fff; }
.m8-btn--accent:hover { background:var(--m8-accent-hover); }
.m8-btn--secondary { background:var(--m8-btn-secondary-bg); color:var(--m8-btn-secondary-fg); border-color:var(--m8-btn-secondary-border); box-shadow:var(--m8-shadow-xs); }
.m8-btn--secondary:hover { background:var(--m8-btn-secondary-bg-hover); }
.m8-btn--lg { font-size:var(--m8-text-lg); padding:14px 22px; border-radius:var(--m8-radius-lg); }
.m8-btn:focus-visible { outline:none; box-shadow:var(--m8-shadow-focus); }

/* === Card ============================================================ */
.m8-card {
  background:var(--m8-bg-primary); border:1px solid var(--m8-border-secondary);
  border-radius:var(--m8-radius-xl); box-shadow:var(--m8-shadow-xs);
}

/* === Badge / pill ==================================================== */
.m8-badge {
  display:inline-flex; align-items:center; gap:6px;
  font:500 var(--m8-text-sm)/1 var(--m8-font);
  padding:4px 10px; border-radius:var(--m8-radius-pill);
  border:1px solid var(--m8-border-secondary); color:var(--m8-text-secondary); background:#fff;
}
.m8-badge--accent  { background:var(--m8-blue-50);    color:var(--m8-blue-700);    border-color:var(--m8-blue-200); }
.m8-badge--success { background:var(--m8-success-50); color:var(--m8-success-700); border-color:var(--m8-success-200); }
.m8-badge--warning { background:var(--m8-warning-50); color:var(--m8-warning-700); border-color:var(--m8-warning-200); }
.m8-badge--error   { background:var(--m8-error-50);   color:var(--m8-error-700);   border-color:var(--m8-error-200); }

/* === Icon tile (Hugeicons on pastel tint — marketing + app) ========= */
.m8-icon-tile {
  display:grid; place-items:center; aspect-ratio:1; width:48px;
  border-radius:var(--m8-radius-lg); background:var(--m8-blue-50);
}
.m8-icon-tile img, .m8-icon-tile svg { width:24px; height:24px; }