/* ============================================================ RESPONSIVE — one scale, four sizes of screen ------------------------------------------------------------ Base is drawn at 1440px (Judi's Figma) and sits inside the LAPTOP band, so at the reference width nothing here fires. The other three bands re-declare a subset of the primitives. Bands: Notebook max-width 1399 — mobile falls in here too, for now Laptop 1400–1699 (base) — no media query; the token files Desktop 1700–1999 iMac 2000+ Every value below is Judi's finalized Figma set, read 11 Aug 2026: type 112:955 space 112:1532 width 112:1806 height 112:1970 Freeze toggle: every override is scoped `:root:not(.ice-adaptive-off)`. Put `.ice-adaptive-off` on to snap the whole system back to the 1400px base at any width. WHAT SCALES: type sizes · space · heights (2xs–2xl) · widths. WHAT DOES NOT: colour, shadow, radius, icon size, border width, tile-size, leading (unitless → scales itself), tracking (em → scales itself). ============================================================ */ /* ============================================================ NOTEBOOK — max-width 1399 (and mobile, for now) ============================================================ */ @media (max-width: 1399px) { :root:not(.ice-adaptive-off) { /* --- Type --- */ --type-h1-size: 28px; --type-h2-size: 25px; --type-h3-size: 22px; --type-h4-size: 20px; --type-h5-size: 17px; --type-h6-size: 15px; --type-h7-size: 13px; --type-body-l-size: 15px; --type-body-m-size: 13px; --type-body-s-size: 11px; --type-body-xs-size: 10px; --type-caps-l-size: 13px; --type-caps-m-size: 11px; /* --type-caps-s-size: 10 = base */ /* --- Space --- */ --space-6: 5px; --space-8: 7px; --space-10: 9px; --space-12: 11px; --space-16: 14px; --space-20: 18px; --space-24: 22px; --space-32: 30px; --space-40: 32px; --space-48: 38px; --space-64: 50px; --space-80: 66px; /* --- Heights --- */ --height-2xs: 22px; --height-xs: 25px; --height-s: 30px; --height-m: 38px; --height-l: 46px; --height-xl: 55px; --height-2xl: 64px; /* --- Widths --- */ --w-60: 56px; --w-80: 75px; --w-100: 94px; --w-120: 113px; --w-150: 142px; --w-180: 170px; --w-240: 230px; --w-300: 280px; --w-400: 380px; --w-500: 470px; --w-600: 570px; --w-700: 660px; --w-800: 760px; --w-900: 850px; --w-1000: 950px; --w-1100: 1040px; --w-1200: 1140px; } } /* ============================================================ DESKTOP — 1700–1999 ============================================================ */ @media (min-width: 1700px) and (max-width: 1999px) { :root:not(.ice-adaptive-off) { /* --- Type --- */ --type-h1-size: 33px; --type-h2-size: 29px; --type-h3-size: 26px; --type-h4-size: 23px; --type-h5-size: 20px; --type-h6-size: 17px; --type-h7-size: 15px; --type-body-l-size: 17px; --type-body-m-size: 15px; --type-body-s-size: 13px; --type-body-xs-size: 12px; --type-caps-l-size: 15px; --type-caps-m-size: 13px; --type-caps-s-size: 11px; /* --- Space --- (4 and 6 do not move in this band) */ --space-8: 9px; --space-10: 11px; --space-12: 13px; --space-16: 18px; --space-20: 22px; --space-24: 26px; --space-32: 35px; --space-40: 50px; --space-48: 60px; --space-64: 79px; --space-80: 100px; /* --- Heights --- */ --height-2xs: 26px; --height-xs: 31px; --height-s: 36px; --height-m: 46px; --height-l: 56px; --height-xl: 68px; --height-2xl: 76px; /* --- Widths --- */ --w-60: 72px; --w-80: 94px; --w-100: 116px; --w-120: 138px; --w-150: 170px; --w-180: 210px; --w-240: 270px; --w-300: 340px; --w-400: 450px; --w-500: 560px; --w-600: 670px; --w-700: 780px; --w-800: 900px; --w-900: 1020px; --w-1000: 1140px; --w-1100: 1260px; --w-1200: 1390px; } } /* ============================================================ iMAC / LARGE — 2000+ ============================================================ */ @media (min-width: 2000px) { :root:not(.ice-adaptive-off) { /* --- Type --- */ --type-h1-size: 36px; --type-h2-size: 32px; --type-h3-size: 28px; --type-h4-size: 25px; --type-h5-size: 21px; --type-h6-size: 19px; --type-h7-size: 17px; --type-body-l-size: 19px; --type-body-m-size: 17px; --type-body-s-size: 14px; --type-body-xs-size: 13px; --type-caps-l-size: 17px; --type-caps-m-size: 14px; --type-caps-s-size: 12px; /* --- Space --- */ --space-4: 5px; --space-6: 7px; --space-8: 10px; --space-10: 12px; --space-12: 14px; --space-16: 20px; --space-20: 28px; --space-24: 28px; --space-32: 38px; --space-40: 60px; --space-48: 72px; --space-64: 94px; --space-80: 120px; /* --- Heights --- */ --height-2xs: 28px; --height-xs: 34px; --height-s: 40px; --height-m: 52px; --height-l: 62px; --height-xl: 76px; --height-2xl: 84px; /* --- Widths --- */ --w-60: 84px; --w-80: 108px; --w-100: 132px; --w-120: 156px; --w-150: 190px; --w-180: 240px; --w-240: 300px; --w-300: 380px; --w-400: 500px; --w-500: 620px; --w-600: 740px; --w-700: 860px; --w-800: 1000px; --w-900: 1140px; --w-1000: 1280px; --w-1100: 1420px; --w-1200: 1580px; } }