/* =========================================================================
   Method 8 — Colors & Typography Tokens
   Source of truth: src/style/design-system.css + src/utils/design-tokens.js
   in notorious94/method8-client. Values transposed verbatim from the
   color-palette.json export the product team ships.
   ========================================================================= */

/* Inter — brand typeface. Weights 300/400/500/600/700 come from the GFonts
   CDN; Black (900) is self-hosted from the uploaded .woff2. Production
   ships @fontsource/inter (identical glyphs).

   NOTE: @import MUST come before @font-face — per CSS spec, @import rules
   are only valid at the top of a stylesheet (after @charset) and are
   silently ignored otherwise. Putting @font-face first kills the Google
   Fonts load and leaves only the Black weight, which the browser then
   substitutes for every requested weight — making everything look bold. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Inter-Black.woff2') format('woff2');
}

:root {
  /* ---------- Base ---------- */
  --color-base-white: #ffffff;
  --color-base-black: #000000;
  --color-base-transparent: #ffffff00;

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

  /* ---------- Brand (cool slate, not blue) ---------- */
  --color-brand-25: #fcfcfd;
  --color-brand-50: #f8fafc;
  --color-brand-100: #eef2f6;
  --color-brand-200: #e3e8ef;
  --color-brand-300: #cdd5df;
  --color-brand-400: #9aa4b2;
  --color-brand-500: #697586;
  --color-brand-600: #4b5565;
  --color-brand-700: #364152;
  --color-brand-800: #202939;
  --color-brand-900: #121926;
  --color-brand-950: #0d121c;

  /* ---------- Semantic — Error ---------- */
  --color-error-25: #fffbfa;
  --color-error-50: #fef3f2;
  --color-error-100: #fee4e2;
  --color-error-200: #fecdca;
  --color-error-300: #fda29b;
  --color-error-400: #f97066;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;
  --color-error-700: #b42318;
  --color-error-800: #912018;
  --color-error-900: #7a271a;

  /* ---------- Semantic — Warning ---------- */
  --color-warning-25: #fffcf5;
  --color-warning-50: #fffaeb;
  --color-warning-100: #fef0c7;
  --color-warning-200: #fedf89;
  --color-warning-300: #fec84b;
  --color-warning-400: #fdb022;
  --color-warning-500: #f79009;
  --color-warning-600: #dc6803;
  --color-warning-700: #b54708;
  --color-warning-800: #93370d;

  /* ---------- Semantic — Success ---------- */
  --color-success-25: #f6fef9;
  --color-success-50: #ecfdf3;
  --color-success-100: #dcfae6;
  --color-success-200: #abefc6;
  --color-success-300: #75e0a7;
  --color-success-400: #47cd89;
  --color-success-500: #17b26a;
  --color-success-600: #079455;
  --color-success-700: #067647;
  --color-success-800: #085d3a;
  --color-success-900: #074d31;

  /* ---------- Blue (primary accent in marketing/login) ---------- */
  --color-blue-25: #f5faff;
  --color-blue-50: #eff8ff;
  --color-blue-100: #d1e9ff;
  --color-blue-200: #b2ddff;
  --color-blue-300: #84caff;
  --color-blue-400: #53b1fd;
  --color-blue-500: #2e90fa;
  --color-blue-600: #1570ef;
  --color-blue-700: #175cd3;
  --color-blue-800: #1849a9;
  --color-blue-900: #194185;
  --color-blue-950: #102a56;

  /* ---------- Stat-card icon hues (used in dashboards) ---------- */
  --color-icon-bookopen-bg:   #eff8ff; /* programs */
  --color-icon-bookopen-fg:   #0ba5ec;
  --color-icon-file-bg:       #f4f3ff; /* assessments */
  --color-icon-file-fg:       #7a5af8;
  --color-icon-presentation-bg: #fdf4ff; /* modules */
  --color-icon-presentation-fg: #e478fa;
  --color-icon-target-bg:     #fef6ee; /* actions */
  --color-icon-target-fg:     #e04f16;

  /* ---------- Spacing (linear pixel scale) ---------- */
  --spacing-none: 0px;
  --spacing-xs:   2px;
  --spacing-sm:   4px;
  --spacing-md:   8px;
  --spacing-lg:   12px;
  --spacing-xl:   16px;
  --spacing-2xl:  20px;
  --spacing-3xl:  24px;
  --spacing-4xl:  32px;
  --spacing-5xl:  40px;
  --spacing-6xl:  48px;
  --spacing-7xl:  64px;
  --spacing-8xl:  80px;
  --spacing-9xl:  96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

  /* ---------- Radii (Method 8 uses 8/10/12 most; full-pill for chips) ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* ---------- Shadows (light only — disabled in dark mode) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.10), 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 8px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.06);
  --shadow-lg: 0 12px 16px rgba(16,24,40,0.08), 0 4px 6px rgba(16,24,40,0.03);
  --shadow-xl: 0 20px 24px rgba(16,24,40,0.08), 0 8px 8px rgba(16,24,40,0.03);
  --shadow-2xl: 0 24px 48px rgba(16,24,40,0.18);

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

  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-display-xs: 24px;
  --font-size-display-sm: 30px;
  --font-size-display-md: 36px;
  --font-size-display-lg: 48px;
  --font-size-display-xl: 60px;

  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 30px;
  --line-height-display-xs: 32px;
  --line-height-display-sm: 38px;
  --line-height-display-md: 44px;

  /* ---------- Semantic — Light Mode ---------- */
  --text-primary:   #101828;
  --text-secondary: #344054;
  --text-tertiary:  #475467;
  --text-disabled:  #667085;
  --text-placeholder: #667085;
  --text-white:     #ffffff;
  --text-on-brand:  #ffffff;

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

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

  --fg-primary:    #101828;
  --fg-secondary:  #344054;
  --fg-tertiary:   #475467;
  --fg-quaternary: #667085;
  --fg-disabled:   #98a1b2;
  --fg-white:      #ffffff;
  --fg-brand:      #4a5565;

  /* ---------- Buttons ---------- */
  --button-primary-bg:        #354152;
  --button-primary-bg-hover:  #1f2939;
  --button-primary-fg:        #ffffff;
  --button-secondary-bg:      #ffffff;
  --button-secondary-bg-hover:#f9fafb;
  --button-secondary-fg:      #344054;
  --button-secondary-border:  #d0d5dd;

  /* ---------- Navigation ---------- */
  --nav-item-bg-current: #d1e9ff;
  --nav-item-bg-hover:   #b2ddff;
  --nav-item-fg-active:  #18212f;
  --nav-item-icon-fg:    #667085;

  /* ---------- Focus ---------- */
  --focus-ring:       #b2ddff;
  --focus-ring-error: #f04437;
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"], .dark {
  --color-gray-25: #fafafa;
  --color-gray-50: #f5f5f6;
  --color-gray-100: #f0f1f1;
  --color-gray-200: #ececed;
  --color-gray-300: #cecfd2;
  --color-gray-400: #94969c;
  --color-gray-500: #85888e;
  --color-gray-600: #61646c;
  --color-gray-700: #333741;
  --color-gray-800: #1f242f;
  --color-gray-900: #161b26;
  --color-gray-950: #0c111d;

  --text-primary:   #f5f5f6;
  --text-secondary: #cecfd2;
  --text-tertiary:  #94969c;

  --bg-primary:   #0c111d;
  --bg-secondary: #161b26;
  --bg-tertiary:  #1f242f;
  --bg-brand:     #697485;
  --bg-brand-solid: #4a5565;

  --border-primary:   #333741;
  --border-secondary: #1f242f;
  --border-tertiary:  #1f242f;
  --border-brand:     #99a3b2;

  --fg-primary:    #ffffff;
  --fg-secondary:  #cecfd2;
  --fg-tertiary:   #94969c;
  --fg-quaternary: #94969c;
  --fg-brand:      #697485;

  --button-primary-bg:       #e3e8ee;
  --button-primary-bg-hover: #f8f9fb;
  --button-primary-fg:       #354152;

  --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
  --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none;

  --nav-item-bg-current: #1849a9;
  --nav-item-bg-hover:   #175cd3;
}

/* =========================================================================
   Semantic typography elements — match production rhythm.
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature-settings);
  color: var(--text-primary);
  background: var(--bg-primary);
}

.m8-display-md { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); }
.m8-display-sm { font-size: var(--font-size-display-sm); line-height: var(--line-height-display-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.m8-display-xs { font-size: var(--font-size-display-xs); line-height: var(--line-height-display-xs); font-weight: 600; color: var(--text-primary); }

h1.m8, .m8-h1 { font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; }
h2.m8, .m8-h2 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--text-primary); margin: 0; }
h3.m8, .m8-h3 { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--text-primary); margin: 0; }
h4.m8, .m8-h4 { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text-primary); margin: 0; }

.m8-body-lg { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--text-secondary); }
.m8-body-md { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-secondary); }
.m8-body-sm { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-secondary); }
.m8-body-xs { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--text-tertiary); }

.m8-label    { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); }
.m8-eyebrow  { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.5px;
               text-transform: uppercase; color: var(--text-tertiary); }
.m8-caption  { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text-tertiary); }
.m8-stat     { font-size: 30px; line-height: 38px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.01em; }