/** * @file Global Configuration Entry * @description Imports the modular configuration system. */ /* * @file Palette Configuration * @description Core palette, alphas, overlays, and semantic colors. */ /* @import "palette/config.css"; */ /** * @file Theming Configuration * @description Core palette, alphas, overlays, and semantic colors. * This files is a fallsafe for when oklch generation engine is not supported * Touch this file only if you need deep support for brand colors in old versions of browsers. */ :where(:root) { /* * @part Brand Colors: Primary, Accent */ /* Primary Color (#eec14c, hsl(43 83% 62%)) */ --p-h: 43; --p-s: 83%; --p-l: 62%; --p: var(----p, hsl(var(--p-h, 43) var(--p-s, 83%) var(--p-l, 62%))); /* Accent Color (#ffb900, hsl(44 100% 50%)) */ --a-h: 44; --a-s: 100%; --a-l: 50%; --a: var(----a, hsl(var(--a-h, 44) var(--a-s, 100%) var(--a-l, 50%))); /* *@part Neutral Colors: Dark, Light, Grays */ /* Dark Color (#141414, hsl(0 0% 8%)) */ --d-h: 0; --d-s: 0%; --d-l: 8%; --d: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%)); /* Dark Bold Color (#0a0a0a, hsl(0 0% 4%)) */ --d-l-bd: 4%; --d-bd: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l-bd, 4%)); /* Dark Lite Color (#1f1f1f, hsl(0 0% 12%)) */ --d-l-lt: 12%; --d-lt: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l-lt, 12%)); /* Dark xBold Color (#030303, hsl(0 0% 1%)) */ --d-l-xbd: 0%; --d-xbd: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l-xbd, 1%)); /* Dark xLite Color (#292929, hsl(0 0% 16%)) */ --d-l-xlt: 16%; --d-xlt: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l-xlt, 16%)); /* Light Color (#f5f5f5, hsl(0 0% 96%)) */ --l-h: 0; --l-s: 0%; --l-l: 96%; --l: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%)); /* Light Bold Color (#fafafa, hsl(0 0% 98%)) */ --l-l-bd: 98%; --l-bd: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l-bd, 98%)); /* Light Lite Color (#ececec, hsl(0 0% 93%)) */ --l-l-lt: 93%; --l-lt: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l-lt, 93%)); /* Light xBold Color (#ffffff, hsl(0 0% 100%)) */ --l-l-xbd: 100%; --l-xbd: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l-xbd, 100%)); /* Light xLite Color (#e6e6e6, hsl(0 0% 90%)) */ --l-l-xlt: 90%; --l-xlt: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l-xlt, 90%)); /* Neutral (Gray) Color (#808080, hsl(0 0% 50%)) */ --n-h: 0; --n-s: 0%; --n-l: 50%; --n: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l, 50%)); /* Gray Lite Color (#a3a3a3, hsl(0 0% 64%)) */ --n-l-lt: 64%; --n-lt: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l-lt, 64%)); /* Gray Bold Color (#525252, hsl(0 0% 32%)) */ --n-l-bd: 32%; --n-bd: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l-bd, 32%)); /* Gray xLite Color (#ccc, hsl(0 0% 80%)) */ --n-l-xlt: 80%; --n-xlt: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l-xlt, 80%)); /* Gray xBold Color (#3d3d3d, hsl(0 0% 24%)) */ --n-l-xbd: 24%; --n-xbd: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l-xbd, 24%)); /* Grays (For those who prefer --neu convention instead of --n) */ /* --neu: var(--n, hsl(0 0% 50%));*/ /* --neu-lt: var(--n-lt, hsl(0 0% 64%));*/ /* --neu-bd: var(--n-bd, hsl(0 0% 32%));*/ /* * @part Additional Brand Colors: Secondary & Tertiary */ /* Secondary Gunmetal (#263238, hsl(200 19% 18%)) */ --sy-h: 200; --sy-s: 19%; --sy-l: 18%; --sy: var(----sec, hsl(var(--sy-h, 200) var(--sy-s, 19%) var(--sy-l, 18%))); --sec: var(--sy, var(--alt-lt, var(--contrast-lt))); /* Tertiary Sand (#F5F0E6, hsl(40 33% 93%)) */ --ty-h: 40; --ty-s: 33%; --ty-l: 93%; --ty: var(----ter, hsl(var(--ty-h, 40) var(--ty-s, 33%) var(--ty-l, 93%))); --ter: var(--ty, var(--bg-lt, var(--base-lt))); /* * @part Text on Colors */ /* Text on Colors */ --on-p: var(--sec, var(--d, hsl(0 0% 8%))); --on-a: var(--d-bd, hsl(0 0% 4%)); --on-d: var(--l, hsl(0 0% 96%)); --on-l: var(--d, hsl(0 0% 8%)); --on-sec: var(--ter, var(--l-bd, hsl(0 0% 100%))); --on-ter: var(--sec, var(--d-lt, hsl(200 19% 18%))); } :where(:root) { /* * @part Core Colors: Overlays */ /* Light Overlays (overlay.css) hsl(0 0% 96% / .64) / hsl(0 0% 96% / .8) / hsl(0 0% 96% / .32) */ --o-l-bd: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-bd, .8)); --o-l: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al, .64)); --o-l-lt: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-lt, .32)); --o-l-xlt: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-xlt, .16)); --o-l-ult: hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-ult, .08)); /* Dark Overlays (overlay.css) hsl(0 0% 8% / .64) / hsl(0 0% 8% / .8) / hsl(0 0% 8% / .32) */ --o-d-bd: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-bd, .8)); --o-d: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al, .64)); --o-d-lt: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-lt, .32)); --o-d-xlt: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-xlt, .16)); --o-d-ult: hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-ult, .08)); /* Neutral Overlays (overlay.css) hsl(0 0% 50% / .64) / hsl(0 0% 50% / .8) / hsl(0 0% 50% / .32) */ --o-n-bd: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l, 50%) / var(--al-bd, .8)); --o-n: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l, 50%) / var(--al, .64)); --o-n-lt: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l, 50%) / var(--al-lt, .32)); --o-n-xlt: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l, 50%) / var(--al-xlt, .16)); --o-n-ult: hsl(var(--n-h, 0) var(--n-s, 0%) var(--n-l, 50%) / var(--al-ult, .08)); /* * @part Extended Additional Colors: Brand Overlays */ /* Contextual Variants of Brand overlays (set.css) */ --o-p-bd: hsl(var(--p-h, 43) var(--p-s, 83%) var(--p-l, 62%) / var(--al-bd, .8)); --o-p: hsl(var(--p-h, 43) var(--p-s, 83%) var(--p-l, 62%) / var(--al, .64)); --o-p-lt: hsl(var(--p-h, 43) var(--p-s, 83%) var(--p-l, 62%) / var(--al-lt, .32)); --o-p-xlt: hsl(var(--p-h, 43) var(--p-s, 83%) var(--p-l, 62%) / var(--al-xlt, .16)); --o-p-ult: hsl(var(--p-h, 43) var(--p-s, 83%) var(--p-l, 62%) / var(--al-ult, .08)); --o-a-bd: hsl(var(--a-h, 44) var(--a-s, 100%) var(--a-l, 50%) / var(--al-bd, .8)); --o-a: hsl(var(--a-h, 44) var(--a-s, 100%) var(--a-l, 50%) / var(--al, .64)); --o-a-lt: hsl(var(--a-h, 44) var(--a-s, 100%) var(--a-l, 50%) / var(--al-lt, .32)); --o-a-xlt: hsl(var(--a-h, 44) var(--a-s, 100%) var(--a-l, 50%) / var(--al-xlt, .16)); --o-a-ult: hsl(var(--a-h, 44) var(--a-s, 100%) var(--a-l, 50%) / var(--al-ult, .08)); --o-sec: hsl(var(--sec-h, 200) var(--sec-s, 19%) var(--sec-l, 18%) / var(--al-lt, .32)); --o-ter: hsl(var(--ter-h, 40) var(--ter-s, 33%) var(--ter-l, 93%) / var(--al-lt, .32)); } :where(:root) { /* * @part Contextual Colors: Backgrounds & Alternatives */ /* Backgrounds: Base Contexts */ --bg: var(--l, hsl(0 0% 96%)); --bg-bd: var(--l-bd, hsl(0 0% 98%)); --bg-lt: var(--l-lt, hsl(0 0% 93%)); /* Alternative: Contrast Contexts */ --alt: var(--d, hsl(0 0% 8%)); --alt-bd: var(--d-bd, hsl(0 0% 4%)); --alt-lt: var(--d-lt, hsl(0 0% 12%)); /* Base Colors (For those who prefer --base instead of --bg) */ /* --base: var(--l, hsl(0 0% 96%)); */ /* --base-bd: var(--l-bd, hsl(0 0% 100%)); */ /* --base-lt: var(--l-lt, hsl(0 0% 93%)); */ /* Alternative Colors (For those who prefer --contrast instead of --alt) */ /* --contrast: var(--l, hsl(0 0% 96%)); */ /* --contrast-bd: var(--l-bd, hsl(0 0% 100%)); */ /* --contrast-lt: var(--l-lt, hsl(0 0% 93%)); */ /* * @part Contextual Colors: Overlays */ /* Background (overlay.css) hsl(0 0% 96% / .64 | .32 | .8 | .16 | .08) */ --o-bg-bd: var(--o-l-bd, hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-bd, .8))); --o-bg: var(--o-l, hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al, .64))); --o-bg-lt: var(--o-l-lt, hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-lt, .32))); --o-bg-xlt: var(--o-l-xlt, hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-xlt, .16))); --o-bg-ult: var(--o-l-ult, hsl(var(--l-h, 0) var(--l-s, 0%) var(--l-l, 96%) / var(--al-ult, .08))); /* Alt (overlay.css) hsl(0 0% 8% / .64 | .32 | .8 | .16 | .08) */ --o-alt-bd: var(--o-d-bd, hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-bd, .8))); --o-alt: var(--o-d, hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al, .64))); --o-alt-lt: var(--o-d-lt, hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-lt, .32))); --o-alt-xlt: var(--o-d-xlt, hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-xlt, .16))); --o-alt-ult: var(--o-d-ult, hsl(var(--d-h, 0) var(--d-s, 0%) var(--d-l, 8%) / var(--al-ult, .08))); } :where(:root) { /* * @part Pattern Colors: Text, Titles, Surface & Card */ /* Main Typography Colors */ --tx: var(--alt, var(--contrast, hsl(0 0% 8%))); --tl: var(--alt-bd, var(--contrast-bd, hsl(0 0% 4%))); /* Surface & Card context (Light Mode) */ --srf: var(--bg-lt, var(--base-lt, hsl(0 0% 93%))); --elv: var(--bg-bd, var(--base-bd, hsl(0 0% 98%))); --pnl: var(--bg-bd, var(--base-bd, hsl(0 0% 98%))); --crd: var(--bg-bd, var(--base-bd, hsl(0 0% 98%))); /** * @group Pro: Detailed Contextual Colors */ /* * @part Extended Additional Colors: On Colors */ --on-bg: var(--tx, var(--alt, var(--contrast, hsl(0 0% 8%)))); --on-alt: var(--bg, var(--base, hsl(0 0% 96%))); --on-srf: var(--tl, var(--alt-bd, var(--contrast-bd, hsl(0 0% 4%)))); --on-elv: var(--tx, var(--alt, var(--contrast, hsl(0 0% 8%)))); --on-crd: var(--tx, var(--alt, var(--contrast, hsl(0 0% 8%)))); --on-ntf: var(--tl, var(--alt-bd, var(--contrast-bd, hsl(0 0% 4%)))); /* * @part Outline Globals: Outlines & Borders */ /* Outlines & Borders */ --out: var(--alt-lt, var(--contrast-lt, hsl(0 0% 12%))); --out-p: var(--p, hsl(43 83% 62%)); --out-a: var(--a, hsl(44 100% 50%)); --out-d: var(--d, hsl(0 0% 8%)); --out-l: var(--l, hsl(0 0% 96%)); /* Outlines Extended */ --out-sec: var(--sec, hsl(200 19% 18%)); --out-ter: var(--ter, hsl(40 33% 93%)); } :where(:root) { /** * @group Advanced: Semantic & Extended Palette */ /* * @part Notification Colors: Success, Alert, Info, Tip, Spotlight */ --ntf-al: var(--al-lt, .32); /* Notification: Success Green (#1E8E3E, hsl(137 65% 34%)) */ --scs-h: 137; --scs-s: 65%; --scs-l: 34%; --scs: hsl(var(--scs-h, 137) var(--scs-s, 65%) var(--scs-l, 34%)); --o-scs: hsl(var(--scs-h, 137) var(--scs-s, 65%) var(--scs-l, 34%) / var(--ntf-al, .32)); --green: var(--scs); --o-green: var(--o-scs); /* Notification: Alert Red (#D93025, hsl(4 71% 50%)) */ --alr-h: 4; --alr-s: 71%; --alr-l: 50%; --alr: hsl(var(--alr-h, 4) var(--alr-s, 71%) var(--alr-l, 50%)); --o-alr: hsl(var(--alr-h, 4) var(--alr-s, 71%) var(--alr-l, 50%) / var(--ntf-al, .32)); --red: var(--alr); --o-red: var(--o-alr); /* Notification: Info Blue (#1A73E8, hsl(214 82% 51%)) */ --inf-h: 214; --inf-s: 82%; --inf-l: 51%; --inf: hsl(var(--inf-h, 214) var(--inf-s, 82%) var(--inf-l, 51%)); --o-inf: hsl(var(--inf-h, 214) var(--inf-s, 82%) var(--inf-l, 51%) / var(--ntf-al, .32)); --blue: var(--inf); --o-blue: var(--o-inf); /* Notification: Tip Purple (#8E24AA, hsl(287 65% 40%)) */ --tip-h: 287; --tip-s: 65%; --tip-l: 40%; --tip: hsl(var(--tip-h, 287) var(--tip-s, 65%) var(--tip-l, 40%)); --o-tip: hsl(var(--tip-h, 287) var(--tip-s, 65%) var(--tip-l, 40%) / var(--ntf-al, .32)); --purple: var(--tip); --o-purple: var(--o-tip); /* Notification: Spotlight Yellow (#eec14c, hsl(43 83% 62%)) */ --ntf-h: var(--p-h, 43); --ntf-s: var(--p-s, 83%); --ntf-l: var(--p-l, 62%); --ntf: hsl(var(--ntf-h, 43) var(--ntf-s, 83%) var(--ntf-l, 62%)); --o-ntf: hsl(var(--ntf-h, 43) var(--ntf-s, 83%) var(--ntf-l, 62%) / var(--ntf-al, .32)); --yellow: var(--ntf); --o-yellow: var(--o-ntf); } /** * @file scheme.css * @description Context-aware overrides for Dark/Light mode utilizing Base OKLCH/HSL tokens. */ /* ========================================================= 1. OS DARK MODE Applies automatically if the OS is dark, UNLESS the user explicitly forces a 'light' class. ========================================================= */ @media (prefers-color-scheme: dark) { :where(:root):not([data-scheme="light"], [data-color-mode="light"], .light, .is-light, .light-mode, .is-light-mode) { /* Light Background*/ ----bg: var(----d, #141414); /* Dark Background*/ ----alt: var(----l, #f5f5f5); /* Map Backgrounds to Dark Tokens */ --bg: var(--d); --bg-bd: var(--d-bd); --bg-lt: var(--d-lt); --bg-xlt: var(--d-xlt); --bg-xbd: var(--d-xbd); /* Base color mappings */ /* --base: var(--d); --base-bd: var(--d-bd); --base-lt: var(--d-lt); --base-xlt: var(--d-xlt); --base-xbd: var(--d-xbd); */ /* Map Contrast to Light Tokens */ --alt: var(--l); --alt-bd: var(--l-bd); --alt-lt: var(--l-lt); --alt-xlt: var(--l-xlt); --alt-xbd: var(--l-xbd); /* Contrast color mappings */ /* --contrast: var(--l); --contrast-bd: var(--l-bd); --contrast-lt: var(--l-lt); --contrast-xlt: var(--l-xlt); --contrast-xbd: var(--l-xbd); */ /* Map Overlays */ --o-bg: var(--o-d); --o-bg-bd: var(--o-d-bd); --o-bg-lt: var(--o-d-lt); --o-bg-xlt: var(--o-d-xlt); --o-bg-ult: var(--o-d-ult); --o-alt: var(--o-l); --o-alt-bd: var(--o-l-bd); --o-alt-lt: var(--o-l-lt); --o-alt-xlt: var(--o-l-xlt); --o-alt-ult: var(--o-l-ult); /* Surface & Card context */ --srf: var(--bg-bd, var(--base-bd, hsl(0 0% 4%))); --elv: var(--bg-lt, var(--base-lt, hsl(0 0% 12%))); --pnl: var(--bg-lt, var(--base-lt, hsl(0 0% 12%))); --crd: var(--bg-lt, var(--base-lt, hsl(0 0% 12%))); /* Secondary & Tertiary */ --sec: var(--t, #f5f0e6); --ter: var(--s, #263238); } } /* ========================================================= 2. MANUAL DARK MODE Forces dark mode regardless of OS settings. ========================================================= */ :where(:root):is([data-scheme="dark"], [data-color-mode="dark"], .dark, .is-dark, .dark-mode, .is-dark-mode) { /* Light Background*/ ----bg: var(----d, #141414); /* Dark Background*/ ----alt: var(----l, #f5f5f5); /* Theme Mapping */ --bg: var(--d); --bg-bd: var(--d-bd); --bg-lt: var(--d-lt); --bg-xlt: var(--d-xlt); --bg-xbd: var(--d-xbd); /* Base color mappings */ /* --base: var(--d); --base-bd: var(--d-bd); --base-lt: var(--d-lt); --base-xlt: var(--d-xlt); --base-xbd: var(--d-xbd); */ --alt: var(--l); --alt-bd: var(--l-bd); --alt-lt: var(--l-lt); --alt-xlt: var(--l-xlt); --alt-xbd: var(--l-xbd); /* Contrast color mappings */ /* --contrast: var(--l); --contrast-bd: var(--l-bd); --contrast-lt: var(--l-lt); --contrast-xlt: var(--l-xlt); --contrast-xbd: var(--l-xbd); */ /* Map Overlays */ --o-bg: var(--o-d); --o-bg-bd: var(--o-d-bd); --o-bg-lt: var(--o-d-lt); --o-bg-xlt: var(--o-d-xlt); --o-bg-ult: var(--o-d-ult); --o-alt: var(--o-l); --o-alt-bd: var(--o-l-bd); --o-alt-lt: var(--o-l-lt); --o-alt-xlt: var(--o-l-xlt); --o-alt-ult: var(--o-l-ult); /* Surface & Card context */ --srf: var(--bg-bd, var(--base-bd, hsl(0 0% 4%))); --elv: var(--bg-lt, var(--base-lt, hsl(0 0% 12%))); --pnl: var(--bg-lt, var(--base-lt, hsl(0 0% 12%))); --crd: var(--bg-lt, var(--base-lt, hsl(0 0% 12%))); /* Secondary & Tertiary */ --sec: var(--t, #f5f0e6); --ter: var(--s, #263238); } /* ========================================================= 3. MANUAL LIGHT MODE Forces light mode, overriding OS Dark Mode. ========================================================= */ :where(:root):is([data-scheme="light"], [data-color-mode="light"], .light, .is-light, .light-mode, .is-light-mode) { /* Light Background*/ ----bg: var(----l, #f5f5f5); /* Dark Background*/ ----alt: var(----d, #141414); /* Theme Mapping */ /* Re-asserts light assignments to override media query */ --bg: var(--l); --bg-bd: var(--l-bd); --bg-lt: var(--l-lt); --alt: var(--d); --alt-bd: var(--d-bd); --alt-lt: var(--d-lt); --o-bg: var(--o-l); --o-bg-bd: var(--o-l-bd); --o-bg-lt: var(--o-l-lt); --o-bg-xlt: var(--o-l-xlt); --o-bg-ult: var(--o-l-ult); --o-alt: var(--o-d); --o-alt-bd: var(--o-d-bd); --o-alt-lt: var(--o-d-lt); --o-alt-xlt: var(--o-d-xlt); --o-alt-ult: var(--o-d-ult); } /* * @file Palette Engine * @description Palette generation engine. * You never really need to touch this file. */ /* * ========================================================= * THE OKLCH BRAND ENGINE (Modern Browsers) * ========================================================= */ /* * ========================================================= * THE OKLCH BRAND ENGINE (Modern Browsers) * ========================================================= */ @supports (color: oklch(from var(----p) l c h)) { :where(:root) { /* -------------------------------------------------- 1. PRIMARY BRAND -------------------------------------------------- */ --p: oklch(from var(----p, #eec14c) l c h); --p-lt: oklch(from var(--p) calc(l + 0.12) c h); --p-bd: oklch(from var(--p) calc(l - 0.12) c h); --p-xlt: oklch(from var(--p) calc(l + 0.24) c h); --p-xbd: oklch(from var(--p) calc(l - 0.24) c h); /* -------------------------------------------------- 2. ACCENT (Input OR Vivid Primary) -------------------------------------------------- */ --a: oklch(from var(----a, oklch(from var(--p) calc(l - 0.02) calc(c + 0.06) h)) l c h); --a-lt: oklch(from var(--a) calc(l + 0.12) c h); --a-bd: oklch(from var(--a) calc(l - 0.12) c h); --a-xlt: oklch(from var(--a) calc(l + 0.24) c h); --a-xbd: oklch(from var(--a) calc(l - 0.24) c h); /* -------------------------------------------------- 3. DARKS (Input OR Deep Brand Tint) -------------------------------------------------- */ --d: oklch(from var(----d, oklch(from var(--p) 0.18 0.01 h)) l c h); /* Softer dark */ --d-lt: oklch(from var(--d) calc(l + 0.06) c h); /* Deeper dark */ --d-bd: oklch(from var(--d) calc(l - 0.04) c h); /* Lightest dark */ --d-xlt: oklch(from var(--d) calc(l + 0.12) c h); /* Near black */ --d-xbd: oklch(from var(--d) calc(l - 0.08) c h); /* -------------------------------------------------- 4. LIGHTS (Input OR Pale Brand Tint) -------------------------------------------------- */ --l: oklch(from var(----l, oklch(from var(--p) 0.96 0.005 h)) l c h); /* Softer light (darker) */ --l-lt: oklch(from var(--l) calc(l - 0.03) c h); /* Crisper light (whiter) */ --l-bd: oklch(from var(--l) calc(l + 0.02) c h); /* Darkest light */ --l-xlt: oklch(from var(--l) calc(l - 0.06) c h); /* Pure white max */ --l-xbd: oklch(from var(--l) calc(l + 0.04) c h); /* -------------------------------------------------- 5. Neutral (Gray) (Input OR Mid-tone Brand Tint) -------------------------------------------------- */ --n: oklch(from var(----n, oklch(from var(--p) 0.55 0.01 h)) l c h); --n-lt: oklch(from var(--n) calc(l + 0.15) c h); --n-bd: oklch(from var(--n) calc(l - 0.15) c h); --n-xlt: oklch(from var(--n) calc(l + 0.25) c h); --n-xbd: oklch(from var(--n) calc(l - 0.25) c h); /* --neu: oklch(from var(----neu, oklch(from var(--p) 0.55 0.01 h)) l c h); --neu-lt: oklch(from var(--neu) calc(l + 0.15) c h); --neu-bd: oklch(from var(--neu) calc(l - 0.15) c h); --neu-xlt: oklch(from var(--neu) calc(l + 0.25) c h); --neu-xbd: oklch(from var(--neu) calc(l - 0.25) c h); */ /* -------------------------------------------------- 6. SECONDARY (Input OR "Gunmetal" Brand Tint) -------------------------------------------------- */ --s: oklch(from var(----sec, oklch(from var(--p) 0.28 0.03 h)) l c h); --s-lt: oklch(from var(--s) calc(l + 0.12) c h); --s-bd: oklch(from var(--s) calc(l - 0.08) c h); --s-xlt: oklch(from var(--s) calc(l + 0.20) c h); --s-xbd: oklch(from var(--s) calc(l - 0.14) c h); --sec: var(--s); --sec-lt: var(--s-lt); --sec-bd: var(--s-bd); --sec-xlt: var(--s-xlt); --sec-xbd: var(--s-xbd); /* -------------------------------------------------- 7. TERTIARY (Input OR "Sand" Brand Tint) -------------------------------------------------- */ --t: oklch(from var(----ter, oklch(from var(--p) 0.94 0.02 h)) l c h); /* Sand slightly darker */ --t-lt: oklch(from var(--t) calc(l - 0.04) c h); /* Sand whiter */ --t-bd: oklch(from var(--t) calc(l + 0.04) c h); --t-xlt: oklch(from var(--t) calc(l - 0.08) c h); --t-xbd: oklch(from var(--t) calc(l + 0.06) c h); --ter: var(--t); --ter-lt: var(--t-lt, var(--l-lt)); --ter-bd: var(--t-bd, var(--l-bd)); --ter-xlt: var(--t-xlt, var(--l-xlt)); --ter-xbd: var(--t-xbd, var(--l-xbd)); /* -------------------------------------------------- 8. CONTRAST ENGINE (Auto Black/White text) -------------------------------------------------- */ /* Math logic: If lightness is below 0.45, calculation is positive (makes it white). If lightness is above 0.45, calculation is negative (makes it black). */ --on-p: oklch(from var(--p) calc((0.45 - l) * 9999999) 0 h); --on-a: oklch(from var(--a) calc((0.45 - l) * 9999999) 0 h); --on-d: oklch(from var(--d) calc((0.45 - l) * 9999999) 0 h); --on-l: oklch(from var(--l) calc((0.45 - l) * 9999999) 0 h); --on-n: oklch(from var(--n) calc((0.45 - l) * 9999999) 0 h); --on: oklch(from currentColor calc((0.45 - l) * 9999999) 0 h); } } /* * ========================================================= * THE OKLCH BRAND Overlays (Modern Browsers) * ========================================================= */ @supports (color: oklch(from var(----p) l c h)) { :where(:root) { /* Light Overlays (overlay.css) hsl(0 0% 96% / .64) / hsl(0 0% 96% / .8) / hsl(0 0% 96% / .32) */ --o-l-bd: oklch(from var(--l) l c h / var(--al-bd, .8)); --o-l: oklch(from var(--l) l c h / var(--al, .64)); --o-l-lt: oklch(from var(--l) l c h / var(--al-lt, .32)); --o-l-xlt: oklch(from var(--l) l c h / var(--al-xlt, .16)); --o-l-ult: oklch(from var(--l) l c h / var(--al-ult, .08)); /* Dark Overlays (overlay.css) hsl(0 0% 8% / .64) / hsl(0 0% 8% / .8) / hsl(0 0% 8% / .32) */ --o-d-bd: oklch(from var(--d) l c h / var(--al-bd, .8)); --o-d: oklch(from var(--d) l c h / var(--al, .64)); --o-d-lt: oklch(from var(--d) l c h / var(--al-lt, .32)); --o-d-xlt: oklch(from var(--d) l c h / var(--al-xlt, .16)); --o-d-ult: oklch(from var(--d) l c h / var(--al-ult, .08)); /* Neutral Overlays (overlay.css) hsl(0 0% 50% / .64) / hsl(0 0% 50% / .8) / hsl(0 0% 50% / .32) */ --o-n-bd: oklch(from var(--n) l c h / var(--al-bd, .8)); --o-n: oklch(from var(--n) l c h / var(--al, .64)); --o-n-lt: oklch(from var(--n) l c h / var(--al-lt, .32)); --o-n-xlt: oklch(from var(--n) l c h / var(--al-xlt, .16)); --o-n-ult: oklch(from var(--n) l c h / var(--al-ult, .08)); /* Contextual Variants of Brand overlays (set.css) */ --o-p-bd: oklch(from var(--p) l c h / var(--al-bd, .8)); --o-p: oklch(from var(--p) l c h / var(--al, .64)); --o-p-lt: oklch(from var(--p) l c h / var(--al-lt, .32)); --o-p-xlt: oklch(from var(--p) l c h / var(--al-xlt, .16)); --o-p-ult: oklch(from var(--p) l c h / var(--al-ult, .08)); --o-a-bd: oklch(from var(--a) l c h / var(--al-bd, .8)); --o-a: oklch(from var(--a) l c h / var(--al, .64)); --o-a-lt: oklch(from var(--a) l c h / var(--al-lt, .32)); --o-a-xlt: oklch(from var(--a) l c h / var(--al-xlt, .16)); --o-a-ult: oklch(from var(--a) l c h / var(--al-ult, .08)); --o-sec: oklch(from var(--sec) l c h / var(--al-lt, .32)); --o-ter: oklch(from var(--ter) l c h / var(--al-lt, .32)); } } /* * ========================================================= * THE OKLCH BRAND Notifications (Modern Browsers) * ========================================================= */ @supports (color: oklch(from var(----p) l c h)) { :where(:root) { /* Opacity for blur variants */ /* -------------------------------------------------- Notification: Success Green (Hue base: 137) -------------------------------------------------- */ --scs: oklch(from var(--p) 0.55 calc(c + 0.02) 137); --scs-lt: oklch(from var(--p) 0.96 0.02 137); --o-scs: oklch(from var(--p) 0.75 calc(c * 0.5) 137 / var(--ntf-al, .32)); --on-scs: oklch(from var(--scs) calc((0.45 - l) * 1000) 0 h); /* -------------------------------------------------- Notification: Alert Red (Hue base: 4) -------------------------------------------------- */ --alr: oklch(from var(--p) 0.55 calc(c + 0.02) 4); --alr-lt: oklch(from var(--p) 0.96 0.02 4); --o-alr: oklch(from var(--p) 0.75 calc(c * 0.5) 4 / var(--ntf-al, .32)); --on-alr: oklch(from var(--alr) calc((0.45 - l) * 1000) 0 h); /* -------------------------------------------------- Notification: Info Blue (Hue base: 214) -------------------------------------------------- */ --inf: oklch(from var(--p) 0.55 calc(c + 0.02) 214); --inf-lt: oklch(from var(--p) 0.96 0.02 214); --o-inf: oklch(from var(--p) 0.75 calc(c * 0.5) 214 / var(--ntf-al, .32)); --on-inf: oklch(from var(--inf) calc((0.45 - l) * 1000) 0 h); /* -------------------------------------------------- Notification: Tip Purple (Hue base: 287) -------------------------------------------------- */ --tip: oklch(from var(--p) 0.55 calc(c + 0.02) 287); --tip-lt: oklch(from var(--p) 0.96 0.02 287); --o-tip: oklch(from var(--p) 0.75 calc(c * 0.5) 287 / var(--ntf-al, .32)); --on-tip: oklch(from var(--tip) calc((0.45 - l) * 1000) 0 h); /* -------------------------------------------------- Notification: Spotlight (Inherits Brand Hue exactly) -------------------------------------------------- */ --ntf: oklch(from var(--p) 0.55 calc(c + 0.02) h); --ntf-lt: oklch(from var(--p) 0.96 0.02 h); --o-ntf: oklch(from var(--p) 0.75 calc(c * 0.5) h / var(--ntf-al, .32)); --on-ntf: oklch(from var(--ntf) calc((0.45 - l) * 1000) 0 h); } } @supports (color: oklch(from var(----p) l c h)) { :where(:root) { /* -------------------------------------------------- CONTEXTUAL ENGINE: BACKGROUNDS & ALT Derives from custom ---bg/---alt hexes if provided. Falls back to engine's perfectly scaled --l and --d. -------------------------------------------------- */ /* Backgrounds */ --bg: oklch(from var(----bg, var(--l)) l c h); /* Softer surface */ --bg-lt: oklch(from var(--bg) calc(l - 0.03) c h); /* Elevated surface */ --bg-bd: oklch(from var(--bg) calc(l + 0.02) c h); /* Softest surface */ --bg-xlt: oklch(from var(--bg) calc(l + 0.12) c h); /* Boldest surface */ --bg-xbd: oklch(from var(--bg) calc(l - 0.08) c h); /* Alternative / Text Context */ --alt: oklch(from var(----alt, var(--d)) l c h); /* Softer text */ --alt-lt: oklch(from var(--alt) calc(l + 0.06) c h); /* Bolder text */ --alt-bd: oklch(from var(--alt) calc(l - 0.04) c h); /* Softest */ --alt-xlt: oklch(from var(--alt) calc(l + 0.12) c h); /* Boldest */ --alt-xbd: oklch(from var(--alt) calc(l - 0.08) c h); /* Contextual Overlays (OKLCH) */ --o-bg-bd: oklch(from var(--bg) l c h / var(--al-bd, .8)); --o-bg: oklch(from var(--bg) l c h / var(--al, .64)); --o-bg-lt: oklch(from var(--bg) l c h / var(--al-lt, .32)); --o-bg-xlt: oklch(from var(--bg) l c h / var(--al-xlt, .16)); --o-bg-ult: oklch(from var(--bg) l c h / var(--al-ult, .08)); --o-alt-bd: oklch(from var(--alt) l c h / var(--al-bd, .8)); --o-alt: oklch(from var(--alt) l c h / var(--al, .64)); --o-alt-lt: oklch(from var(--alt) l c h / var(--al-lt, .32)); --o-alt-xlt: oklch(from var(--alt) l c h / var(--al-xlt, .16)); --o-alt-ult: oklch(from var(--alt) l c h / var(--al-ult, .08)); } } :where(:root) { /* * @part Pattern Colors: Text, Titles, Surface & Card */ /* Main Typography Colors */ --tx: var(--alt, var(--contrast, hsl(0 0% 8%))); --tl: var(--alt-bd, var(--contrast-bd, hsl(0 0% 4%))); /* Surface & Card context */ /* Surface & Card context (Light Mode) */ --srf: var(--bg-lt, var(--base-lt, hsl(0 0% 93%))); --elv: var(--bg-bd, var(--base-bd, hsl(0 0% 98%))); --pnl: var(--bg-bd, var(--base-bd, hsl(0 0% 98%))); --crd: var(--bg-bd, var(--base-bd, hsl(0 0% 98%))); /** * @group Pro: Detailed Contextual Colors */ /* * @part Extended Additional Colors: On Colors */ --on-sec: var(--ter, var(--l-bd, hsl(0 0% 100%))); --on-ter: var(--sec, var(--d-lt, hsl(200 19% 18%))); --on-bg: var(--tx, var(--alt, var(--contrast, hsl(0 0% 8%)))); --on-alt: var(--bg, var(--base, hsl(0 0% 96%))); --on-srf: var(--tl, var(--alt-bd, var(--contrast-bd, hsl(0 0% 4%)))); --on-elv: var(--tx, var(--alt, var(--contrast, hsl(0 0% 8%)))); --on-crd: var(--tx, var(--alt, var(--contrast, hsl(0 0% 8%)))); --on-ntf: var(--tl, var(--alt-bd, var(--contrast-bd, hsl(0 0% 4%)))); /* * @part Outline Globals: Outlines & Borders */ /* Outlines & Borders */ --out: var(--alt-lt, var(--contrast-lt, hsl(0 0% 12%))); --out-p: var(--p, hsl(43 83% 62%)); --out-a: var(--a, hsl(44 100% 50%)); --out-d: var(--d, hsl(0 0% 8%)); --out-l: var(--l, hsl(0 0% 96%)); /* Outlines Extended */ --out-sec: var(--sec, hsl(200 19% 18%)); --out-ter: var(--ter, hsl(40 33% 93%)); } /** * @file Constant Values Configuration Entry * @description Imports modular configuration system. */ /* * @file Shape Configuration * @description Shape defining variables: radius, aspect-ratio. */ :where(:root) { /* ========================================= */ /* ASPECT RATIOS (Static Constants) */ /* Use for: aspect-ratio: var(--ar-video) */ /* ========================================= */ /* 1:1 (Square - Avatars, Grid items) */ --ar-box: 1; --ar-square: 1; --ar-sq: 1 / 1; --ar-1: 1; /* Photography & UI */ /* 5:4 (Social Media / Product Photo) */ --ar-social: 1.25; --ar-product: 1.25; --ar-5-4: 5/4; /* 4:3 (Standard Photo / Older TV) */ --ar-standard: 1.33333; --ar-tv: 1.33333; --ar-4-3: 4/3; /* 3:2 (Classic 35mm Photography) */ --ar-photo: 1.5; --ar-35mm: 1.5; --ar-3-2: 3/2; /* Golden Ratio */ --ar-gold: 1.618; --ar-gv: 1 / 1.618; /* Video & Cinema */ /* 16:9 (HD Video) */ --ar-hd: 16/9; --ar-video: 16/9; --ar-16-9: 16/9; /* 21:9 (Ultrawide / Cinema) */ --ar-uw: 21/9; --ar-cinema: 21/9; --ar-21-9: 21/9; /* Vertical Formats */ /* 4:5 (Instagram Vertical) */ --ar-feed: 0.8; --ar-inst: 0.8; --ar-4-5: 4/5; /* 2:3 (Pinterest / Vertical Photo) */ --ar-pin: 0.66666; --ar-2-3: 2/3; /* 3:4 (Portrait / Card) */ --ar-portrait: 0.75; --ar-card: 0.75; --ar-3-4: 3/4; /* 9:16 (Mobile Story / TikTok / Shorts) */ --ar-story: 0.5625; --ar-9-16: 9/16; /* Paper Formats (Portrait / Landscape) */ --ar-a: 1.4141; --ar-l: 1/1.414; /* 1:2 */ --ar-1-2: 1/2; /* 2:1 */ --ar-2-1: 2/1; /* ================================================================= */ /* RADII (Static Shape Definition) */ /* Use for: border-radius */ /* RULE: Use --rad-* (em) for text-bound components (buttons, tags). */ /* RULE: Use --rad-r* (rem) for structural elements (cards, modals). */ /* ================================================================= */ /* Border Widths Scale */ --bdw-0: 0; /* 1px */ --bdw-s: .0625rem; /* 2px */ --bdw-m: .125rem; /* 4px */ --bdw-l: .25rem; /* Zero (Override) */ --rad-0: 0; /* --- COMPONENT RADII (Using 'em' to scale with font-size) --- */ /* 2px (Checkboxes, tiny tags) */ --rad-3xs: 0.125em; --rad-r3xs: 0.125rem; /* 4px (Buttons, Inputs) */ --rad-2xs: 0.25em; --rad-r2xs: 0.25rem; /* 6px (Inner elements, small cards) */ --rad-xs: 0.375em; --rad-rxs: 0.375rem; /* 8px (Standard Cards / UI Base) */ --rad-s: 0.5em; --rad-rs: 0.5rem; /* 10px (Slightly softer UI elements) */ --rad-m: 0.625em; --rad-rm: 0.625rem; /* --- MACRO RADII (Using 'rem' for structural consistency) --- */ /* 12px (Modern/Soft UI Cards) */ --rad-l: 0.75em; --rad-rl: 0.75rem; /* 16px (Large Panels, Featured Cards) */ --rad-xl: 1em; --rad-rxl: 1rem; /* 24px (Modals, Dialogs) */ --rad-2xl: 1.5em; --rad-r2xl: 1.5rem; /* 32px (Drawers/Bottom Sheets) */ --rad-3xl: 2em; --rad-r3xl: 2rem; /* 48px (Drawers/Bottom Sheets) */ --rad-e: 3em; --rad-re: 3rem; /* 64px */ --rad-xe: 4em; --rad-rxe: 4rem; /* --- ABSOLUTE SHAPES --- */ /* Pill Shape (Buttons, Badges) */ --rad-p: 9999px; --rad-r: 9999px; --pill: 9999px; /* Perfect Circle (Avatars, FABs) */ --rad-c: 50%; --circle: 50%; --round: 50%; /* ========================================= */ /* Z-INDEX STACK */ /* A managed spatial system to prevent overlap bugs */ /* ========================================= */ /* Hide */ --z-hide: -1; --z-f: -1; /* Base Content */ --z-base: 0; --z-0: 0; /* Elevated Content (Cards, Buttons) */ --z-elev: 10; --z-10: 10; /* Dropdowns, Sticky Headers */ --z-dock: 40; --z-40: 40; /* Overlays, Backdrops */ --z-mask: 50; --z-50: 50; /* Modals, Dialogs, Popups */ --z-pop: 100; --z-100: 100; /* Toasts, Urgent Notifications */ --z-top: 999; --z-999: 999; } /** * @file Spacing & Sizing Utilities Configuration * @description Spacing scales, edge offsets, and sizing. */ /* ========================================= */ /* CLAMP INSTRUCTIONS START */ /* ========================================= */ /* 1. Define Breakpoints in rem (1rem = 16px) */ /* Min Clamp Query Breakpoint: 480px = 30rem | 528px = 33rem */ /* --cq-sm: 30; --mq-sm: 33; */ /* Max Clamp Query Breakpoint: 1280px = 80rem | 1408px = 88rem */ /* --cq-lg: 80; --mq-lg: 88; */ /* Typography Unit */ /* ---u: 1rem; */ /* 2. Calculate the Fluid Factor (a value that goes from 0 to 1rem) */ /* Fluid Factor "X" Formula: (current - min) / (max - min) */ /* ---x: calc((100vw - (var(--mq-sm, 33) * var(---u, 1rem))) / (var(--mq-lg, 88) - var(--mq-sm, 33))); */ /* 3. Setup the Scale Variables */ /* Min Value: 1rem (16px) */ /* ---min: 1; */ /* Max Value: 1.125rem (18px) */ /* ---max: 1.125; */ /* Responsive Fluid Value: min + (range * factor) */ /* ---fluid: calc((var(---min, 1) * var(---u, 1rem)) + (var(---max, 1.125) - var(---min, 1)) * var(---x, 0.72rem)); */ /* 4. The Final Clamp */ /* Clamp Formula: clamp(min, fluid, max) */ /* ---clamp: clamp(calc(var(---min, 1) * var(---u, 1rem)), var(---fluid, calc((var(---min, 1) * var(---u, 1rem)) + (var(---max, 1.125) - var(---min, 1)) * var(---x, 0.72rem))), calc(var(---max, 1.125) * var(---u, 1rem))); */ /* ========================================= */ /* CLAMP INSTRUCTIONS END */ /* ========================================= */ :where(:root) { /* ========================================= */ /* EXTRA TINY SPACING (Static Micro-Values) */ /* ========================================= */ /* 2px */ ---3xt: 0.125rem; ---e3xt: 0.125em; /* 4px */ ---2xt: 0.25rem; ---e2xt: 0.25em; /* 6px */ ---xt: 0.375rem; ---ext: 0.375em; /* 8px (Base Unit) */ ---t: 0.5rem; ---et: 0.5em; /* ========================================= */ /* CLAMPS FALLBACK FOR NON-SUPPORTING BROWSERS */ /* ========================================= */ /* 10px */ ---3xs: 0.625rem; ---e3xs: 0.625em; /* 12px */ ---2xs: 0.75rem; ---e2xs: 0.75em; /* 14px */ ---xs: 0.875rem; ---exs: 0.875em; /* 16px */ ---s: 1rem; ---es: 1em; /* 20px */ ---m: 1.25rem; ---em: 1.25em; /* 24px */ ---l: 1.5rem; ---el: 1.5em; /* 28px */ ---xl: 1.75rem; /* 32px */ ---2xl: 2rem; /* 40px */ ---3xl: 2.5rem; /* 48px */ ---e: 3rem; /* 56px */ ---xe: 3.5rem; /* 64px */ ---2xe: 4rem; /* 72px */ ---3xe: 4.5rem; /* 80px */ ---g: 5rem; /* 88px */ ---xg: 5.5rem; /* 96px */ ---2xg: 6rem; /* 112px */ ---3xg: 7rem; /* 128px */ ---c: 8rem; /* 160px */ ---xc: 10rem; /* 192px */ ---2xc: 12rem; /* 256px */ ---3xc: 16rem; /* ========================================= */ /* WCAG Sizes */ /* ========================================= */ /* Inverted ~ 32px */ ---xx: 2rem; /* WCAG AA ~ 44px Tap Area */ ---tap: 2.75rem; /* WCAG AAA ~ 28px Icon Size */ ---i: 1.75rem; /* ========================================= */ /* HEADER SIZES */ /* ========================================= */ /* 64px */ ---hs: 4rem; ---xhs: calc(var(---xg) + var(---hs)); /* 80px */ ---hm: 5rem; ---xhm: calc(var(---xg) + var(---hm)); /* ========================================= */ /* VIEWPORT HEIGHTS (Y-Axis Constraints) */ /* ========================================= */ /* Standard fallback */ ---fvh: 100vh; /* Small viewport (excluding URL bar) - Best for mobile modals */ ---fsvh: 100svh; /* Large viewport (including URL bar space) */ ---flvh: 100lvh; /* Dynamic viewport (adapts as user scrolls) - Best for Heroes */ ---fdvh: 100dvh; } @supports (gap: clamp(1rem, 1.5rem, 2rem)) { :where(:root) { /* ========================================= */ /* CLAMP ENGINE DEFINITIONS */ /* ========================================= */ /* Base Unit */ ---u: 1rem; /* Fluid Factor */ ---x: calc((100vw - (var(--mq-sm, 33) * var(---u, 1rem))) / (var(--mq-lg, 88) - var(--mq-sm, 33))); /* ========================================= */ /* SPACING (UI Components) */ /* ========================================= */ /* * 10px ~ 12px * Smallest fluid spacing * (e.g --{} | .abc > abc) */ ---3xs-min: 0.625; ---3xs-max: 0.75; ---3xs: clamp(calc(var(---3xs-min) * var(---u, 1rem)), calc((var(---3xs-min) * var(---u, 1rem)) + (var(---3xs-max) - var(---3xs-min)) * var(---x, 0.72rem)), calc(var(---3xs-max) * var(---u, 1rem))); /* var(---3xs, clamp(0.625rem, calc(0.625rem + 0.125 * (100cqi - 33rem) / 55), 0.75rem)) */ /* * 12px ~ 14px * Row gap between element items | gap between list items | button gap * (e.g --{} | .abc > abc) */ ---2xs-min: 0.75; ---2xs-max: 0.875; ---2xs: clamp(calc(var(---2xs-min) * var(---u, 1rem)), calc((var(---2xs-min) * var(---u, 1rem)) + (var(---2xs-max) - var(---2xs-min)) * var(---x, 0.72rem)), calc(var(---2xs-max) * var(---u, 1rem))); /* var(---2xs, clamp(0.75rem, calc(0.75rem + 0.125 * (100cqi - 33rem) / 55), 0.875rem)) */ /* * 14px ~ 16px * Gap between icons | tags | content | default flex gap * (e.g --{} | .abc > abc) */ ---xs-min: 0.875; ---xs-max: 1; ---xs: clamp(calc(var(---xs-min) * var(---u, 1rem)), calc((var(---xs-min) * var(---u, 1rem)) + (var(---xs-max) - var(---xs-min)) * var(---x, 0.72rem)), calc(var(---xs-max) * var(---u, 1rem))); /* var(---xs, clamp(0.875rem, calc(0.875rem + 0.125 * (100cqi - 33rem) / 55), 1rem)) */ /* * 16px ~ 20px * Gap between elements | buttons group | card content gap | default section > * > content row gap (content area) * (e.g --{} | .abc > abc) */ ---s-min: 1; ---s-max: 1.25; ---s: clamp(calc(var(---s-min) * var(---u, 1rem)), calc((var(---s-min) * var(---u, 1rem)) + (var(---s-max) - var(---s-min)) * var(---x, 0.72rem)), calc(var(---s-max) * var(---u, 1rem))); /* var(---s, clamp(1rem, calc(1rem + 0.25 * (100cqi - 33rem) / 55), 1.25rem)) */ /* * 20px ~ 24px * ABC: * (e.g --{} | .abc > abc) */ ---m-min: 1.25; ---m-max: 1.5; ---m: clamp(calc(var(---m-min) * var(---u, 1rem)), calc((var(---m-min) * var(---u, 1rem)) + (var(---m-max) - var(---m-min)) * var(---x, 0.72rem)), calc(var(---m-max) * var(---u, 1rem))); /* var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem)) */ /* * 24px ~ 28px * ABC: * (e.g --{} | .abc > abc) */ ---l-min: 1.5; ---l-max: 1.75; ---l: clamp(calc(var(---l-min) * var(---u, 1rem)), calc((var(---l-min) * var(---u, 1rem)) + (var(---l-max) - var(---l-min)) * var(---x, 0.72rem)), calc(var(---l-max) * var(---u, 1rem))); /* var(---l, clamp(1.5rem, calc(1.5rem + 0.25 * (100cqi - 33rem) / 55), 1.75rem)) */ /* * 28px ~ 32px * Default grid gap | Default card padding * (e.g --{} | .abc > abc) */ ---xl-min: 1.75; ---xl-max: 2; ---xl: clamp(calc(var(---xl-min) * var(---u, 1rem)), calc((var(---xl-min) * var(---u, 1rem)) + (var(---xl-max) - var(---xl-min)) * var(---x, 0.72rem)), calc(var(---xl-max) * var(---u, 1rem))); /* var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem)) */ /* * 32px ~ 36px * ABC: * (e.g --{} | .abc > abc) */ ---2xl-min: 2; ---2xl-max: 2.25; ---2xl: clamp(calc(var(---2xl-min) * var(---u, 1rem)), calc((var(---2xl-min) * var(---u, 1rem)) + (var(---2xl-max) - var(---2xl-min)) * var(---x, 0.72rem)), calc(var(---2xl-max) * var(---u, 1rem))); /* var(---2xl, clamp(2rem, calc(2rem + 0.25 * (100cqi - 33rem) / 55), 2.25rem)) */ /* * 36px ~ 40px * ABC: * (e.g --{} | .abc > abc) */ ---3xl-min: 2.25; ---3xl-max: 2.5; ---3xl: clamp(calc(var(---3xl-min) * var(---u, 1rem)), calc((var(---3xl-min) * var(---u, 1rem)) + (var(---3xl-max) - var(---3xl-min)) * var(---x, 0.72rem)), calc(var(---3xl-max) * var(---u, 1rem))); /* var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem)) */ /* * 40px ~ 48px * Grid Default Gap * (e.g --{} | .abc > abc) */ ---e-min: 2.5; ---e-max: 3; ---e: clamp(calc(var(---e-min) * var(---u, 1rem)), calc((var(---e-min) * var(---u, 1rem)) + (var(---e-max) - var(---e-min)) * var(---x, 0.72rem)), calc(var(---e-max) * var(---u, 1rem))); /* var(---e, clamp(2.5rem, calc(2.5rem + 0.5 * (100cqi - 33rem) / 55), 3rem)) */ /* * 48px ~ 56px * Default section > container row gap (Between content parts) | section > * > content column-gap * (e.g --{} | .abc > abc) */ ---xe-min: 3; ---xe-max: 3.5; ---xe: clamp(calc(var(---xe-min) * var(---u, 1rem)), calc((var(---xe-min) * var(---u, 1rem)) + (var(---xe-max) - var(---xe-min)) * var(---x, 0.72rem)), calc(var(---xe-max) * var(---u, 1rem))); /* var(---xe, clamp(3rem, calc(3rem + 0.5 * (100cqi - 33rem) / 55), 3.5rem)) */ /* * 56px ~ 64px * Default section > container column gap (Split content) * (e.g --{} | .abc > abc) */ ---2xe-min: 3.5; ---2xe-max: 4; ---2xe: clamp(calc(var(---2xe-min) * var(---u, 1rem)), calc((var(---2xe-min) * var(---u, 1rem)) + (var(---2xe-max) - var(---2xe-min)) * var(---x, 0.72rem)), calc(var(---2xe-max) * var(---u, 1rem))); /* var(---2xe, clamp(3.5rem, calc(3.5rem + 0.5 * (100cqi - 33rem) / 55), 4rem)) */ /* * 64px ~ 72px * ABC: * (e.g --{} | .abc > abc) */ ---3xe-min: 4; ---3xe-max: 4.5; ---3xe: clamp(calc(var(---3xe-min) * var(---u, 1rem)), calc((var(---3xe-min) * var(---u, 1rem)) + (var(---3xe-max) - var(---3xe-min)) * var(---x, 0.72rem)), calc(var(---3xe-max) * var(---u, 1rem))); /* var(---3xe, clamp(4rem, calc(4rem + 0.5 * (100cqi - 33rem) / 55), 4.5rem)) */ /* * 72px ~ 80px * ABC: * (e.g --{} | .abc > abc) */ ---g-min: 4.5; ---g-max: 5; ---g: clamp(calc(var(---g-min) * var(---u, 1rem)), calc((var(---g-min) * var(---u, 1rem)) + (var(---g-max) - var(---g-min)) * var(---x, 0.72rem)), calc(var(---g-max) * var(---u, 1rem))); /* var(---g, clamp(4.5rem, calc(4.5rem + 0.5 * (100cqi - 33rem) / 55), 5rem)) */ /* * 80px ~ 96px * Default Section Gap * (e.g --s-g-- | .s) */ ---xg-min: 5; ---xg-max: 6; ---xg: clamp(calc(var(---xg-min) * var(---u, 1rem)), calc((var(---xg-min) * var(---u, 1rem)) + (var(---xg-max) - var(---xg-min)) * var(---x, 0.72rem)), calc(var(---xg-max) * var(---u, 1rem))); /* var(---xg, clamp(5rem, calc(5rem + 1 * (100cqi - 33rem) / 55), 6rem)) */ /* * 96px ~ 112px * ABC: * (e.g --{} | .abc > abc) */ ---2xg-min: 6; ---2xg-max: 7; ---2xg: clamp(calc(var(---2xg-min) * var(---u, 1rem)), calc((var(---2xg-min) * var(---u, 1rem)) + (var(---2xg-max) - var(---2xg-min)) * var(---x, 0.72rem)), calc(var(---2xg-max) * var(---u, 1rem))); /* var(---2xg, clamp(6rem, calc(6rem + 1 * (100cqi - 33rem) / 55), 7rem)) */ /* * 112px ~ 128px * Default Section Padding Block * (e.g --s-pb-- | .s) */ ---3xg-min: 7; ---3xg-max: 8; ---3xg: clamp(calc(var(---3xg-min) * var(---u, 1rem)), calc((var(---3xg-min) * var(---u, 1rem)) + (var(---3xg-max) - var(---3xg-min)) * var(---x, 0.72rem)), calc(var(---3xg-max) * var(---u, 1rem))); /* var(---3xg, clamp(7rem, calc(7rem + 1 * (100cqi - 33rem) / 55), 8rem)) */ /* * 128px ~ 160px * ABC: * (e.g --{} | .abc > abc) */ ---c-min: 8; ---c-max: 10; ---c: clamp(calc(var(---c-min) * var(---u, 1rem)), calc((var(---c-min) * var(---u, 1rem)) + (var(---c-max) - var(---c-min)) * var(---x, 0.72rem)), calc(var(---c-max) * var(---u, 1rem))); /* var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem)) */ /* * 160px ~ 192px * ABC: * (e.g --{} | .abc > abc) */ ---xc-min: 10; ---xc-max: 12; ---xc: clamp(calc(var(---xc-min) * var(---u, 1rem)), calc((var(---xc-min) * var(---u, 1rem)) + (var(---xc-max) - var(---xc-min)) * var(---x, 0.72rem)), calc(var(---xc-max) * var(---u, 1rem))); /* var(---xc, clamp(10rem, calc(10rem + 2 * (100cqi - 33rem) / 55), 12rem)) */ /* * 192px ~ 256px * Default 4-column desktop, 3-column tablet grid card size: * (e.g --g-min | .g) */ ---2xc-min: 12; ---2xc-max: 16; ---2xc: clamp(calc(var(---2xc-min) * var(---u, 1rem)), calc((var(---2xc-min) * var(---u, 1rem)) + (var(---2xc-max) - var(---2xc-min)) * var(---x, 0.72rem)), calc(var(---2xc-max) * var(---u, 1rem))); /* var(---2xc, clamp(12rem, calc(12rem + 4 * (100cqi - 33rem) / 55), 16rem)) */ /* * 256px ~ 320px * Default 3-column desktop, 2-column tablet grid card size: * (e.g --{} | .abc > abc) */ ---3xc-min: 16; ---3xc-max: 20; ---3xc: clamp(calc(var(---3xc-min) * var(---u, 1rem)), calc((var(---3xc-min) * var(---u, 1rem)) + (var(---3xc-max) - var(---3xc-min)) * var(---x, 0.72rem)), calc(var(---3xc-max) * var(---u, 1rem))); /* var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)) */ /* * 64px ~ 80px * Secondary header row height * (e.g ---hs | .hs) */ ---hs-min: 4; ---hs-max: 5; ---hs: clamp(calc(var(---hs-min) * var(---u, 1rem)), calc((var(---hs-min) * var(---u, 1rem)) + (var(---hs-max) - var(---hs-min)) * var(---x, 0.72rem)), calc(var(---hs-max) * var(---u, 1rem))); /* var(---hs, clamp(4rem, calc(4rem + 1 * (100cqi - 33rem) / 55), 5rem)) */ /* * 80px ~ 128px * Main header row height * (e.g ---h | .h) */ ---hm-min: 5; ---hm-max: 8; ---hm: clamp(calc(var(---hm-min) * var(---u, 1rem)), calc((var(---hm-min) * var(---u, 1rem)) + (var(---hm-max) - var(---hm-min)) * var(---x, 0.72rem)), calc(var(---hm-max) * var(---u, 1rem))); /* var(---hm, clamp(5rem, calc(5rem + 3 * (100cqi - 33rem) / 55), 8rem)) */ /* * 44px ~ 32px * Mobile to Desktop tap area size | icon button size * (e.g --{} | .abc > abc) */ ---xx-min: 2.75; ---xx-max: 2; ---xx: clamp(calc(var(---xx-max) * var(---u, 1rem)), calc((var(---xx-min) * var(---u, 1rem)) + (var(---xx-max) - var(---xx-min)) * var(---x, 0.72rem)), calc(var(---xx-min) * var(---u, 1rem))); /* var(---xx, clamp(2rem, calc(2.75rem - 0.75 * (100cqi - 33rem) / 55), 2.75rem)) */ } } @supports (container-type: inline-size) { :where(:root) { /* ========================================= */ /* CONTAINER QUERY SUPPORT (FLUID FACTOR) */ /* ========================================= */ ---x: calc((100cqi - (var(--cq-sm, 30) * var(---u, 1rem))) / (var(--cq-lg, 80) - var(--cq-sm, 30))); } } :where(:root) { /* ========================================= */ /* READING LENGTHS (Character Units) */ /* ========================================= */ /* Narrow columns, sidebars */ --ch-xs: 24ch; /* Introductions, large callout text */ --ch-s: 40ch; /* The golden standard for paragraph readability */ --ch-m: 64ch; /* Maximum comfortable width for dense data text */ --ch-l: 80ch; /* ========================================= */ /* STATIC CONTENT WIDTHS (Internal Max) */ /* Use for: Text articles, narrow sub-grids */ /* ========================================= */ /* 320px - Cards / Narrow Column */ --ct-2xs: 20rem; --ct-xxs: var(--ct-2xs); /* 384px - Forms / Narrow Focus */ --ct-xs: 24rem; /* 512px - Reading Column */ --ct-s: 32rem; /* 640px - Golden Reading Width (~65ch) */ --ct-m: 40rem; /* 768px - Tablet Standard / Feature Text */ --ct-l: 48rem; /* 896px - Large Article / Intro Block */ --ct-xl: 56rem; /* ========================================= */ /* COLOSSAL WIDTHS (Static Macro Layout) */ /* Use for: .sc max-widths (Section Wrappers)*/ /* ========================================= */ /* 1024px - Extra Narrow Container */ --c-xs: 64rem; /* 1120px - Narrow Container */ --c-s: 70rem; /* 1280px - Normal Container */ --c-m: 80rem; /* 1360px - Main Wide Standard */ --c-l: 85rem; /* 1440px - Wide / Desktop Base */ --c-xl: 90rem; /* 1600px - Extra Wide / Dashboard Base */ --c-2xl: 100rem; --c-xxl: 100rem; /* 1920px - Ultra Wide / Full HD */ --c-3xl: 120rem; --c-xxxl: 120rem; /* Full Bleed */ --c-f: 100%; /* ========================================= */ /* A5 Size(Static Macro Layout) */ /* Use for: .sc max-widths (Section Wrappers)*/ /* ========================================= */ --a3: 297mm; --a3x: 420mm; --a4: 210mm; --a4x: 297mm; --a5: 148mm; --a5x: 210mm; --a6: 105mm; --a6x: 148mm; } :where(:root) { /* ========================================= */ /* PERCENTILES (Layout Fractions) */ /* Use for: Widths, flex-basis, grid-cols */ /* ========================================= */ /* Micro & Standard */ --p1: 1%; --p2: 2%; --p3: 3%; --p4: 4%; --p5: 5%; --p6: 6%; --p7: 7%; --p8: 8%; --p9: 9%; --p10: 10%; --p12: 12%; --p15: 15%; --p20: 20%; --p25: 25%; --p30: 30%; --p33: 33.333%; --p40: 40%; --p50: 50%; --p60: 60%; --p66: 66.666%; --p75: 75%; --p80: 80%; --p90: 90%; --p100: 100%; /* Video / Media Specific */ /* 9/16 (Intrinsic ratio for 16:9 embeds) */ --p56: 56.25%; /* Guardrail 5% (Safe Edges) */ /* Min: 24px | Mid: ~48px | Max: 64px */ --p5f: clamp(1.5rem, 5%, 4rem); } /* Cycle: query.css */ /** * @file Font Constants * @description Font sizes, line heights, and weights. */ /* ========================================= */ /* CLAMP INSTRUCTIONS START */ /* ========================================= */ /* 1. Define Breakpoints in rem (1rem = 16px) */ /* Min Clamp Query Breakpoint: 480px = 30rem | 528px = 33rem */ /* --cq-sm: 30; --mq-sm: 33; */ /* Max Clamp Query Breakpoint: 1280px = 80rem | 1408px = 88rem */ /* --cq-lg: 80; --mq-lg: 88; */ /* Typography Unit */ /* --fz-u: 1rem; */ /* 2. Calculate the Fluid Factor (a value that goes from 0 to 1rem) */ /* Fluid Factor "X" Formula: (current - min) / (max - min) */ /* --fz-x: calc((100vw - (var(--mq-sm, 33) * var(--fz-u, 1rem))) / (var(--mq-lg, 88) - var(--mq-sm, 33))); */ /* 3. Setup the Scale Variables */ /* Min Value: 1rem (16px) */ /* --fz-min: 1; */ /* Max Value: 1.125rem (18px) */ /* --fz-max: 1.125; */ /* Responsive Fluid Value: min + (range * factor) */ /* --fz-fluid: calc((var(--fz-min, 1) * var(--fz-u, 1rem)) + (var(--fz-max, 1.125) - var(--fz-min, 1)) * var(--fz-x, 0.72rem)); */ /* 4. The Final Clamp */ /* Clamp Formula: clamp(min, fluid, max) */ /* --fz-clamp: clamp(calc(var(--fz-min, 1) * var(--fz-u, 1rem)), var(--fz-fluid, calc((var(--fz-min, 1) * var(--fz-u, 1rem)) + (var(--fz-max, 1.125) - var(--fz-min, 1)) * var(--fz-x, 0.72rem))), calc(var(--fz-max, 1.125) * var(--fz-u, 1rem))); */ /* ========================================= */ /* CLAMP INSTRUCTIONS END */ /* ========================================= */ :where(:root) { /* ========================================= */ /* FALLBACK FOR NON-SUPPORTING BROWSERS */ /* ========================================= */ --fz-3xs: 0.75rem; --fz-2xs: 0.8125rem; --fz-xs: 0.875rem; --fz-s: 1rem; --fz-m: 1.125rem; --fz-l: 1.25rem; --fz-xl: 1.375rem; --fz-2xl: 1.5rem; --fz-3xl: 1.75rem; --fz-e: 2rem; --fz-xe: 2.25rem; --fz-2xe: 2.5rem; --fz-3xe: 2.75rem; --fz-g: 3rem; --fz-xg: 3.5rem; --fz-2xg: 4rem; --fz-3xg: 4.5rem; --fz-c: 5rem; --fz-xc: 6rem; } @supports (font-size: clamp(1rem, 1.5rem, 2rem)) { :where(:root) { /* ========================================= */ /* CLAMP ENGINE DEFINITIONS */ /* ========================================= */ /* Base Unit */ --fz-u: 1rem; /* Fluid Factor */ --fz-x: calc((100vw - (var(--mq-sm, 33) * var(--fz-u, 1rem))) / (var(--mq-lg, 88) - var(--mq-sm, 33))); /* ========================================= */ /* FLUID FONT SIZES (--fz) */ /* ========================================= */ /* --- MICRO TEXT (Badges, Tooltips, Meta) --- */ /* * Size (px): 12px -> 13px * Use: Badges, Microcopy */ --fz-3xs-min: 0.75; --fz-3xs-max: 0.8125; --fz-3xs: clamp(calc(var(--fz-3xs-min) * var(--fz-u, 1rem)), calc((var(--fz-3xs-min) * var(--fz-u, 1rem)) + (var(--fz-3xs-max) - var(--fz-3xs-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-3xs-max) * var(--fz-u, 1rem))); /* var(--fz-3xs, clamp(0.75rem, calc(0.75rem + 0.0625 * (100vw - 33rem) / 55), 0.8125rem)) */ /* * Size (px): 13px -> 14px * Use: Captions, Tooltip, Subcopy */ --fz-2xs-min: 0.8125; --fz-2xs-max: 0.875; --fz-2xs: clamp(calc(var(--fz-2xs-min) * var(--fz-u, 1rem)), calc((var(--fz-2xs-min) * var(--fz-u, 1rem)) + (var(--fz-2xs-max) - var(--fz-2xs-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-2xs-max) * var(--fz-u, 1rem))); /* var(--fz-2xs, clamp(0.8125rem, calc(0.8125rem + 0.0625 * (100vw - 33rem) / 55), 0.875rem)) */ /* * Size (px): 14px -> 16px * Use: Small UI / Label, Meta, Tag, Chip, Pill, Eyebrow, Overline, Copy */ --fz-xs-min: 0.875; --fz-xs-max: 1; --fz-xs: clamp(calc(var(--fz-xs-min) * var(--fz-u, 1rem)), calc((var(--fz-xs-min) * var(--fz-u, 1rem)) + (var(--fz-xs-max) - var(--fz-xs-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-xs-max) * var(--fz-u, 1rem))); /* var(--fz-xs, clamp(0.875rem, calc(0.875rem + 0.125 * (100vw - 33rem) / 55), 1rem)) */ /* --- BODY TEXT (Paragraphs, Ledes) --- */ /* * Size (px): 16px -> 18px * Use: Secondary Text / Subtext, Subline, Kicker */ --fz-s-min: 1; --fz-s-max: 1.125; --fz-s: clamp(calc(var(--fz-s-min) * var(--fz-u, 1rem)), calc((var(--fz-s-min) * var(--fz-u, 1rem)) + (var(--fz-s-max) - var(--fz-s-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-s-max) * var(--fz-u, 1rem))); /* var(--fz-s, clamp(1rem, calc(1rem + 0.125 * (100vw - 33rem) / 55), 1.125rem)) */ /* * Size (px): 18px -> 20px * Use: P | Base Text / Quote, Line */ --fz-m-min: 1.125; --fz-m-max: 1.25; --fz-m: clamp(calc(var(--fz-m-min) * var(--fz-u, 1rem)), calc((var(--fz-m-min) * var(--fz-u, 1rem)) + (var(--fz-m-max) - var(--fz-m-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-m-max) * var(--fz-u, 1rem))); /* var(--fz-m, clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 33rem) / 55), 1.25rem)) */ /* --- HEADINGS (H5 to H2 / Subheads ) --- */ /* * Size (px): 20px -> 24px * Use: H6 / Blockquote, Lede, Sip */ --fz-l-min: 1.25; --fz-l-max: 1.5; --fz-l: clamp(calc(var(--fz-l-min) * var(--fz-u, 1rem)), calc((var(--fz-l-min) * var(--fz-u, 1rem)) + (var(--fz-l-max) - var(--fz-l-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-l-max) * var(--fz-u, 1rem))); /* var(--fz-l, clamp(1.25rem, calc(1.25rem + 0.25 * (100vw - 33rem) / 55), 1.5rem)) */ /* * Size (px): 22px -> 28px * Use: H5 / Pullquote, Callout, Intro */ --fz-xl-min: 1.375; --fz-xl-max: 1.75; --fz-xl: clamp(calc(var(--fz-xl-min) * var(--fz-u, 1rem)), calc((var(--fz-xl-min) * var(--fz-u, 1rem)) + (var(--fz-xl-max) - var(--fz-xl-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-xl-max) * var(--fz-u, 1rem))); /* var(--fz-xl, clamp(1.375rem, calc(1.375rem + 0.375 * (100vw - 33rem) / 55), 1.75rem)) */ /* * Size (px): 24px -> 32px * Use: H4 / Microtitle, Subhead, Deck */ --fz-2xl-min: 1.5; --fz-2xl-max: 2; --fz-2xl: clamp(calc(var(--fz-2xl-min) * var(--fz-u, 1rem)), calc((var(--fz-2xl-min) * var(--fz-u, 1rem)) + (var(--fz-2xl-max) - var(--fz-2xl-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-2xl-max) * var(--fz-u, 1rem))); /* var(--fz-2xl, clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 33rem) / 55), 2rem)) */ /* --- HEADINGS TITLES (H1 to H3 / Heroes) --- */ /* * Size (px): 28px -> 40px * Use: H3 / Subtitle */ --fz-3xl-min: 1.75; --fz-3xl-max: 2.5; --fz-3xl: clamp(calc(var(--fz-3xl-min) * var(--fz-u, 1rem)), calc((var(--fz-3xl-min) * var(--fz-u, 1rem)) + (var(--fz-3xl-max) - var(--fz-3xl-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-3xl-max) * var(--fz-u, 1rem))); /* var(--fz-3xl, clamp(1.75rem, calc(1.75rem + 0.75 * (100vw - 33rem) / 55), 2.5rem)) */ /* * Size (px): 32px -> 48px * Use: H2 / Subheadline, Title, Enormous 1 */ --fz-e-min: 2; --fz-e-max: 3; --fz-e: clamp(calc(var(--fz-e-min) * var(--fz-u, 1rem)), calc((var(--fz-e-min) * var(--fz-u, 1rem)) + (var(--fz-e-max) - var(--fz-e-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-e-max) * var(--fz-u, 1rem))); /* var(--fz-e, clamp(2rem, calc(2rem + 1 * (100vw - 33rem) / 55), 3rem)) */ /* * Size (px): 36px -> 56px * Use: H1 / Headline, Ultra 1, Enormous 2 */ --fz-xe-min: 2.25; --fz-xe-max: 3.5; --fz-xe: clamp(calc(var(--fz-xe-min) * var(--fz-u, 1rem)), calc((var(--fz-xe-min) * var(--fz-u, 1rem)) + (var(--fz-xe-max) - var(--fz-xe-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-xe-max) * var(--fz-u, 1rem))); /* var(--fz-xe, clamp(2.25rem, calc(2.25rem + 1.25 * (100vw - 33rem) / 55), 3.5rem)) */ /* --- ENORMOUS TITLES (Display 5-7) --- */ /* * Size (px): 40px -> 64px * Use: Display 8 / Ultra 2, Enormous 3 */ --fz-2xe-min: 2.5; --fz-2xe-max: 4; --fz-2xe: clamp(calc(var(--fz-2xe-min) * var(--fz-u, 1rem)), calc((var(--fz-2xe-min) * var(--fz-u, 1rem)) + (var(--fz-2xe-max) - var(--fz-2xe-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-2xe-max) * var(--fz-u, 1rem))); /* var(--fz-2xe, clamp(2.5rem, calc(2.5rem + 1.5 * (100vw - 33rem) / 55), 4rem)) */ /* * Size (px): 44px -> 80px * Use: Display 7 / Ultra 3, Enormous 4 */ --fz-3xe-min: 2.75; --fz-3xe-max: 5; --fz-3xe: clamp(calc(var(--fz-3xe-min) * var(--fz-u, 1rem)), calc((var(--fz-3xe-min) * var(--fz-u, 1rem)) + (var(--fz-3xe-max) - var(--fz-3xe-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-3xe-max) * var(--fz-u, 1rem))); /* var(--fz-3xe, clamp(2.75rem, calc(2.75rem + 2.25 * (100vw - 33rem) / 55), 5rem)) */ /* * Size (px): 48px -> 96px * Use: Display 6 / Ultra 4, Giant 1 */ --fz-g-min: 3; --fz-g-max: 6; --fz-g: clamp(calc(var(--fz-g-min) * var(--fz-u, 1rem)), calc((var(--fz-g-min) * var(--fz-u, 1rem)) + (var(--fz-g-max) - var(--fz-g-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-g-max) * var(--fz-u, 1rem))); /* var(--fz-g, clamp(3rem, calc(3rem + 3 * (100vw - 33rem) / 55), 6rem)) */ /* --- GIGA DISPLAY TITLES (Display 1-4) --- */ /* * Size (px): 56px -> 112px * Use: Display 5, Ultra 5 , Giant 2 */ --fz-xg-min: 3.5; --fz-xg-max: 7; --fz-xg: clamp(calc(var(--fz-xg-min) * var(--fz-u, 1rem)), calc((var(--fz-xg-min) * var(--fz-u, 1rem)) + (var(--fz-xg-max) - var(--fz-xg-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-xg-max) * var(--fz-u, 1rem))); /* var(--fz-xg, clamp(3.5rem, calc(3.5rem + 3.5 * (100vw - 33rem) / 55), 7rem)) */ /* * Size (px): 64px -> 128px * Use: Display 4, Ultra 6 , Giant 3 */ --fz-2xg-min: 4; --fz-2xg-max: 8; --fz-2xg: clamp(calc(var(--fz-2xg-min) * var(--fz-u, 1rem)), calc((var(--fz-2xg-min) * var(--fz-u, 1rem)) + (var(--fz-2xg-max) - var(--fz-2xg-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-2xg-max) * var(--fz-u, 1rem))); /* var(--fz-2xg, clamp(4rem, calc(4rem + 4 * (100vw - 33rem) / 55), 8rem)) */ /* * Size (px): 72px -> 144px * Use: Display 3, Ultra 7 , Giant 4 */ --fz-3xg-min: 4.5; --fz-3xg-max: 9; --fz-3xg: clamp(calc(var(--fz-3xg-min) * var(--fz-u, 1rem)), calc((var(--fz-3xg-min) * var(--fz-u, 1rem)) + (var(--fz-3xg-max) - var(--fz-3xg-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-3xg-max) * var(--fz-u, 1rem))); /* var(--fz-3xg, clamp(4.5rem, calc(4.5rem + 4.5 * (100vw - 33rem) / 55), 9rem)) */ /* * Size (px): 80px -> 160px * Use: Display 2, Ultra 8 , Collosal */ --fz-c-min: 5; --fz-c-max: 10; --fz-c: clamp(calc(var(--fz-c-min) * var(--fz-u, 1rem)), calc((var(--fz-c-min) * var(--fz-u, 1rem)) + (var(--fz-c-max) - var(--fz-c-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-c-max) * var(--fz-u, 1rem))); /* var(--fz-c, clamp(5rem, calc(5rem + 5 * (100vw - 33rem) / 55), 10rem)) */ /* * Size (px): 96px -> 192px * Use: Display 1, Ultra 9 , Collosal 2 */ --fz-xc-min: 6; --fz-xc-max: 12; --fz-xc: clamp(calc(var(--fz-xc-min) * var(--fz-u, 1rem)), calc((var(--fz-xc-min) * var(--fz-u, 1rem)) + (var(--fz-xc-max) - var(--fz-xc-min)) * var(--fz-x, 0.72rem)), calc(var(--fz-xc-max) * var(--fz-u, 1rem))); /* var(--fz-xc, clamp(6rem, calc(6rem + 6 * (100vw - 33rem) / 55), 12rem)) */ } } @supports (container-type: inline-size) { :where(:root) :where(.cq, .cquery) { /* ========================================= */ /* CONTAINER QUERY SUPPORT (FLUID FACTOR) */ /* ========================================= */ --fz-x: calc((100cqi - (var(--cq-sm, 30) * var(--fz-u, 1rem))) / (var(--cq-lg, 80) - var(--cq-sm, 30))); } } :where(:root) { /* ========================================= */ /* LINE HEIGHTS (--lh) */ /* Inverse scaling: Big text needs tight LH */ /* ========================================= */ /* Display / Ultra / Badge (100%) - Solid */ --lh-2xs: 1; /* Headings H1-H3 / Headline, Title (~115%) - Tight */ --lh-xs: 1.125; /* Small Heading / H4 / Kicker, Eyebrow, Overline (125%) - Snug */ --lh-s: 1.25; /* Big Paragraphs / H5-H6 / Lede, Intro, Deck (~135%) - Medium */ --lh-m: 1.375; /* Paragraphs / Text (150%) - Base */ --lh-l: 1.5; /* Meta / Copy (~165%) - Relaxed */ --lh-xl: 1.675; /* Subcopy / Special (175%) - Loose */ --lh-2xl: 1.75; /* Microcopy (200%) - Extra Loose */ --lh-3xl: 2; /* ========================================= */ /* FONT WEIGHTS (--fw) */ /* ========================================= */ /* Thin */ --fw-th: 100; /* Extra Light */ --fw-xlt: 200; /* Light | Line, Intro, Deck */ --fw-lt: 300; /* Regular | Text, Copy, Lede */ --fw-r: 400; /* Medium | Kicker, Eybrow, Meta, Caption, Quote */ --fw-m: 500; /* Semibold | Button, Label, Badge */ --fw-sb: 600; /* Bold | H3-H6 */ --fw-b: 700; /* Extra Bold | Title, H1-H2 */ --fw-xb: 800; /* Black | Headline, Ultra, Display */ --fw-ub: 900; } :where(:root) { /* ========================================= */ /* CONTAINER QUERY BREAKPOINTS */ /* ========================================= */ /* 320px - Extra Small (Mobile Content) */ --cq-xs: 20; /* 480px - Small (Tablet Content) */ --cq-sm: 30; /* 960px - Medium (Desktop Content) */ --cq-md: 60; /* 1280px - Large (Widescreen Content) */ --cq-lg: 80; /* ========================================= */ /* MEDIA QUERY BREAKPOINTS */ /* ========================================= */ /* 368px - Extra Small (Mobile Content) */ --mq-xs: 23; /* 528px - Small (Tablet Content) */ --mq-sm: 33; /* 1056px - Medium (Desktop Content) */ --mq-md: 66; /* 1408px - Large (Widescreen Content) */ --mq-lg: 88; } /** * @file Base Configuration * @description Default component aliases, global outline mapping, and Z-Index stack. */ :where(:root) { /* ========================================= */ /* 1. COMPONENT ALIASES */ /* Default global variables mapped to scales */ /* ========================================= */ /* Global (Content) Gap */ --g: var(---xs, clamp(0.875rem, calc(0.875rem + 0.125 * (100cqi - 33rem) / 55), 1rem)); /* Global Default Radius (Mapping to Radii scale) */ --rad--: var(--rad-m, 0.625em); --bdr: var(--rad--); /* Default Border Width */ --bdw--: var(--bdw-m, .125rem); --bd--: var(--bdw, var(--bdw--, .125rem)) var(--bds, solid) var(--bdc, var(--out-p, currentColor)); /* ========================================= */ /* 2. FOCUS & OUTLINE */ /* ========================================= */ /* Outline offset and width */ --olw--: var(--bdw-l, .25rem); --ol--: var(--olw, var(--olw--, .25rem)) var(--ols, solid) var(--olc, transparent); --ol--fv--: var(--olw, var(--olw--, .25rem)) var(--ols, solid) var(--olc--fv, var(--olc--fv--, var(--out-p, var(--p, #eec14c)))); --olo--: var(--olo, var(--olw--, .25rem)); --focus-offset: var(--olo--); --focus-ring: var(--ol--); --focus-rad: var(--rad-xs, .375em); /* Default Focus Style Alias */ --olc--fv--: var(--out-p, var(--p, #eec14c)); --focus-ring: var(--ol--fv--, var(--olw--, .25rem) solid var(--olc--fv--, currentColor)); } /** * @file Typography Configuration * @description Type scales, line heights, and font weights. */ :where(:root) { /** * @part Body: Typography */ /* Typography: Families */ --ff--: system-ui, -apple-system, sans-serif; --tx-ff--: var(--ff--, system-ui, -apple-system, sans-serif); --tl-ff--: var(--ff--, inherit); --mono-ff--: monospace; /* Constants */ --fz--: var(--fz-m, clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem)); --lh--: var(--lh-l, 1.5); --fw--: var(--fw-r, 400); --tx-fz--: var(--fz--); --tx-lh--: var(--lh--); --tx-fw--: var(--fw--); --tl-fz--: var(--fz-e, clamp(1.75rem, 1.3rem + 2vw, 3rem)); --tl-lh--: var(--lh-xs, 1.125); --tl-fw--: var(--fw-xb, 800); } /** * @file Layout Configuration * @description Global layout engines, grids, sections, and flex defaults. */ :where(:root) { /** * @group Base: Main Layout Structure */ /* Section: Spacing & Gaps (section.css) */ --s-pb--: var(---3xg, clamp(7rem, calc(7rem + 1 * (100cqi - 33rem) / 55), 8rem)); --s-pi--: var(--p5f, clamp(1.5rem, 5%, 4rem)); --s-g--: var(---xg, clamp(5rem, calc(5rem + 1 * (100vw - 33rem) / 55), 6rem)); --s-rg--: var(---xe, clamp(3rem, calc(3rem + 0.5 * (100cqi - 33rem) / 55), 3.5rem)); --s-cg--: var(--s-g--); /* Section Container: Size & Gaps (section.css) */ --sc-maw--: var(--c-m, 80rem); --sc-g--: initial; --sc-rg--: var(---xe, clamp(3rem, calc(3rem + 0.5 * (100cqi - 33rem) / 55), 3.5rem)); --sc-cg--: var(---2xe, clamp(3.5rem, calc(3.5rem + 0.5 * (100cqi - 33rem) / 55), 4rem)); /* Section Content: Gaps (section.css) */ --scc-g--: initial; --scc-rg--: var(---s, clamp(1rem, calc(1rem + 0.25 * (100cqi - 33rem) / 55), 1.25rem)); --scc-cg--: var(---xe, clamp(3rem, calc(3rem + 0.5 * (100cqi - 33rem) / 55), 3.5rem)); /** * @group Advanced: Layout Engines */ /* Grid: Defaults (grid.css) */ --g-min--: var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)); --g-g--: var(---e, clamp(2.5rem, calc(2.5rem + 0.5 * (100cqi - 33rem) / 55), 3rem)); /* Flex: Defaults (flex.css) */ --fx-g--: var(---xs, clamp(0.875rem, calc(0.875rem + 0.125 * (100cqi - 33rem) / 55), 1rem)); } /* Missing: utilities.css */ /** * @file Html Elements Configuration * @description Generic globals, spacing, shapes, borders, animations, variances. */ :where(:root) { /** * @group Html Elements Configuration */ /** * @part Body: Selection */ /* Selection (html.css) */ --selection-bg: var(--a, var(--p, #ffb900)); --selection-c: var(--on-a, var(--on-p, var(--d-bd, #000))); /** * @group Pro: Elements */ /* * @part Elements: HTML */ /* HTML: Blockquotes (html.css) */ --bq-c: var(--alt, var(--on-srf, var(--tx, currentColor))); --bq-bdc: var(--out-p, var(--p, currentColor)); --bq-bdw: var(--bdw-l, .25rem); --bq-bg: var(--o-p-lt, var(--o-ntf, hsl(43 83% 62% / .32))); --bq-pi: var(---em, 1.25em); --bq-pb: var(---em, 1.25em); /* HTML: Preformatted (html.css) */ --pre-c: var(--bg, var(--base, hsl(0 0 96%))); --pre-bg: var(--alt, var(--contrast, hsl(0 0 8%))); --pre-p: var(---s, 1rem); --pre-rad: var(--rad-s, 0.5rem); /* HTML: Code / KBD (html.css) */ --code-c: var(--tl-bd, var(--alt-bd, var(--contrast-bd, #000))); --code-bg: var(--o-n-lt, hsl(0 0% 50% / .32)); --code-rad: var(--rad-2xs, 0.25em); /* HTML: Horizontal Rule (html.css) */ --hr-h: var(---e3xt, .125rem); --hr-c: var(--o-p, currentColor); --hr-mg: 2.5rem; /* HTML: Links (html.css) */ --lnk: var(--tl, currentColor); --lnk--hv: var(--a-c, var(--lnk, var(--alt-xlt, var(--alt-lt, currentColor)))); --lnk-bg: transparent; --lnk-bg--hv: var(--a-bg, var(--lnk-bg, var(--o-p-xlt, transparent))); --lnk-op: 1; --lnk-op--hv: .8; --lnk-op--ac: .8; --lnk-td: underline; --lnk-trs: var(--trsdu--, 0.16s) var(--trstf--, ease-in-out); --lnk-trsp: color, text-decoration-color, opacity; /* HTML: Tables (html.css) */ --tbl-th-fs: var(--tx-fs--s, clamp(1rem, 0.191vw + 0.962rem, 1.125rem)); --tbl-th-tt: uppercase; --tbl-bd-w: var(--bd-w, .125rem); --tbl-bd-c: var(--set-bg, var(--bg, var(--og, hsl(0 0% 50% / .64)))); --tbl-pd: 1em .75em; --tbl-bg-head: var(--og-lt, hsl(0 0% 50% / .32)); --tbl-bg: var(--og-xxlt, var(--bg, var(--l, hsl(0 0% 50% / .08)))); --td-bg-hover: var(--og-xlt, hsl(0 0% 50% / .16)); } /** * @file Component Configuration * @description Global variables for UI patterns (Card, Button). */ :where(:root) { /** * @group Base: Core Components */ /* * @part Card Component: Core */ /* Card: Core (card.css) */ --crd-bg: var(--crd, transparent); --crd-rad: var(--rad--, var(--rad-s, 0.5em)); --crd-p--: var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem)); --crd-g--: var(---s, clamp(1rem, calc(1rem + 0.25 * (100cqi - 33rem) / 55), 1.25rem)); --crd-out: var(--out-p, #eec14c); /* * @part Button Component: Typography & Sizing */ /* Button: Core (button.css) */ --btn-fz: var(--fz-m, clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 33rem) / 55), 1.25rem)); --btn-fw: var(--fw-m, 500); --btn-lh: var(--lh-xs, 1.125); --btn-pb--: .625em; --btn-pi--: 1.325em; --btn-g--: var(---2xs, clamp(0.75rem, calc(0.75rem + 0.125 * (100cqi - 33rem) / 55), 0.875rem)); --btns-g--: var(---s, clamp(1rem, calc(1rem + 0.25 * (100cqi - 33rem) / 55), 1.25rem)); /* * @part Button Component: Colors */ --btn-c: var(--on-p, currentColor); --btn-c--hv: var(--on-a, currentColor); --btn-bg: var(--p, #eec14c); --btn-bg--hv: var(--a, #ffb900); --btn-bc: var(--btn-bg, var(--out-p, #eec14c)); --btn-bc--hv: var(--btn-bg--hv, var(--out-a, #ffb900)); --btn-olc: var(--out-p, #eec14c); /** * @group Advanced: Component Geometry */ /* * @part Card Component: Typography & Layout */ /* Card: Typography & Layout */ --crd-sl-g: .75rem; --crd-tx-fz--: var(--fz-s, clamp(1rem, calc(1rem + 0.125 * (100vw - 33rem) / 55), 1.125rem)); --crd-tx-fw--: var(--fw-r, 400); --crd-tx-lh--: var(--lh-m, 1.375); --crd-tl-fz--: var(--fz-l, clamp(1.25rem, calc(1.25rem + 0.25 * (100vw - 33rem) / 55), 1.5rem)); --crd-tl-fz-l--: var(--fz-2xl, clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 33rem) / 55), 2rem)); --crd-tl-fw--: var(--fw-b, 700); --crd-tl-lh--: var(--lh-s, 1.25); --crd-tl-ls--: 0; --crd-a-td: underline; --crd-mt-fs: clamp(0.875rem, 0.191vw + 0.837rem, 1rem); --crd-mt-fw: 400; --crd-mt-lh: 1.5; /* * @part Button Component: Borders & Sizing */ /* Button: Borders & Sizing */ --btn-bdw: var(--bdw--, .125rem); --btn-bds: solid; --btn-rad: var(--rad-xe, 4em); --btn-rad-lt: 0.375em; --btn-rad-md: 0.5em; --btn-rad-bd: 0.625em; --btn-rad-rd: 8em; --btn-w: fit-content; --btn-mih: calc(var(--btn-fz, 1.125rem) * var(--btn-lh, 1.125) + var(--_pb, .625em) * 2 + var(--_bdw, .125rem) * 2); /** * @group Pro: Component Micro-interactions */ /* * @part Card Component: Media & Transitions */ /* Card: Media & Transitions */ --crd-trs: var(--crd-trsdu, var(--trsdu, 0.32s)) var(--crd-trstf, var(--trstf, ease-in-out)); --crd-trs--hv: var(--crd-trsdu--hv, var(--trsdu--hv, 0.16s)) var(--crd-trstf--hv, var(--crd-trstf, var(--trstf, ease-in-out))); --crd-bxsh--: var(--bxsh, 0 0.125em 2em -0.75em var(--bxsh-c, hsl(0 0% 8% / .32))); /* --crd-bxsh--av--: var(--bxsh--hv, 0 0.125em 2em -0.75em var(--bxsh-c, hsl(0 0% 8% / .32))); */ --crd-med-obj: cover; --crd-med-ar: 1.91 / 1; --crd-med-max-w--lg: 50vh; --crd-med-max-w--md: 100%; --crd-med-op-hover: 1; --crd-svg-size: 3em; --crd-med-trans: var(--crd-trans); --crd-med-trans-hover: var(--crd-trans-hover); --crd-med-tf-hover: scale(var(--crd-med-tf-scale, var(--tf-scale, 1.125))); /* * @part Button Component: Transitions & Transform */ /* Button: Transitions & Transform */ /* --btn-trs: var(--btn-trsdu, var(--trsdu, 0.32s)) var(--btn-trstf, var(--trstf, ease-in-out)); */ /* --btn-trs--hv: var(--btn-trsdu--hv, var(--trsdu--hv, 0.16s)) var(--btn-trstf--hv, var(--btn-trstf, var(--trstf, ease-in-out))); */ /* --btn-trsp: background-color, color, opacity, transform, border, border-color, box-shadow, fill, stroke, outline, outline-color; */ --btn-trf: none; --btn-trf--hv: translatey(var(--trf-ty--hv, -0.125em)); --btn-trf--av: translatey(var(--trf-ty--av, 0.0625em)); --btn-bxsh--: var(--bxsh--, 0 0.25em 2em -0.75em); --btn-bxsh--av--: var(--bxsh--av--, 0 0.375em 2em -0.875em); /* * @part Button Component: Icon */ /* Button: Icon */ --btn-icn-fill: var(--fill, var(--_c, currentColor)); --btn-icn-str: var(--str, transparent); --btn-icn-sz--: var(--icn-sz, 1.125em); --btn-icn-o: var(--icn-o); } /** * @file Effects Configuration * @description Generic transitions, transformations, shadows and variances. */ :where(:root) { /** * @group Base: Generic Globals */ /* * @part Animation: Transition & Transform */ /* Animation: Transition */ --trsdu: 0.32s; --trsdu--hv: 0.16s; --trstf: ease-in-out; --trstf--hv: ease-in-out; --trs: var(--trsdu, 0.32s) var(--trstf, ease-in-out); --trs--hv: var(--trsdu--hv, 0.16s) var(--trstf--hv, ease-in-out); /* Transform: Scale / Translate */ --trf-sc: 1.125; --trf-ty: -0.125em; --trf-ty--av: 0.0625em; /* * @part Effects: Shadow */ /* Shadows */ --bxsh-c: var(--o-d-xlt, hsl(0 0% 8% / .16)); --bxsh-c--av: var(--o-d-lt, hsl(0 0% 8% / .32)); --bxsh-c-p: var(--o-p-lt, hsl(0 0% 8% / .32)); /* Shadow Horizontal */ --bxsh-h: 0; /* Shadow Vertical */ --bxsh-v: 0.25em; --bxsh-v--av: calc(var(--bxsh-v, 0.25em) * 1.5); --bxsh-v--sm: calc(var(--bxsh-v, 0.25em) * 0.25); /* Shadow Blur */ --bxsh-b: 2em; --bxsh-b--sm: calc(var(--bxsh-b, 2em) * 0.25); /* Shadow Spread */ --bxsh-s: -0.75em; --bxsh-s--av: calc(var(--bxsh-s, -0.75em) - 0.125em); --bxsh-s--sm: calc(var(--bxsh-s, -0.75em) * 0.25); --bxsh--: var(--bxsh-h, 0) var(--bxsh-v, 0.25em) var(--bxsh-b, 2em) var(--bxsh-s, -0.75em); --bxsh--av--: var(--bxsh-h, 0) var(--bxsh-v--av, 0.375em) var(--bxsh-b, 2em) var(--bxsh-s--av, -0.875em); --bxsh--sm--: var(--bxsh-h, 0) var(--bxsh-v--sm, 0.125em) var(--bxsh-b, .25em) var(--bxsh-s--sm, .125em); --bxsh: var(--bxsh--) var(--bxsh-c, var(--o-p-xlt, hsl(0 0% 8% / .16))); --bxsh--av: var(--bxsh--av--) var(--bxsh-c--av, var(--o-a-lt, hsl(0 0% 8% / .32))); --bxsh--sm: var(--bxsh--sm--) var(--bxsh-c, var(--o-a-lt, hsl(0 0% 8% / .16))); /** * @group Pro: Effects & Elements */ /* * @part Effects: Blur */ /* Blurs Scale */ --blr-xs: .125rem; --blr-s: .25rem; --blr-m: .5rem; --blr-l: 1rem; --blr-xl: 2rem; --blr--: var(--blr-m, .5rem); --blur: blur(var(--blr, var(--blr--, .5rem))); } /** * @file Flow Configuration * @description Content flow.constants */ /* * Heading and Paragrapgh * Elements after Paragraph * List and List Item */ :where(:root) { /** * @group Advanced: Flow Spacing */ /* Vertical Rhythm Grades */ --flow--xl: 1em; --flow--l: .75em; --flow--m: .5em; --flow--s: .375em; --flow--xs: .25em; --flow: 0; /** * @group Pro: Element Flow */ /* Element Specific Flow */ --el-flow: var(--flow--l, .75em); --el-flow-s: var(--flow--m, .5em); --el-flow-e: var(--flow--s, .375em); /* Paragraph Specific Flow */ --p-flow: var(--el-flow, .75em); /* Title Flow */ --tl-flow: calc(var(--el-flow, .75em) / .75); --tl-flow-s: var(--el-flow, .75em); /* Ending to add for H1-h3 */ --tl-flow-e: var(--el-flow-e, .375em); /* Extended Ending to add for H4-h6 */ --tl-flow-x: calc(var(--el-flow, .75em) / 1.2); /* List & List Item Element Flow */ --l-flow: var(--el-flow-s, .5em); --l-flow-s: var(--el-flow, .75em); --l-flow-e: var(--el-flow-e, .375em); --li-flow: calc(var(--l-flow, .5em) / 2); }