/* ==========================================================================
   MCOGL — Design tokens
   Every colour here is sampled from the official logo artwork. Nothing in the
   theme hard-codes a hex value outside this file.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-italic.woff2') format('woff2-variations');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ---- Brand: sampled from assets_logo.png ---------------------------- */
  --mc-red-500:   #ED1B24;   /* droplet — ignition only */
  --mc-red-600:   #C1141C;
  --mc-red-300:   #F6787E;
  --mc-blue-600:  #004AAD;   /* swoosh — structure, interactive */
  --mc-blue-700:  #00337A;
  --mc-blue-500:  #1566CE;
  --mc-blue-300:  #8FB8EC;

  /* ---- Ground: graphite, deliberately neutral ------------------------- */
  --mc-ink-950:   #080C11;
  --mc-ink-900:   #111820;
  --mc-ink-850:   #151E28;
  --mc-ink-800:   #1A232D;
  --mc-ink-700:   #2C3944;
  --mc-ink-600:   #3D4C59;

  /* ---- Light surfaces ------------------------------------------------- */
  --mc-white:     #FFFFFF;
  --mc-bone:      #F4F6F9;
  --mc-bone-deep: #E8ECF2;
  --mc-rule:      #DCE1E8;

  /* ---- Type ----------------------------------------------------------- */
  --mc-body:      #2A333D;
  --mc-slate:     #57646F;
  --mc-muted:     #8C97A2;
  --mc-on-dark:   #E4EAF0;
  --mc-on-dark-2: #A9B6C2;

  /* ---- Families ------------------------------------------------------- */
  --ff-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --ff-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* ---- Type scale ----------------------------------------------------- */
  --fs-display: clamp(2.5rem, 5.2vw, 4.5rem);
  --fs-h1:      clamp(2rem, 3.7vw, 3.15rem);
  --fs-h2:      clamp(1.6rem, 2.7vw, 2.3rem);
  --fs-h3:      clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-lede:    clamp(1.08rem, 1.4vw, 1.28rem);
  --fs-body:    clamp(1rem, 1.02vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.72rem;
  --fs-mono:    0.8125rem;
  --fs-quote:   clamp(1.3rem, 2.1vw, 1.8rem);

  /* Expanded width axis — the display voice */
  --wd-expanded: 112;
  --wd-normal:   100;

  /* ---- Spacing (8pt) --------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --section-y:  clamp(4rem, 7.5vw, 7.5rem);
  --gutter:     clamp(1.25rem, 4vw, 2.25rem);
  --container:  min(1240px, calc(100% - 2 * var(--gutter)));
  --container-wide: min(1480px, calc(100% - 2 * var(--gutter)));
  --measure:    68ch;

  /* ---- Shape ----------------------------------------------------------- */
  /* Committed world: engineered, not soft-SaaS. One radius everywhere. */
  --radius:     4px;
  --radius-arc: 88px;   /* the swoosh echo — media wells, one corner only */

  /* ---- Elevation: declared once. Cards use a border, never both. ------- */
  --shadow-header: 0 1px 0 rgba(17, 24, 32, .08), 0 10px 30px rgba(17, 24, 32, .07);
  --shadow-menu:   0 24px 60px rgba(8, 12, 17, .18);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 180ms;
  --dur-med:  340ms;
  --dur-slow: 900ms;

  /* ---- Layers ---------------------------------------------------------- */
  --z-base: 1; --z-header: 100; --z-menu: 110; --z-backdrop: 200; --z-skip: 400;

  /* ---- Composites ------------------------------------------------------ */
  --scrim-hero: linear-gradient(
      98deg,
      rgba(8, 12, 17, .95) 0%,
      rgba(11, 16, 22, .88) 32%,
      rgba(17, 24, 32, .62) 62%,
      rgba(17, 24, 32, .34) 100%);
  --scrim-well: linear-gradient(
      180deg, rgba(8, 12, 17, 0) 42%, rgba(8, 12, 17, .78) 100%);
}