/* ==========================================================================
   MAISUI — Design tokens
   Layer 1 of 5. Defines every variable the later layers consume.
   Nothing here targets an element; this file is the contract.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted variable fonts. No third-party CDN, so no render-blocking
   third-party connection and no privacy leak. font-display: swap means a font
   failure degrades to the system stack instead of hiding text.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Colour -----------------------------------------------------------
     Three functional colours only: navy (brand), blue (interaction),
     copper (conversion). Status colours are semantic and never decorative.
     ---------------------------------------------------------------------- */
  --ms-navy-900: #08192b;
  --ms-navy-800: #0e2740;
  --ms-navy-700: #143553;
  --ms-navy-600: #1c4468;

  --ms-ink: #0b1b2b;
  --ms-ink-soft: #3d5266;
  /* Muted metadata. Darkened from the original steel so 12px labels, captions
     and form labels clear WCAG AA (4.5:1) on every light surface. */
  --ms-steel: #55697a;
  --ms-steel-light: #93a5b4;

  --ms-line: #dce3e9;
  --ms-line-strong: #c3ceda;
  --ms-line-dark: rgba(255, 255, 255, 0.14);

  --ms-surface: #ffffff;
  --ms-surface-2: #f5f7f9;
  --ms-surface-3: #edf1f5;

  --ms-blue-600: #1b6fb5;
  --ms-blue-500: #2e86c1;
  /* Accent for dark bands. Blue-500 lands at 4.47:1 on navy, just under AA, so
     dark surfaces use this lighter tint (6.4:1) instead. */
  --ms-blue-400: #4fa3d9;
  --ms-blue-050: #eef4f9;

  /* Copper is intentionally deep enough to clear WCAG AA (4.5:1) against
     white button text: #B4560C on #FFFFFF = 4.94:1. */
  --ms-cta: #b4560c;
  --ms-cta-hover: #9a4a0a;
  --ms-cta-soft: #fdf3ea;
  --ms-cta-ink: #8f4408;

  --ms-success: #1e7a4b;
  --ms-success-soft: #eaf6ef;
  --ms-warning: #b45309;
  --ms-warning-soft: #fdf4e7;
  --ms-danger: #b3261e;
  --ms-danger-soft: #fdeceb;

  --ms-on-dark: #ffffff;
  --ms-on-dark-soft: rgba(255, 255, 255, 0.72);
  --ms-on-dark-muted: rgba(255, 255, 255, 0.56);

  /* ---- Typography ------------------------------------------------------- */
  --ms-font-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ms-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ms-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ms-fs-xs: 0.75rem;
  --ms-fs-sm: 0.875rem;
  --ms-fs-base: 1rem;
  --ms-fs-lg: 1.125rem;
  --ms-fs-xl: 1.375rem;
  --ms-fs-2xl: 1.75rem;
  --ms-fs-3xl: 2.25rem;
  --ms-fs-4xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --ms-fs-5xl: clamp(2.25rem, 1.35rem + 3.4vw, 3.75rem);

  --ms-lh-tight: 1.06;
  --ms-lh-snug: 1.24;
  --ms-lh-body: 1.62;

  --ms-track-tight: -0.022em;
  --ms-track-wide: 0.08em;
  --ms-track-wider: 0.14em;

  --ms-measure: 68ch;
  --ms-measure-wide: 78ch;

  /* ---- Space (4/8px base) ---------------------------------------------- */
  --ms-s1: 4px;
  --ms-s2: 8px;
  --ms-s3: 12px;
  --ms-s4: 16px;
  --ms-s5: 24px;
  --ms-s6: 32px;
  --ms-s7: 40px;
  --ms-s8: 48px;
  --ms-s9: 64px;
  --ms-s10: 80px;
  --ms-s11: 96px;
  --ms-s12: 128px;

  --ms-section-y: clamp(56px, 7vw, 112px);
  --ms-gutter: 20px;

  /* ---- Shape ------------------------------------------------------------ */
  --ms-radius-xs: 2px;
  --ms-radius-sm: 3px;
  --ms-radius: 4px;
  --ms-radius-pill: 999px;

  --ms-border: 1px solid var(--ms-line);
  --ms-border-strong: 1px solid var(--ms-line-strong);
  --ms-border-dark: 1px solid var(--ms-line-dark);

  /* ---- Elevation -------------------------------------------------------- */
  --ms-shadow-1: 0 1px 2px rgba(11, 27, 43, 0.06), 0 1px 1px rgba(11, 27, 43, 0.04);
  --ms-shadow-2: 0 12px 32px rgba(11, 27, 43, 0.14);

  /* ---- Z-index ---------------------------------------------------------- */
  --ms-z-base: 1;
  --ms-z-raised: 10;
  --ms-z-header: 100;
  --ms-z-drawer: 200;
  --ms-z-fab: 300;
  --ms-z-skip: 400;

  /* ---- Motion ----------------------------------------------------------- */
  --ms-dur-fast: 150ms;
  --ms-dur: 220ms;
  --ms-dur-slow: 300ms;
  --ms-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Layout ----------------------------------------------------------- */
  --ms-container: 1280px;
  --ms-header-h: 72px;
}

/* Breakpoints used across the system (documentation, not runtime values):
   480px  — large phone
   768px  — tablet: two-column evidence, drawer navigation
   1024px — small desktop: full navigation, multi-column grids
   1280px — container maximum
   1440px — desktop reference width
   390px  — mobile reference width
*/