/* ==========================================================================
   MAJOR COOLING — Design tokens
   Transcribed directly from "Major Cooling Brand Guide — version 1".
   Do not introduce values that are not defined here.
   ========================================================================== */

/* --- Typeface: Outfit, self-hosted variable weight 100–900 ---------------- */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  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+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* --- 01 Colour --------------------------------------------------------
     Two surfaces, one accent. Every page is either a black page or a white
     page. Cyan does the work of every divider, eyebrow and call to action.
     No gradients, no secondary palette. */

  --mc-black:        #000000;
  --mc-white:        #ffffff;
  --mc-cyan:         #1d9ed8;
  --mc-cyan-bright:  #5ad8ff;   /* hover only — never a resting state */
  --mc-muted:        #9a9a9a;   /* muted label */

  --mc-on-black:     rgba(255, 255, 255, 0.55);  /* copy on black */
  --mc-motif-black:  rgba(255, 255, 255, 0.28);  /* motif on black */
  --mc-motif-white:  rgba(0, 0, 0, 0.09);        /* motif on white */

  /* Muted label on a WHITE ground.
     #9a9a9a measures 2.81:1 on white — below the 3:1 floor for any text,
     so the guide's muted grey is only legible on black. This is the same
     value expressed the way the guide already writes tones on the opposite
     surface ("white 55% · copy on black"), darkened until it passes AA.
     rgba(0,0,0,0.58) on white ≈ 4.9:1. */
  --mc-muted-ink:    rgba(0, 0, 0, 0.58);

  /* Hairlines derived from the two surfaces, for panel edges only. */
  --mc-hairline-black: rgba(255, 255, 255, 0.16);
  --mc-hairline-white: rgba(0, 0, 0, 0.14);

  /* --- 02 Typography ----------------------------------------------------
     Outfit throughout, in three weights. Tracking carries the character of
     the brand: uppercase is always spaced out, display type is set light
     and tight-leaded so stacked lines nearly touch. */

  --mc-font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mc-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --mc-w-display:  300;
  --mc-w-body:     350;
  --mc-w-data:     390;

  /* Display — 300 · 0.047em · lh 0.94 · uppercase */
  --mc-display-size:  clamp(36px, 5.4vw, 76px);
  --mc-display-lh:    0.94;
  --mc-display-ls:    0.047em;

  /* Heading — 350 · 0.047em · lh 1.05 · uppercase */
  --mc-heading-size:  clamp(24px, 3vw, 44px);
  --mc-heading-lh:    1.05;
  --mc-heading-ls:    0.047em;

  /* Name — 390 · 0.07em · lh 1 · uppercase */
  --mc-name-size:     30px;
  --mc-name-ls:       0.07em;

  /* Tagline — 350 · 0.075em · uppercase */
  --mc-tagline-size:  17px;
  --mc-tagline-ls:    0.075em;

  /* Label — 350 · 0.2em · uppercase */
  --mc-label-size:    12px;
  --mc-label-ls:      0.2em;

  /* Lead — 350 · 0.02em · the standfirst.
     The guide jumps straight from a 76px display to 17px body, a 4.5x drop
     with nothing between it. This is the missing step: the sentence that
     sits directly under a display headline. */
  --mc-lead-size:     clamp(18px, 1.5vw, 23px);
  --mc-lead-lh:       1.5;
  --mc-lead-ls:       0.02em;

  /* Body — 350 · 0.03em · lh 1.55 */
  --mc-body-size:     17px;
  --mc-body-lh:       1.55;
  --mc-body-ls:       0.03em;

  /* Data — 390 · 0.03em */
  --mc-data-size:     16px;
  --mc-data-ls:       0.03em;

  /* Figure — the signature number.
     Ratio taken from how instrument brands set a measured value: the unit
     is half the numeral up to 48px, then compresses, because at display
     size a half-height unit detaches from the number it belongs to.
     Leading is size + 4px throughout the display range. */
  --mc-fig-size:      64px;
  --mc-fig-lh:        68px;
  --mc-fig-unit:      40px;
  --mc-fig-unit-lh:   48px;

  /* Wordmark — set exactly as on the business card.
     MAJOR offset 0.9027em left of COOLING, lh 0.8945,
     tracking 0.0471em over 0.0345em. */
  --mc-wordmark-lh:      0.8945;
  --mc-wordmark-ls-1:    0.0471em;
  --mc-wordmark-ls-2:    0.0345em;
  --mc-wordmark-offset:  0.9027em;

  /* --- 05 Rules & elements ---------------------------------------------
     One line weight exists: 1.5px, equal to 0.4mm in print, always cyan.
     The horizontal rule is a fixed-length accent, never a full-width
     divider: 220px under a section heading, 300–440px under a display
     headline. */

  --mc-line:            1.5px;
  --mc-rule-heading:    220px;
  --mc-rule-display:    440px;
  --mc-rule-short:      60px;

  /* --- Layout ----------------------------------------------------------- */

  --mc-pad-section:  clamp(56px, 7vw, 96px);
  --mc-pad-gutter:   clamp(26px, 5vw, 96px);
  --mc-maxw:         1400px;
  --mc-measure:      62ch;   /* section intro */
  --mc-measure-tight: 52ch;  /* body in a column */

  --mc-header-h:     84px;

  /* Motion — restrained. Nothing bounces. */
  --mc-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --mc-dur:   0.4s;
}

@media (max-width: 900px) {
  :root {
    --mc-header-h: 68px;
    --mc-rule-display: 300px;
  }
}