@import url("https://fonts.googleapis.com/css2?family=Flow+Circular&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap"); @layer reset, layout, mixins, typography, colors, themes, base, helpers, utilities; @layer mixins { @layer mixins.Motion-preference {} @layer mixins.Transparency-preference {} @layer mixins.Data-usage-preference {} @layer mixins.color-scheme {} @layer mixins.Contrast-reference {} @layer mixins.Forced-colors {} @layer mixins.Device-orientation {} @layer mixins.Touch-pointers {} @layer mixins.Browser-supports {} @layer mixins.Breakpoints { @layer mixins.Breakpoints-xxs {} @layer mixins.Breakpoints-xs {} @layer mixins.Breakpoints-sm {} @layer mixins.Breakpoints-md {} @layer mixins.Breakpoints-lg {} @layer mixins.Breakpoints-xl {} @layer mixins.Breakpoints-xxl {} } } @layer typography { @layer typography.font-families { :where(html) { /* Font-Families */ --ff-lato: "Lato", sans-serif; --ff-montserrat: "Montserrat", sans-serif; --ff-roboto: "Roboto", sans-serif; --ff-flow-circular: "Flow Circular", cursive; --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; --font-serif: ui-serif,serif; --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace; } } @layer typography.font-weights { :where(html) { /* Font-Weights */ --font-weight-100: 100; --font-weight-200: 200; --font-weight-300: 300; --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; --font-weight-800: 800; --font-weight-900: 900; } } @layer typography.font-size { :where(html) { --font-size-50: .5rem; --font-size-100: .75rem; --font-size-200: .875rem; --font-size-300: 1rem; --font-size-400: 1.25rem; --font-size-500: 1.5rem; --font-size-600: 2rem; --font-size-700: 2.5rem; --font-size-800: 3rem; --font-size-900: 3.5rem; --fluid-font-size-100: clamp(.75rem, 2cqi, 1rem); --fluid-font-size-300: clamp(1rem, 4cqi, 1.5rem); --fluid-font-size-500: clamp(1.5rem, 6cqi, 2.5rem); --fluid-font-size-600: clamp(2rem, 9cqi, 3.5rem); } } @layer typography.font-line-heighs { :where(html) { --font-lineheight-1: .95; --font-lineheight-2: 1.1; --font-lineheight-3: 1.25; --font-lineheight-4: 1.375; --font-lineheight-5: 1.5; --font-lineheight-6: 1.6; --font-lineheight-7: 1.75; --font-lineheight-8: 2; } } @layer typography.font-letter-spacing { :where(html) { --font-letterspacing-1: -.05em; --font-letterspacing-2: .025em; --font-letterspacing-3: .050em; --font-letterspacing-4: .075em; --font-letterspacing-5: .150em; --font-letterspacing-6: .500em; --font-letterspacing-7: .750em; --font-letterspacing-8: 1em; } } } @layer colors { :where(html) { /* Defult */ --black-color: 0% 0 0; --white-color: 100% 0 0; } @layer colors.hex { @layer colors.hex.gray { :where(html) { --gray-0: #f8f9fa; --gray-1: #f1f3f5; --gray-2: #e9ecef; --gray-3: #dee2e6; --gray-4: #ced4da; --gray-5: #adb5bd; --gray-6: #868e96; --gray-7: #495057; --gray-8: #343a40; --gray-9: #212529; --gray-10: #16191d; --gray-11: #0d0f12; --gray-12: #030507; } } @layer colors.hex.stone { :where(html) { --stone-0: #f8fafb; --stone-1: #f2f4f6; --stone-2: #ebedef; --stone-3: #e0e4e5; --stone-4: #d1d6d8; --stone-5: #b1b6b9; --stone-6: #979b9d; --stone-7: #7e8282; --stone-8: #666968; --stone-9: #50514f; --stone-10: #3a3a37; --stone-11: #252521; --stone-12: #121210; } } @layer colors.hex.red { :where(html) { --red-0: #fff5f5; --red-1: #ffe3e3; --red-2: #ffc9c9; --red-3: #ffa8a8; --red-4: #ff8787; --red-5: #ff6b6b; --red-6: #fa5252; --red-7: #f03e3e; --red-8: #e03131; --red-9: #c92a2a; --red-10: #b02525; --red-11: #962020; --red-12: #7d1a1a; } } @layer colors.hex.pink { :where(html) { --pink-0: #fff0f6; --pink-1: #ffdeeb; --pink-2: #fcc2d7; --pink-3: #faa2c1; --pink-4: #f783ac; --pink-5: #f06595; --pink-6: #e64980; --pink-7: #d6336c; --pink-8: #c2255c; --pink-9: #a61e4d; --pink-10: #8c1941; --pink-11: #731536; --pink-12: #59102a; } } @layer colors.hex.purple { :where(html) { --purple-0: #f8f0fc; --purple-1: #f3d9fa; --purple-2: #eebefa; --purple-3: #e599f7; --purple-4: #da77f2; --purple-5: #cc5de8; --purple-6: #be4bdb; --purple-7: #ae3ec9; --purple-8: #9c36b5; --purple-9: #862e9c; --purple-10: #702682; --purple-11: #5a1e69; --purple-12: #44174f; } } @layer colors.hex.violet { :where(html) { --violet-0: #f3f0ff; --violet-1: #e5dbff; --violet-2: #d0bfff; --violet-3: #b197fc; --violet-4: #9775fa; --violet-5: #845ef7; --violet-6: #7950f2; --violet-7: #7048e8; --violet-8: #6741d9; --violet-9: #5f3dc4; --violet-10: #5235ab; --violet-11: #462d91; --violet-12: #3a2578; } } @layer colors.hex.indigo { :where(html) { --indigo-0: #edf2ff; --indigo-1: #dbe4ff; --indigo-2: #bac8ff; --indigo-3: #91a7ff; --indigo-4: #748ffc; --indigo-5: #5c7cfa; --indigo-6: #4c6ef5; --indigo-7: #4263eb; --indigo-8: #3b5bdb; --indigo-9: #364fc7; --indigo-10: #2f44ad; --indigo-11: #283a94; --indigo-12: #21307a; } } @layer colors.hex.blue { :where(html) { --blue-0: #e7f5ff; --blue-1: #d0ebff; --blue-2: #a5d8ff; --blue-3: #74c0fc; --blue-4: #4dabf7; --blue-5: #339af0; --blue-6: #228be6; --blue-7: #1c7ed6; --blue-8: #1971c2; --blue-9: #1864ab; --blue-10: #145591; --blue-11: #114678; --blue-12: #0d375e; } } @layer colors.hex.cyan { :where(html) { --cyan-0: #e3fafc; --cyan-1: #c5f6fa; --cyan-2: #99e9f2; --cyan-3: #66d9e8; --cyan-4: #3bc9db; --cyan-5: #22b8cf; --cyan-6: #15aabf; --cyan-7: #1098ad; --cyan-8: #0c8599; --cyan-9: #0b7285; --cyan-10: #095c6b; --cyan-11: #074652; --cyan-12: #053038; } } @layer colors.hex.teal { :where(html) { --teal-0: #e6fcf5; --teal-1: #c3fae8; --teal-2: #96f2d7; --teal-3: #63e6be; --teal-4: #38d9a9; --teal-5: #20c997; --teal-6: #12b886; --teal-7: #0ca678; --teal-8: #099268; --teal-9: #087f5b; --teal-10: #066649; --teal-11: #054d37; --teal-12: #033325; } } @layer colors.hex.green { :where(html) { --green-0: #ebfbee; --green-1: #d3f9d8; --green-2: #b2f2bb; --green-3: #8ce99a; --green-4: #69db7c; --green-5: #51cf66; --green-6: #40c057; --green-7: #37b24d; --green-8: #2f9e44; --green-9: #2b8a3e; --green-10: #237032; --green-11: #1b5727; --green-12: #133d1b; } } @layer colors.hex.lime { :where(html) { --lime-0: #f4fce3; --lime-1: #e9fac8; --lime-2: #d8f5a2; --lime-3: #c0eb75; --lime-4: #a9e34b; --lime-5: #94d82d; --lime-6: #82c91e; --lime-7: #74b816; --lime-8: #66a80f; --lime-9: #5c940d; --lime-10: #4c7a0b; --lime-11: #3c6109; --lime-12: #2c4706; } } @layer colors.hex.yellow { :where(html) { --yellow-0: #fff9db; --yellow-1: #fff3bf; --yellow-2: #ffec99; --yellow-3: #ffe066; --yellow-4: #ffd43b; --yellow-5: #fcc419; --yellow-6: #fab005; --yellow-7: #f59f00; --yellow-8: #f08c00; --yellow-9: #e67700; --yellow-10: #b35c00; --yellow-11: #804200; --yellow-12: #663500; } } @layer colors.hex.orange { :where(html) { --orange-0: #fff4e6; --orange-1: #ffe8cc; --orange-2: #ffd8a8; --orange-3: #ffc078; --orange-4: #ffa94d; --orange-5: #ff922b; --orange-6: #fd7e14; --orange-7: #f76707; --orange-8: #e8590c; --orange-9: #d9480f; --orange-10: #bf400d; --orange-11: #99330b; --orange-12: #802b09; } } @layer colors.hex.choco { :where(html) { --choco-0: #fff8dc; --choco-1: #fce1bc; --choco-2: #f7ca9e; --choco-3: #f1b280; --choco-4: #e99b62; --choco-5: #df8545; --choco-6: #d46e25; --choco-7: #bd5f1b; --choco-8: #a45117; --choco-9: #8a4513; --choco-10: #703a13; --choco-11: #572f12; --choco-12: #3d210d; } } @layer colors.hex.brown { :where(html) { --brown-0: #faf4eb; --brown-1: #ede0d1; --brown-2: #e0cab7; --brown-3: #d3b79e; --brown-4: #c5a285; --brown-5: #b78f6d; --brown-6: #a87c56; --brown-7: #956b47; --brown-8: #825b3a; --brown-9: #6f4b2d; --brown-10: #5e3a21; --brown-11: #4e2b15; --brown-12: #422412; } } @layer colors.hex.sand { :where(html) { --sand-0: #f8fafb; --sand-1: #e6e4dc; --sand-2: #d5cfbd; --sand-3: #c2b9a0; --sand-4: #aea58c; --sand-5: #9a9178; --sand-6: #867c65; --sand-7: #736a53; --sand-8: #5f5746; --sand-9: #4b4639; --sand-10: #38352d; --sand-11: #252521; --sand-12: #121210; } } @layer colors.hex.camo { :where(html) { --camo-0: #f9fbe7; --camo-1: #e8ed9c; --camo-2: #d2df4e; --camo-3: #c2ce34; --camo-4: #b5bb2e; --camo-5: #a7a827; --camo-6: #999621; --camo-7: #8c851c; --camo-8: #7e7416; --camo-9: #6d6414; --camo-10: #5d5411; --camo-11: #4d460e; --camo-12: #36300a; } } @layer colors.hex.jungle { :where(html) { --jungle-0: #ecfeb0; --jungle-1: #def39a; --jungle-2: #d0e884; --jungle-3: #c2dd6e; --jungle-4: #b5d15b; --jungle-5: #a8c648; --jungle-6: #9bbb36; --jungle-7: #8fb024; --jungle-8: #84a513; --jungle-9: #7a9908; --jungle-10: #658006; --jungle-11: #516605; --jungle-12: #3d4d04; } } } @layer colors.hsl { @layer colors.hex.gray { :where(html) { --gray-0-hsl: 210 17% 98%; --gray-1-hsl: 210 17% 95%; --gray-2-hsl: 210 16% 93%; --gray-3-hsl: 210 14% 89%; --gray-4-hsl: 210 14% 83%; --gray-5-hsl: 210 11% 71%; --gray-6-hsl: 210 7% 56%; --gray-7-hsl: 210 9% 31%; --gray-8-hsl: 210 10% 23%; --gray-9-hsl: 210 11% 15%; --gray-10-hsl: 214 14% 10%; --gray-11-hsl: 216 16% 6%; --gray-12-hsl: 210 40% 2%; } } @layer colors.hsl.stone { :where(html) { --stone-0-hsl: 200 27% 98%; --stone-1-hsl: 210 18% 96%; --stone-2-hsl: 210 11% 93%; --stone-3-hsl: 192 9% 89%; --stone-4-hsl: 197 8% 83%; --stone-5-hsl: 202 5% 71%; --stone-6-hsl: 200 3% 60%; --stone-7-hsl: 180 2% 50%; --stone-8-hsl: 160 1% 41%; --stone-9-hsl: 90 1% 31%; --stone-10-hsl: 60 3% 22%; --stone-11-hsl: 60 6% 14%; --stone-12-hsl: 60 6% 7%; } } @layer colors.hsl.red { :where(html) { --red-0-hsl: 0 100% 98%; --red-1-hsl: 0 100% 95%; --red-2-hsl: 0 100% 89%; --red-3-hsl: 0 100% 83%; --red-4-hsl: 0 100% 76%; --red-5-hsl: 0 100% 71%; --red-6-hsl: 0 94% 65%; --red-7-hsl: 0 86% 59%; --red-8-hsl: 0 74% 54%; --red-9-hsl: 0 65% 48%; --red-10-hsl: 0 65% 42%; --red-11-hsl: 0 65% 36%; --red-12-hsl: 0 66% 30%; } } @layer colors.hsl.pink { :where(html) { --pink-0-hsl: 336 100% 97%; --pink-1-hsl: 336 100% 94%; --pink-2-hsl: 338 91% 87%; --pink-3-hsl: 339 90% 81%; --pink-4-hsl: 339 88% 74%; --pink-5-hsl: 339 82% 67%; --pink-6-hsl: 339 76% 59%; --pink-7-hsl: 339 67% 52%; --pink-8-hsl: 339 68% 45%; --pink-9-hsl: 339 69% 38%; --pink-10-hsl: 339 70% 32%; --pink-11-hsl: 339 69% 27%; --pink-12-hsl: 339 70% 21%; } } @layer colors.hsl.purple { :where(html) { --purple-0-hsl: 280 67% 96%; --purple-1-hsl: 287 77% 92%; --purple-2-hsl: 288 86% 86%; --purple-3-hsl: 289 85% 78%; --purple-4-hsl: 288 83% 71%; --purple-5-hsl: 288 75% 64%; --purple-6-hsl: 288 67% 58%; --purple-7-hsl: 288 56% 52%; --purple-8-hsl: 288 54% 46%; --purple-9-hsl: 288 54% 40%; --purple-10-hsl: 288 55% 33%; --purple-11-hsl: 288 56% 26%; --purple-12-hsl: 288 55% 20%; } } @layer colors.hsl.violet { :where(html) { --violet-0-hsl: 252 100% 97%; --violet-1-hsl: 257 100% 93%; --violet-2-hsl: 256 100% 87%; --violet-3-hsl: 255 94% 79%; --violet-4-hsl: 255 93% 72%; --violet-5-hsl: 255 91% 67%; --violet-6-hsl: 255 86% 63%; --violet-7-hsl: 255 78% 60%; --violet-8-hsl: 255 67% 55%; --violet-9-hsl: 255 53% 50%; --violet-10-hsl: 255 53% 44%; --violet-11-hsl: 255 53% 37%; --violet-12-hsl: 255 53% 31%; } } @layer colors.hsl.indigo { :where(html) { --indigo-0-hsl: 223 100% 96%; --indigo-1-hsl: 225 100% 93%; --indigo-2-hsl: 228 100% 86%; --indigo-3-hsl: 228 100% 78%; --indigo-4-hsl: 228 96% 72%; --indigo-5-hsl: 228 94% 67%; --indigo-6-hsl: 228 89% 63%; --indigo-7-hsl: 228 81% 59%; --indigo-8-hsl: 228 69% 55%; --indigo-9-hsl: 230 57% 50%; --indigo-10-hsl: 230 57% 43%; --indigo-11-hsl: 230 57% 37%; --indigo-12-hsl: 230 57% 30%; } } @layer colors.hsl.blue { :where(html) { --blue-0-hsl: 205 100% 95%; --blue-1-hsl: 206 100% 91%; --blue-2-hsl: 206 100% 82%; --blue-3-hsl: 206 96% 72%; --blue-4-hsl: 207 91% 64%; --blue-5-hsl: 207 86% 57%; --blue-6-hsl: 208 80% 52%; --blue-7-hsl: 208 77% 47%; --blue-8-hsl: 209 77% 43%; --blue-9-hsl: 209 75% 38%; --blue-10-hsl: 209 76% 32%; --blue-11-hsl: 209 75% 27%; --blue-12-hsl: 209 76% 21%; } } @layer colors.hsl.cyan { :where(html) { --cyan-0-hsl: 185 81% 94%; --cyan-1-hsl: 185 84% 88%; --cyan-2-hsl: 186 77% 77%; --cyan-3-hsl: 187 74% 65%; --cyan-4-hsl: 187 69% 55%; --cyan-5-hsl: 188 72% 47%; --cyan-6-hsl: 187 80% 42%; --cyan-7-hsl: 188 83% 37%; --cyan-8-hsl: 189 85% 32%; --cyan-9-hsl: 189 85% 28%; --cyan-10-hsl: 189 84% 23%; --cyan-11-hsl: 190 84% 17%; --cyan-12-hsl: 189 84% 12%; } } @layer colors.hsl.teal { :where(html) { --teal-0-hsl: 161 79% 95%; --teal-1-hsl: 160 85% 87%; --teal-2-hsl: 162 78% 77%; --teal-3-hsl: 162 72% 65%; --teal-4-hsl: 162 68% 54%; --teal-5-hsl: 162 73% 46%; --teal-6-hsl: 162 82% 40%; --teal-7-hsl: 162 87% 35%; --teal-8-hsl: 162 88% 30%; --teal-9-hsl: 162 88% 26%; --teal-10-hsl: 162 89% 21%; --teal-11-hsl: 162 88% 16%; --teal-12-hsl: 163 89% 11%; } } @layer colors.hsl.green { :where(html) { --green-0-hsl: 131 67% 95%; --green-1-hsl: 128 76% 90%; --green-2-hsl: 128 71% 82%; --green-3-hsl: 129 68% 73%; --green-4-hsl: 130 61% 64%; --green-5-hsl: 130 57% 56%; --green-6-hsl: 131 50% 50%; --green-7-hsl: 131 53% 46%; --green-8-hsl: 131 54% 40%; --green-9-hsl: 132 52% 35%; --green-10-hsl: 132 52% 29%; --green-11-hsl: 132 53% 22%; --green-12-hsl: 131 53% 16%; } } @layer colors.hsl.lime { :where(html) { --lime-0-hsl: 79 81% 94%; --lime-1-hsl: 80 83% 88%; --lime-2-hsl: 81 81% 80%; --lime-3-hsl: 82 75% 69%; --lime-4-hsl: 83 73% 59%; --lime-5-hsl: 84 69% 51%; --lime-6-hsl: 85 74% 45%; --lime-7-hsl: 85 79% 40%; --lime-8-hsl: 86 84% 36%; --lime-9-hsl: 85 84% 32%; --lime-10-hsl: 85 83% 26%; --lime-11-hsl: 85 83% 21%; --lime-12-hsl: 85 84% 15%; } } @layer colors.hsl.yellow { :where(html) { --yellow-0-hsl: 50 100% 93%; --yellow-1-hsl: 49 100% 87%; --yellow-2-hsl: 49 100% 80%; --yellow-3-hsl: 48 100% 70%; --yellow-4-hsl: 47 100% 62%; --yellow-5-hsl: 45 97% 54%; --yellow-6-hsl: 42 96% 50%; --yellow-7-hsl: 39 100% 48%; --yellow-8-hsl: 35 100% 47%; --yellow-9-hsl: 31 100% 45%; --yellow-10-hsl: 31 100% 35%; --yellow-11-hsl: 31 100% 25%; --yellow-12-hsl: 31 100% 20%; } } @layer colors.hsl.orange { :where(html) { --orange-0-hsl: 34 100% 95%; --orange-1-hsl: 33 100% 90%; --orange-2-hsl: 33 100% 83%; --orange-3-hsl: 32 100% 74%; --orange-4-hsl: 31 100% 65%; --orange-5-hsl: 29 100% 58%; --orange-6-hsl: 27 98% 54%; --orange-7-hsl: 24 94% 50%; --orange-8-hsl: 21 90% 48%; --orange-9-hsl: 17 87% 45%; --orange-10-hsl: 17 87% 40%; --orange-11-hsl: 17 87% 32%; --orange-12-hsl: 17 87% 27%; } } @layer colors.hsl.choco { :where(html) { --choco-0-hsl: 48 100% 93%; --choco-1-hsl: 35 91% 86%; --choco-2-hsl: 30 85% 79%; --choco-3-hsl: 27 80% 72%; --choco-4-hsl: 25 75% 65%; --choco-5-hsl: 25 71% 57%; --choco-6-hsl: 25 70% 49%; --choco-7-hsl: 25 75% 42%; --choco-8-hsl: 25 75% 37%; --choco-9-hsl: 25 76% 31%; --choco-10-hsl: 25 71% 26%; --choco-11-hsl: 25 66% 21%; --choco-12-hsl: 25 65% 15%; } } @layer colors.hsl.brown { :where(html) { --brown-0-hsl: 36 60% 95%; --brown-1-hsl: 32 44% 87%; --brown-2-hsl: 28 40% 80%; --brown-3-hsl: 28 38% 72%; --brown-4-hsl: 27 36% 65%; --brown-5-hsl: 28 34% 57%; --brown-6-hsl: 28 32% 50%; --brown-7-hsl: 28 35% 43%; --brown-8-hsl: 28 38% 37%; --brown-9-hsl: 27 42% 31%; --brown-10-hsl: 25 48% 25%; --brown-11-hsl: 23 58% 19%; --brown-12-hsl: 22 57% 16%; } } @layer colors.hsl.sand { :where(html) { --sand-0-hsl: 200 27% 98%; --sand-1-hsl: 48 17% 88%; --sand-2-hsl: 45 22% 79%; --sand-3-hsl: 44 22% 69%; --sand-4-hsl: 44 17% 62%; --sand-5-hsl: 44 14% 54%; --sand-6-hsl: 42 14% 46%; --sand-7-hsl: 43 16% 39%; --sand-8-hsl: 41 15% 32%; --sand-9-hsl: 43 14% 26%; --sand-10-hsl: 44 11% 20%; --sand-11-hsl: 60 6% 14%; --sand-12-hsl: 60 6% 7%; } } @layer colors.hsl.camo { :where(html) { --camo-0-hsl: 66 71% 95%; --camo-1-hsl: 64 69% 77%; --camo-2-hsl: 65 69% 59%; --camo-3-hsl: 65 61% 51%; --camo-4-hsl: 63 61% 46%; --camo-5-hsl: 60 62% 41%; --camo-6-hsl: 59 65% 36%; --camo-7-hsl: 56 67% 33%; --camo-8-hsl: 54 70% 29%; --camo-9-hsl: 54 69% 25%; --camo-10-hsl: 53 69% 22%; --camo-11-hsl: 53 69% 18%; --camo-12-hsl: 52 69% 13%; } } @layer colors.hsl.jungle { :where(html) { --jungle-0-hsl: 74 98% 84%; --jungle-1-hsl: 74 79% 78%; --jungle-2-hsl: 74 68% 71%; --jungle-3-hsl: 75 62% 65%; --jungle-4-hsl: 74 56% 59%; --jungle-5-hsl: 74 53% 53%; --jungle-6-hsl: 74 55% 47%; --jungle-7-hsl: 74 66% 42%; --jungle-8-hsl: 74 79% 36%; --jungle-9-hsl: 73 90% 32%; --jungle-10-hsl: 73 91% 26%; --jungle-11-hsl: 73 91% 21%; --jungle-12-hsl: 73 90% 16%; } } } @layer colors.oklch { @layer colors.oklch.gray { :where(html) { --gray-0-oklch: 98.16% 0.002 247.84; --gray-1-oklch: 96.32% 0.003 247.86; --gray-2-oklch: 94.17% 0.005 247.88; --gray-3-oklch: 91.09% 0.007 247.9; --gray-4-oklch: 86.71% 0.011 247.95; --gray-5-oklch: 76.92% 0.015 248.02; --gray-6-oklch: 64.28% 0.015 248.06; --gray-7-oklch: 42.76% 0.015 248.17; --gray-8-oklch: 34.51% 0.013 248.21; --gray-9-oklch: 26.21% 0.009 248.19; --gray-10-oklch: 21.2% 0.009 255.61; --gray-11-oklch: 16.76% 0.007 258.37; --gray-12-oklch: 11.24% 0.009 242.17; } } @layer colors.oklch.stone { :where(html) { --stone-0-oklch: 98.39% 0.003 228.78; --stone-1-oklch: 96.62% 0.003 247.86; --stone-2-oklch: 94.51% 0.003 247.86; --stone-3-oklch: 91.61% 0.005 214.33; --stone-4-oklch: 87.28% 0.006 223.46; --stone-5-oklch: 77.32% 0.007 233.67; --stone-6-oklch: 68.68% 0.005 228.86; --stone-7-oklch: 60.32% 0.005 197.03; --stone-8-oklch: 51.78% 0.004 174.36; --stone-9-oklch: 43.33% 0.003 128.55; --stone-10-oklch: 34.74% 0.005 106.66; --stone-11-oklch: 26.3% 0.007 106.89; --stone-12-oklch: 18.14% 0.004 106.79; } } @layer colors.oklch.red { :where(html) { --red-0-oklch: 97.79% 0.010749906051195026 17.34037927927983; --red-1-oklch: 93.87% 0.030868399831746662 17.714795342008184; --red-2-oklch: 88.34% 0.06163334626139353 18.38651313022084; --red-3-oklch: 81.69% 0.103 19.53; --red-4-oklch: 75.63% 0.14600146252800328 21.104967448640114; --red-5-oklch: 71.16% 0.181 22.84; --red-6-oklch: 67.06% 0.204 24.52; --red-7-oklch: 63.24% 0.214 25.84; --red-8-oklch: 59.28% 0.211 26.53; --red-9-oklch: 54.57% 0.195 26.61; --red-10-oklch: 49.57% 0.175 26.46; --red-11-oklch: 44.25% 0.154 26.22; --red-12-oklch: 38.87% 0.134 26.07; } } @layer colors.oklch.pink { :where(html) { --pink-0-oklch: 96.86% 0.01792402859226809 351.141483413555; --pink-1-oklch: 93.15% 0.04 352.16; --pink-2-oklch: 87.18% 0.071 355.09; --pink-3-oklch: 80.8% 0.11 357.15; --pink-4-oklch: 74.96% 0.147 358.8; --pink-5-oklch: 69.24% 0.177 1.25; --pink-6-oklch: 63.96% 0.197 3.19; --pink-7-oklch: 58.81% 0.201 5.25; --pink-8-oklch: 53.89% 0.193 6.48; --pink-9-oklch: 47.97% 0.172 6.83; --pink-10-oklch: 42.48% 0.151 6.38; --pink-11-oklch: 37.11% 0.129 5.58; --pink-12-oklch: 31.24% 0.106 4.62; } } @layer colors.oklch.purple { :where(html) { --purple-0-oklch: 96.48% 0.018 314.74; --purple-1-oklch: 91.65% 0.052 319.03; --purple-2-oklch: 86.3% 0.096 319.46; --purple-3-oklch: 79.04% 0.152 319.77; --purple-4-oklch: 72.52% 0.196 319.53; --purple-5-oklch: 66.95% 0.219 319.07; --purple-6-oklch: 62.39% 0.225 318.91; --purple-7-oklch: 57.83% 0.219 319.15; --purple-8-oklch: 53.33% 0.203 319; --purple-9-oklch: 47.83% 0.181 318.86; --purple-10-oklch: 42.1% 0.157 319.11; --purple-11-oklch: 36.25% 0.133 318.93; --purple-12-oklch: 30.21% 0.106 319.2; } } @layer colors.oklch.violet { :where(html) { --violet-0-oklch: 96.18% 0.02 295.19; --violet-1-oklch: 91.05% 0.04971566046480921 298.110146818624; --violet-2-oklch: 84.05% 0.08986853526888154 296.6040749632581; --violet-3-oklch: 73.98% 0.144 294.45; --violet-4-oklch: 65.77% 0.191 292.12; --violet-5-oklch: 60.29% 0.218 289.69; --violet-6-oklch: 56.92% 0.229 288.56; --violet-7-oklch: 54.21% 0.227 287.8; --violet-8-oklch: 51.2% 0.218 287.54; --violet-9-oklch: 48.12% 0.198 288.16; --violet-10-oklch: 43.61% 0.178 287.97; --violet-11-oklch: 39% 0.156 288.51; --violet-12-oklch: 34.34% 0.134 288.98; } } @layer colors.oklch.indigo { :where(html) { --indigo-0-oklch: 96.12% 0.018 269.09; --indigo-1-oklch: 92.04% 0.038 270.98; --indigo-2-oklch: 84.11% 0.07866879554114047 273.4979346510878; --indigo-3-oklch: 74.73% 0.12961380724033716 272.26608446912127; --indigo-4-oklch: 67.99% 0.163 271.04; --indigo-5-oklch: 62.8% 0.191 269.5; --indigo-6-oklch: 58.96% 0.205 268.62; --indigo-7-oklch: 55.66% 0.208 268.35; --indigo-8-oklch: 52.56% 0.199 268.04; --indigo-9-oklch: 48.41% 0.188 269.07; --indigo-10-oklch: 43.76% 0.169 269.4; --indigo-11-oklch: 39.27% 0.149 269.56; --indigo-12-oklch: 34.55% 0.127 269.77; } } @layer colors.oklch.blue { :where(html) { --blue-0-oklch: 96.27% 0.02 238.66; --blue-1-oklch: 92.66% 0.039 240.01; --blue-2-oklch: 86.02% 0.07593952752827733 241.6648707824914; --blue-3-oklch: 78.2% 0.115 243.83; --blue-4-oklch: 71.8% 0.142 246.06; --blue-5-oklch: 66.89% 0.157 248.32; --blue-6-oklch: 62.59% 0.164 250.29; --blue-7-oklch: 58.56% 0.159 251.26; --blue-8-oklch: 54.26% 0.149 251.67; --blue-9-oklch: 49.72% 0.133 251.59; --blue-10-oklch: 44.32% 0.117 251.19; --blue-11-oklch: 38.85% 0.1 251.3; --blue-12-oklch: 33.09% 0.082 250.66; } } @layer colors.oklch.cyan { :where(html) { --cyan-0-oklch: 96.89% 0.024 203.08; --cyan-1-oklch: 94.05% 0.05 202.5; --cyan-2-oklch: 88.56% 0.079 204.84; --cyan-3-oklch: 82.43% 0.106 206.82; --cyan-4-oklch: 77% 0.119 207.56; --cyan-5-oklch: 72% 0.119 211.22; --cyan-6-oklch: 67.77% 0.114 210.62; --cyan-7-oklch: 62.49% 0.106 212.19; --cyan-8-oklch: 56.75% 0.097 213.4; --cyan-9-oklch: 50.9% 0.087 215.07; --cyan-10-oklch: 43.77% 0.074 214.34; --cyan-11-oklch: 36.38% 0.061 214.76; --cyan-12-oklch: 28.54% 0.046 213.38; } } @layer colors.oklch.teal { :where(html) { --teal-0-oklch: 97.31% 0.025 174.76; --teal-1-oklch: 94.25% 0.061 172.92; --teal-2-oklch: 89.59% 0.096 173.35; --teal-3-oklch: 84.08% 0.13 170.11; --teal-4-oklch: 79.26% 0.147 167.92; --teal-5-oklch: 74.41% 0.148 166.36; --teal-6-oklch: 69.46% 0.143 164.88; --teal-7-oklch: 64.32% 0.134 164.7; --teal-8-oklch: 58.51% 0.123 164.1; --teal-9-oklch: 52.92% 0.11 164.67; --teal-10-oklch: 45.3% 0.093 165.07; --teal-11-oklch: 37.36% 0.076 165.63; --teal-12-oklch: 28.63% 0.056 167.96; } } @layer colors.oklch.green { :where(html) { --green-0-oklch: 97.27% 0.024 151.19; --green-1-oklch: 94.63% 0.059 148.83; --green-2-oklch: 90.38% 0.099 148.43; --green-3-oklch: 85.62% 0.141 147.8; --green-4-oklch: 80.2% 0.168 147.32; --green-5-oklch: 76.02% 0.183 146.61; --green-6-oklch: 71.46% 0.183 146.44; --green-7-oklch: 67.41% 0.177 146.24; --green-8-oklch: 61.72% 0.162 146.43; --green-9-oklch: 56.04% 0.143 146.89; --green-10-oklch: 48.3% 0.121 146.9; --green-11-oklch: 40.55% 0.099 147.2; --green-12-oklch: 32.09% 0.075 147.29; } } @layer colors.oklch.lime { :where(html) { --lime-0-oklch: 97.85% 0.034 121.48; --lime-1-oklch: 96% 0.068 122.93; --lime-2-oklch: 92.99% 0.111 124.18; --lime-3-oklch: 88.48% 0.154 125.92; --lime-4-oklch: 84.74% 0.188 127.98; --lime-5-oklch: 80.71% 0.202 129.8; --lime-6-oklch: 76% 0.2 131.08; --lime-7-oklch: 70.99% 0.19 131.53; --lime-8-oklch: 66.16% 0.18 132.25; --lime-9-oklch: 60.43% 0.162 131.55; --lime-10-oklch: 52.61% 0.14 131.31; --lime-11-oklch: 44.76% 0.118 131.23; --lime-12-oklch: 36.26% 0.093 130.65; } } @layer colors.oklch.yellow { :where(html) { --yellow-0-oklch: 97.9% 0.03956210666559445 97.75672342501291; --yellow-1-oklch: 96.1% 0.06790217651789869 96.58954087169707; --yellow-2-oklch: 94.02% 0.10486308817656052 96.83472364933995; --yellow-3-oklch: 90.97% 0.14400790021880616 95.11197187031514; --yellow-4-oklch: 88.26% 0.1648482291234316 92.22168317139845; --yellow-5-oklch: 84.71% 0.169 87.12; --yellow-6-oklch: 80.69% 0.167 78.12; --yellow-7-oklch: 77.02% 0.16582987571471072 71.02211948777222; --yellow-8-oklch: 73.11% 0.167 62.62; --yellow-9-oklch: 68.35% 0.169 54.96; --yellow-10-oklch: 56.79% 0.1398632416733952 55.455155640235084; --yellow-11-oklch: 44.79% 0.108 57.16; --yellow-12-oklch: 38.41% 0.091 58.93; } } @layer colors.oklch.orange { :where(html) { --orange-0-oklch: 97.2% 0.021971639401550308 74.10109789840963; --orange-1-oklch: 94.24% 0.04460473571680806 72.67518629337512; --orange-2-oklch: 90.39% 0.07583927071471314 72.41544469844727; --orange-3-oklch: 85.03% 0.11490584512810995 68.95126967388705; --orange-4-oklch: 80.34% 0.146 64.6; --orange-5-oklch: 76.16% 0.16860311721681184 57.801154247888526; --orange-6-oklch: 72.65% 0.183 51.48; --orange-7-oklch: 68.51% 0.195 44.57; --orange-8-oklch: 64.42% 0.192 41.69; --orange-9-oklch: 59.99% 0.19 37.88; --orange-10-oklch: 54.72% 0.172 38.29; --orange-11-oklch: 46.64% 0.144 38.43; --orange-12-oklch: 41.2% 0.125 38.96; } } @layer colors.oklch.choco { :where(html) { --choco-0-oklch: 97.73% 0.037 95.44; --choco-1-oklch: 92.27% 0.057 75.63; --choco-2-oklch: 86.77% 0.077 65.88; --choco-3-oklch: 81.1% 0.098 59.23; --choco-4-oklch: 75.55% 0.119 55.97; --choco-5-oklch: 70.12% 0.136 53.79; --choco-6-oklch: 64.55% 0.152 51.17; --choco-7-oklch: 58.83% 0.142 50.73; --choco-8-oklch: 52.87% 0.128 50.11; --choco-9-oklch: 46.93% 0.111 51.22; --choco-10-oklch: 41.02% 0.091 52.35; --choco-11-oklch: 35.07% 0.072 53.66; --choco-12-oklch: 28.05% 0.053 54.07; } } @layer colors.oklch.brown { :where(html) { --brown-0-oklch: 96.93% 0.014 78.26; --brown-1-oklch: 91.3% 0.025 71.46; --brown-2-oklch: 85.22% 0.036 63.16; --brown-3-oklch: 79.7% 0.047 63.84; --brown-4-oklch: 73.64% 0.058 61.38; --brown-5-oklch: 67.94% 0.068 61.67; --brown-6-oklch: 62.09% 0.076 61.54; --brown-7-oklch: 56.25% 0.074 61.07; --brown-8-oklch: 50.49% 0.07 60.49; --brown-9-oklch: 44.58% 0.066 59.75; --brown-10-oklch: 38.55% 0.064 54.41; --brown-11-oklch: 32.92% 0.062 51.23; --brown-12-oklch: 29.56% 0.054 50.37; } } @layer colors.oklch.sand { :where(html) { --sand-0-oklch: 98.39% 0.003 228.78; --sand-1-oklch: 91.82% 0.011 95.17; --sand-2-oklch: 85.44% 0.025 91.64; --sand-3-oklch: 78.65% 0.036 90.55; --sand-4-oklch: 72.28% 0.036 90.56; --sand-5-oklch: 65.76% 0.037 90.58; --sand-6-oklch: 58.89% 0.036 87.29; --sand-7-oklch: 52.62% 0.036 89.19; --sand-8-oklch: 45.94% 0.028 85.75; --sand-9-oklch: 39.51% 0.022 89.49; --sand-10-oklch: 32.94% 0.014 89.88; --sand-11-oklch: 26.3% 0.007 106.89; --sand-12-oklch: 18.14% 0.004 106.79; } } @layer colors.oklch.camo { :where(html) { --camo-0-oklch: 98.12% 0.026 111.51; --camo-1-oklch: 92.39% 0.103 111.24; --camo-2-oklch: 86.74% 0.165 114.24; --camo-3-oklch: 81.59% 0.168 114.07; --camo-4-oklch: 76.31% 0.155 112.05; --camo-5-oklch: 70.85% 0.143 110.01; --camo-6-oklch: 65.53% 0.131 107.99; --camo-7-oklch: 60.44% 0.119 105.44; --camo-8-oklch: 55.15% 0.108 102.9; --camo-9-oklch: 49.69% 0.096 102.59; --camo-10-oklch: 44.17% 0.084 101.29; --camo-11-oklch: 38.98% 0.073 101.94; --camo-12-oklch: 30.7% 0.055 100.15; } } @layer colors.oklch.jungle { :where(html) { --jungle-0-oklch: 96.56% 0.101 118.9; --jungle-1-oklch: 92.86% 0.115 119.51; --jungle-2-oklch: 89.15% 0.128 120.12; --jungle-3-oklch: 85.43% 0.141 120.76; --jungle-4-oklch: 81.6% 0.148 120.94; --jungle-5-oklch: 77.98% 0.155 121.51; --jungle-6-oklch: 74.35% 0.159 122.22; --jungle-7-oklch: 70.8% 0.162 122.7; --jungle-8-oklch: 67.3% 0.16 123.03; --jungle-9-oklch: 63.63% 0.154 122.96; --jungle-10-oklch: 55.84% 0.135 123.25; --jungle-11-oklch: 47.59% 0.114 122.73; --jungle-12-oklch: 39.24% 0.093 122.48; } } } @layer colors.pixel-phonest-latettes { @layer colors.pixel-4-orange { :where(html) { --pixel-4-orange-50: 97.63% 0.011 39.44; --pixel-4-orange-100: 94.7% 0.025 35.71; --pixel-4-orange-200: 90.49% 0.049 35.45; --pixel-4-orange-300: 84.09% 0.084 36.21; --pixel-4-orange-400: 75.39% 0.136 36.18; --pixel-4-orange-500: 71.32% 0.151 36.25; --pixel-4-orange-600: 61.18% 0.186 35.62; --pixel-4-orange-700: 53.56% 0.165 35.65; --pixel-4-orange-800: 47.14% 0.138 35.8; --pixel-4-orange-900: 42.2% 0.112 36.09; --pixel-4-orange-950: 27.49% 0.075 36.42; } } @layer colors.pixel-4a-barely-blue { :where(html) { --pixel-4a--barely-blue-50: 97.6% 0.009 242.84; --pixel-4a--barely-blue-100: 94.71% 0.019 248.03; --pixel-4a--barely-blue-200: 91.39% 0.033 241.08; --pixel-4a--barely-blue-300: 79.66% 0.081 240.6; --pixel-4a--barely-blue-400: 69.87% 0.118 240.19; --pixel-4a--barely-blue-500: 61.56% 0.133 243.27; --pixel-4a--barely-blue-600: 52.38% 0.128 247.57; --pixel-4a--barely-blue-700: 44.86% 0.107 248.13; --pixel-4a--barely-blue-800: 40.09% 0.089 247.1; --pixel-4a--barely-blue-900: 36.09% 0.074 247.36; --pixel-4a--barely-blue-950: 27.16% 0.056 251.4; } } @layer colors.pixel-5-sorta-sage { :where(html) { --pixel-5-sorta-sage-50: 97.81% 0.002 145.56; --pixel-5-sorta-sage-100: 96.01% 0.002 145.56; --pixel-5-sorta-sage-200: 92.46% 0.004 179.73; --pixel-5-sorta-sage-300: 86.4% 0.008 177.29; --pixel-5-sorta-sage-400: 77.55% 0.014 179.35; --pixel-5-sorta-sage-500: 71.64% 0.016 181.58; --pixel-5-sorta-sage-600: 61.62% 0.019 183.17; --pixel-5-sorta-sage-700: 54.14% 0.02 183.02; --pixel-5-sorta-sage-800: 47.81% 0.015 184.6; --pixel-5-sorta-sage-900: 43.03% 0.012 188.66; --pixel-5-sorta-sage-950: 29.81% 0.01 186.24; } } @layer colors.pixel-5a { :where(html) { --pixel-5a-50: 97.31% 0 0; --pixel-5a-100: 92.8% 0 0; --pixel-5a-200: 86.07% 0 0; --pixel-5a-300: 75.72% 0 0; --pixel-5a-400: 62.68% 0 0; --pixel-5a-500: 53.48% 0 0; --pixel-5a-600: 47.84% 0 0; --pixel-5a-700: 42.76% 0 0; --pixel-5a-800: 39.04% 0 0; --pixel-5a-900: 32.11% 0 0; --pixel-5a-950: 26.86% 0 0; } } @layer colors.pixel-6a-charcoal { :where(html) { --pixel-6a-charcoal-50: 97.24% 0.001 197.14; --pixel-6a-charcoal-100: 92.62% 0.004 236.5; --pixel-6a-charcoal-200: 86% 0.008 228.87; --pixel-6a-charcoal-300: 75.8% 0.012 231.71; --pixel-6a-charcoal-400: 62.89% 0.017 229.12; --pixel-6a-charcoal-500: 53.44% 0.019 236.98; --pixel-6a-charcoal-600: 47.66% 0.016 241.23; --pixel-6a-charcoal-700: 42.44% 0.013 248.13; --pixel-6a-charcoal-800: 38.82% 0.009 248.05; --pixel-6a-charcoal-900: 31.93% 0.007 248.04; --pixel-6a-charcoal-950: 26.68% 0.007 248.09; } } @layer colors.pixel-6a-chalk { :where(html) { --pixel-6a-chalk-50: 97.91% 0 0; --pixel-6a-chalk-100: 94.91% 0 0; --pixel-6a-chalk-200: 89.45% 0 0; --pixel-6a-chalk-300: 79.84% 0 0; --pixel-6a-chalk-400: 67.97% 0 0; --pixel-6a-chalk-500: 58.63% 0 0; --pixel-6a-chalk-600: 50.68% 0 0; --pixel-6a-chalk-700: 43.86% 0 0; --pixel-6a-chalk-800: 39.42% 0 0; --pixel-6a-chalk-900: 36% 0 0; --pixel-6a-chalk-950: 28.09% 0 0; } } @layer colors.pixel-6a-sage { :where(html) { --pixel-6a-sage-50: 97.03% 0.004 157.18; --pixel-6a-sage-100: 92.7% 0.011 149.85; --pixel-6a-sage-200: 85.64% 0.02 154.84; --pixel-6a-sage-300: 76.35% 0.029 157.17; --pixel-6a-sage-400: 63.07% 0.04 157.43; --pixel-6a-sage-500: 52.75% 0.043 158.8; --pixel-6a-sage-600: 44.28% 0.038 159.83; --pixel-6a-sage-700: 38.1% 0.031 160.39; --pixel-6a-sage-800: 33.23% 0.024 161.45; --pixel-6a-sage-900: 29.59% 0.02 163.27; --pixel-6a-sage-950: 21.25% 0.014 163.25; } } @layer colors.pixel-6-sorta-seafoam { :where(html) { --pixel-6-sorta-seafoam-50: 97.51% 0.005 183.03; --pixel-6-sorta-seafoam-100: 93.58% 0.014 185.94; --pixel-6-sorta-seafoam-200: 89.12% 0.022 189.52; --pixel-6-sorta-seafoam-300: 78.84% 0.041 188.47; --pixel-6-sorta-seafoam-400: 67.66% 0.057 190.02; --pixel-6-sorta-seafoam-500: 58.83% 0.058 191.17; --pixel-6-sorta-seafoam-600: 52.34% 0.049 193.93; --pixel-6-sorta-seafoam-700: 46.31% 0.039 195.88; --pixel-6-sorta-seafoam-800: 41.51% 0.03 199.17; --pixel-6-sorta-seafoam-900: 37.51% 0.024 204.24; --pixel-6-sorta-seafoam-950: 28.13% 0.019 207.08; } } @layer colors.pixel-6-kinda-coral { :where(html) { --pixel-6-kinda-coral-50: 97.25% 0.012 23.7; --pixel-6-kinda-coral-100: 93.75% 0.03 20.24; --pixel-6-kinda-coral-200: 89% 0.056 22.35; --pixel-6-kinda-coral-300: 83.54% 0.087 22.56; --pixel-6-kinda-coral-400: 72.02% 0.161 25.02; --pixel-6-kinda-coral-500: 64.62% 0.202 27.42; --pixel-6-kinda-coral-600: 58.58% 0.212 28.88; --pixel-6-kinda-coral-700: 51.17% 0.187 28.85; --pixel-6-kinda-coral-800: 45.03% 0.158 28.62; --pixel-6-kinda-coral-900: 40.17% 0.131 27.68; --pixel-6-kinda-coral-950: 26.08% 0.086 27.81; } } @layer colors.pixel-6-stormy-black { :where(html) { --pixel-6-stormy-black-50: 97.24% 0.001 197.14; --pixel-6-stormy-black-100: 92.72% 0.001 197.14; --pixel-6-stormy-black-200: 85.99% 0.001 197.14; --pixel-6-stormy-black-300: 75.41% 0.004 271.35; --pixel-6-stormy-black-400: 62.57% 0.004 247.89; --pixel-6-stormy-black-500: 53.37% 0.004 247.9; --pixel-6-stormy-black-600: 47.49% 0.005 271.31; --pixel-6-stormy-black-700: 42.74% 0.004 264.52; --pixel-6-stormy-black-800: 38.98% 0.002 247.88; --pixel-6-stormy-black-900: 35.91% 0.001 197.1; --pixel-6-stormy-black-950: 26.53% 0.004 286.15; } } @layer colors.pixel-6pro-cloudy-white { :where(html) { --pixel-6pro-cloudy-white-50: 97.41% 0.003 67.78; --pixel-6pro-cloudy-white-100: 94.01% 0.01 67.7; --pixel-6pro-cloudy-white-200: 88.22% 0.018 64.91; --pixel-6pro-cloudy-white-300: 79.17% 0.033 62.71; --pixel-6pro-cloudy-white-400: 69.6% 0.047 54.6; --pixel-6pro-cloudy-white-500: 62.66% 0.059 48.94; --pixel-6pro-cloudy-white-600: 57.86% 0.058 43.5; --pixel-6pro-cloudy-white-700: 50.37% 0.052 37.23; --pixel-6pro-cloudy-white-800: 44.21% 0.041 33.99; --pixel-6pro-cloudy-white-900: 38.77% 0.034 32.52; --pixel-6pro-cloudy-white-950: 25.58% 0.022 27.94; } } @layer colors.pixel-6pro-sorta-sunny { :where(html) { --pixel-6pro-sorta-sunny-50: 97.77% 0.015 67.65; --pixel-6pro-sorta-sunny-100: 95.23% 0.03670760217373077 72.62431083804977; --pixel-6pro-sorta-sunny-200: 90.11% 0.07059989278331402 66.72854895598135; --pixel-6pro-sorta-sunny-300: 82.93% 0.12 62.11; --pixel-6pro-sorta-sunny-400: 74.87% 0.165 52.14; --pixel-6pro-sorta-sunny-500: 69.82% 0.196 44.43; --pixel-6pro-sorta-sunny-600: 64.04% 0.205 38.4; --pixel-6pro-sorta-sunny-700: 54.8% 0.183 36; --pixel-6pro-sorta-sunny-800: 46.6% 0.151 35.15; --pixel-6pro-sorta-sunny-900: 40.33% 0.123 35.55; --pixel-6pro-sorta-sunny-950: 26.47% 0.08 35; } } @layer colors.pixel-6pro-stormy-black { :where(html) { --pixel-6pro-stormy-black-50: 97.24% 0.001 197.14; --pixel-6pro-stormy-black-100: 92.72% 0.001 197.14; --pixel-6pro-stormy-black-200: 85.94% 0.003 228.79; --pixel-6pro-stormy-black-300: 75.83% 0.004 219.54; --pixel-6pro-stormy-black-400: 62.74% 0.006 228.87; --pixel-6pro-stormy-black-500: 53.54% 0.006 228.89; --pixel-6pro-stormy-black-600: 47.9% 0.006 228.92; --pixel-6pro-stormy-black-700: 42.65% 0.004 247.92; --pixel-6pro-stormy-black-800: 39.23% 0.003 197.05; --pixel-6pro-stormy-black-900: 32.05% 0.002 247.9; --pixel-6pro-stormy-black-950: 26.8% 0.002 247.91; } } @layer colors.pixel-7a-coral { :where(html) { --pixel-7a-coral-50: 97.3% 0.013 28.86; --pixel-7a-coral-100: 94.19% 0.029 28.12; --pixel-7a-coral-200: 89.42% 0.055 27.86; --pixel-7a-coral-300: 82.55% 0.0976764466139133 29.388686444594825; --pixel-7a-coral-400: 74.61% 0.152 30.25; --pixel-7a-coral-500: 66.63% 0.202 31.48; --pixel-7a-coral-600: 60.46% 0.211 31.75; --pixel-7a-coral-700: 52.93% 0.187 31.65; --pixel-7a-coral-800: 46.55% 0.158 31.84; --pixel-7a-coral-900: 41.37% 0.129 31.47; --pixel-7a-coral-950: 27.03% 0.087 32.04; } } @layer colors.pixel-7a-sea { :where(html) { --pixel-7a-sea-50: 97.8% 0.009 232.36; --pixel-7a-sea-100: 94.39% 0.021 236.76; --pixel-7a-sea-200: 89.8% 0.041 231.02; --pixel-7a-sea-300: 81.65% 0.075 228.81; --pixel-7a-sea-400: 72.58% 0.108 229.57; --pixel-7a-sea-500: 64.51% 0.119 233.1; --pixel-7a-sea-600: 55.37% 0.111 237.21; --pixel-7a-sea-700: 47.55% 0.095 237.97; --pixel-7a-sea-800: 42.36% 0.078 236.2; --pixel-7a-sea-900: 37.64% 0.065 238.05; --pixel-7a-sea-950: 28.55% 0.049 241.05; } } @layer colors.pixel-7a-charcoal { :where(html) { --pixel-7a-charcoal-50: 97.04% 0.001 286.38; --pixel-7a-charcoal-100: 92.52% 0.001 286.37; --pixel-7a-charcoal-200: 85.79% 0.001 286.37; --pixel-7a-charcoal-300: 75.54% 0.003 308.42; --pixel-7a-charcoal-400: 62.49% 0.003 308.4; --pixel-7a-charcoal-500: 53.28% 0.003 308.39; --pixel-7a-charcoal-600: 47.64% 0.003 308.38; --pixel-7a-charcoal-700: 42.65% 0.004 325.65; --pixel-7a-charcoal-800: 38.93% 0.004 325.66; --pixel-7a-charcoal-900: 35.65% 0.002 286.31; --pixel-7a-charcoal-950: 26.86% 0 0; } } @layer colors.pixel-7a-snow { :where(html) { --pixel-7a-snow-50: 97.61% 0 0; --pixel-7a-snow-100: 95.21% 0 0; --pixel-7a-snow-200: 89.45% 0 0; --pixel-7a-snow-300: 79.84% 0 0; --pixel-7a-snow-400: 67.97% 0 0; --pixel-7a-snow-500: 58.63% 0 0; --pixel-7a-snow-600: 50.68% 0 0; --pixel-7a-snow-700: 43.86% 0 0; --pixel-7a-snow-800: 39.42% 0 0; --pixel-7a-snow-900: 36% 0 0; --pixel-7a-snow-950: 28.09% 0 0; } } @layer colors.pixel-7-lemongrass { :where(html) { --pixel-7-lemongrass-50: 97.95% 0.032 120.23; --pixel-7-lemongrass-100: 96.15% 0.058 121.16; --pixel-7-lemongrass-200: 92.58% 0.107 123.63; --pixel-7-lemongrass-300: 87.8% 0.159 125.43; --pixel-7-lemongrass-400: 82.14% 0.187 127.65; --pixel-7-lemongrass-500: 73.93% 0.187 129.38; --pixel-7-lemongrass-600: 62.29% 0.16 130.3; --pixel-7-lemongrass-700: 51.38% 0.128 130.46; --pixel-7-lemongrass-800: 43.94% 0.103 129.98; --pixel-7-lemongrass-900: 39.49% 0.086 129.67; --pixel-7-lemongrass-950: 26.5% 0.061 131.56; } } @layer colors.pixel-7-snow { :where(html) { --pixel-7-snow-50: 97.57% 0.002 247.84; --pixel-7-snow-100: 94.29% 0.003 264.54; --pixel-7-snow-200: 89.41% 0.006 264.53; --pixel-7-snow-300: 82.83% 0.009 258.34; --pixel-7-snow-400: 73.79% 0.015 268.45; --pixel-7-snow-500: 66.75% 0.02 272.19; --pixel-7-snow-600: 61.13% 0.022 273.05; --pixel-7-snow-700: 56.24% 0.023 279.6; --pixel-7-snow-800: 49.83% 0.018 277.55; --pixel-7-snow-900: 43.6% 0.013 274.64; --pixel-7-snow-950: 32.3% 0.009 285.9; } } @layer colors.pixel-7-obsidian { :where(html) { --pixel-7-obsidian-50: 97.31% 0 0; --pixel-7-obsidian-100: 92.8% 0 0; --pixel-7-obsidian-200: 86.07% 0 0; --pixel-7-obsidian-300: 75.72% 0 0; --pixel-7-obsidian-400: 62.68% 0 0; --pixel-7-obsidian-500: 53.48% 0 0; --pixel-7-obsidian-600: 47.84% 0 0; --pixel-7-obsidian-700: 42.76% 0 0; --pixel-7-obsidian-800: 39.04% 0 0; --pixel-7-obsidian-900: 36% 0 0; --pixel-7-obsidian-950: 26.45% 0 0; } } @layer colors.pixel-7pro-hazel { :where(html) { --pixel-7pro-hazel-50: 97.21% 0.002 145.56; --pixel-7pro-hazel-100: 92.69% 0.002 145.56; --pixel-7pro-hazel-200: 85.96% 0.002 145.56; --pixel-7pro-hazel-300: 75.82% 0.004 145.54; --pixel-7pro-hazel-400: 63.7% 0.005 157.12; --pixel-7pro-hazel-500: 53.76% 0.006 164.86; --pixel-7pro-hazel-600: 47.95% 0.004 145.51; --pixel-7pro-hazel-700: 42.87% 0.004 145.5; --pixel-7pro-hazel-800: 39.19% 0.003 164.93; --pixel-7pro-hazel-900: 35.87% 0.002 145.53; --pixel-7pro-hazel-950: 26.86% 0 0; } } @layer colors.pixel-7pro-snow { :where(html) { --pixel-7pro-snow-50: 97.61% 0 0; --pixel-7pro-snow-100: 92.8% 0 0; --pixel-7pro-snow-200: 90.37% 0 0; --pixel-7pro-snow-300: 83.28% 0 0; --pixel-7pro-snow-400: 74.76% 0 0; --pixel-7pro-snow-500: 68.3% 0 0; --pixel-7pro-snow-600: 62.68% 0 0; --pixel-7pro-snow-700: 58.29% 0 0; --pixel-7pro-snow-800: 51.38% 0 0; --pixel-7pro-snow-900: 44.59% 0 0; --pixel-7pro-snow-950: 33.29% 0 0; } } @layer colors.pixel-7pro-obsidian { :where(html) { --pixel-7pro-obsidian-50: 97.31% 0 0; --pixel-7pro-obsidian-100: 92.8% 0 0; --pixel-7pro-obsidian-200: 86.07% 0 0; --pixel-7pro-obsidian-300: 75.72% 0 0; --pixel-7pro-obsidian-400: 62.68% 0 0; --pixel-7pro-obsidian-500: 53.48% 0 0; --pixel-7pro-obsidian-600: 47.84% 0 0; --pixel-7pro-obsidian-700: 42.76% 0 0; --pixel-7pro-obsidian-800: 39.04% 0 0; --pixel-7pro-obsidian-900: 36% 0 0; --pixel-7pro-obsidian-950: 26.45% 0 0; } } @layer colors.pixel-8-mint { :where(html) { --pixel-8-mint-50: 97.4% 0.012 162.05; --pixel-8-mint-100: 94.21% 0.028 158.68; --pixel-8-mint-200: 87.65% 0.054 161.11; --pixel-8-mint-300: 79.08% 0.084 161.59; --pixel-8-mint-400: 69.01% 0.108 160.65; --pixel-8-mint-500: 59.68% 0.109 161.13; --pixel-8-mint-600: 50.76% 0.095 161.67; --pixel-8-mint-700: 43.38% 0.077 163.73; --pixel-8-mint-800: 37.34% 0.063 164.61; --pixel-8-mint-900: 33.03% 0.053 165.77; --pixel-8-mint-950: 23.36% 0.035 166.34; } } @layer colors.pixel-8-hazel { :where(html) { --pixel-8-hazel-50: 97.21% 0.002 145.56; --pixel-8-hazel-100: 92.69% 0.002 145.56; --pixel-8-hazel-200: 85.96% 0.002 145.56; --pixel-8-hazel-300: 75.82% 0.004 145.54; --pixel-8-hazel-400: 64.11% 0.004 145.53; --pixel-8-hazel-500: 53.58% 0.004 145.52; --pixel-8-hazel-600: 47.95% 0.004 145.51; --pixel-8-hazel-700: 42.91% 0.003 164.96; --pixel-8-hazel-800: 39.04% 0 0; --pixel-8-hazel-900: 35.87% 0.002 145.53; --pixel-8-hazel-950: 26.86% 0 0; } } @layer colors.pixel-8-obsidian { :where(html) { --pixel-8-obsidian-50: 97.31% 0 0; --pixel-8-obsidian-100: 92.8% 0 0; --pixel-8-obsidian-200: 86.07% 0 0; --pixel-8-obsidian-300: 75.72% 0 0; --pixel-8-obsidian-400: 62.68% 0 0; --pixel-8-obsidian-500: 53.48% 0 0; --pixel-8-obsidian-600: 47.84% 0 0; --pixel-8-obsidian-700: 42.76% 0 0; --pixel-8-obsidian-800: 39.04% 0 0; --pixel-8-obsidian-900: 36% 0 0; --pixel-8-obsidian-950: 24.35% 0 0; } } @layer colors.pixel-8-rose { :where(html) { --pixel-8-rose-50: 97.87% 0.005 48.69; --pixel-8-rose-100: 95.53% 0.014 53.35; --pixel-8-rose-200: 91.08% 0.027 50.85; --pixel-8-rose-300: 85.98% 0.041 51.4; --pixel-8-rose-400: 77.44% 0.066 50.33; --pixel-8-rose-500: 69.18% 0.087 49.64; --pixel-8-rose-600: 61.36% 0.096 48.61; --pixel-8-rose-700: 53.57% 0.084 48.89; --pixel-8-rose-800: 47.47% 0.07 49.09; --pixel-8-rose-900: 42.87% 0.057 49.22; --pixel-8-rose-950: 27.92% 0.038 50.35; } } @layer colors.pixel-8pro-minty-fresh { :where(html) { --pixel-8pro-minty-fresh-50: 97.4% 0.012 162.05; --pixel-8pro-minty-fresh-100: 94.21% 0.028 158.68; --pixel-8pro-minty-fresh-200: 87.65% 0.054 161.11; --pixel-8pro-minty-fresh-300: 79.08% 0.084 161.59; --pixel-8pro-minty-fresh-400: 69.01% 0.108 160.65; --pixel-8pro-minty-fresh-500: 59.68% 0.109 161.13; --pixel-8pro-minty-fresh-600: 50.76% 0.095 161.67; --pixel-8pro-minty-fresh-700: 43.38% 0.077 163.73; --pixel-8pro-minty-fresh-800: 37.34% 0.063 164.61; --pixel-8pro-minty-fresh-900: 33.03% 0.053 165.77; --pixel-8pro-minty-fresh-950: 23.36% 0.035 166.34; } } @layer colors.pixel-8pro-bay { :where(html) { --pixel-8pro-bay-50: 97.09% 0.012 255.5; --pixel-8pro-bay-100: 93.43% 0.029 252.95; --pixel-8pro-bay-200: 88.7% 0.052 251.07; --pixel-8pro-bay-300: 84.49% 0.073 248.08; --pixel-8pro-bay-400: 72.63% 0.128 251.21; --pixel-8pro-bay-500: 63.77% 0.168 257.45; --pixel-8pro-bay-600: 56.03% 0.194 261.5; --pixel-8pro-bay-700: 50.09% 0.196 263.62; --pixel-8pro-bay-800: 43.76% 0.163 264.71; --pixel-8pro-bay-900: 38.84% 0.124 264.55; --pixel-8pro-bay-950: 28.91% 0.079 266.68; } } @layer colors.pixel-8pro-obsidian { :where(html) { --pixel-8pro-obsidian-50: 97.24% 0.001 197.14; --pixel-8pro-obsidian-100: 92.62% 0.004 236.5; --pixel-8pro-obsidian-200: 86.05% 0.006 223.47; --pixel-8pro-obsidian-300: 76.06% 0.011 219.62; --pixel-8pro-obsidian-400: 62.89% 0.017 229.12; --pixel-8pro-obsidian-500: 53.72% 0.017 229.21; --pixel-8pro-obsidian-600: 48.18% 0.014 223.73; --pixel-8pro-obsidian-700: 42.68% 0.012 238.78; --pixel-8pro-obsidian-800: 39.06% 0.008 233.86; --pixel-8pro-obsidian-900: 36.88% 0.007 240.02; --pixel-8pro-obsidian-950: 26.68% 0.007 248.09; } } @layer colors.pixel-8pro-porcelain { :where(html) { --pixel-8pro-porcelain-50: 97.36% 0.002 67.8; --pixel-8pro-porcelain-100: 93.85% 0.005 67.76; --pixel-8pro-porcelain-200: 90.31% 0.009 67.72; --pixel-8pro-porcelain-300: 78.89% 0.019 64.87; --pixel-8pro-porcelain-400: 69.44% 0.027 57.5; --pixel-8pro-porcelain-500: 62.65% 0.033 52.44; --pixel-8pro-porcelain-600: 58.1% 0.033 47.05; --pixel-8pro-porcelain-700: 50.76% 0.03 39.27; --pixel-8pro-porcelain-800: 44.69% 0.024 36.99; --pixel-8pro-porcelain-900: 39.16% 0.019 33.14; --pixel-8pro-porcelain-950: 26.04% 0.013 34.33; } } @layer colors.pixel-fold-porcelain { :where(html) { --pixel-fold-porcelain-50: 97.41% 0.003 67.78; --pixel-fold-porcelain-100: 94.15% 0.009 78.28; --pixel-fold-porcelain-200: 89.22% 0.015 70.87; --pixel-fold-porcelain-300: 79.39% 0.028 69.21; --pixel-fold-porcelain-400: 69.99% 0.041 60.72; --pixel-fold-porcelain-500: 63.34% 0.05 57.04; --pixel-fold-porcelain-600: 58.41% 0.051 49.22; --pixel-fold-porcelain-700: 50.92% 0.044 42.82; --pixel-fold-porcelain-800: 44.67% 0.035 39.23; --pixel-fold-porcelain-900: 39.26% 0.027 39.25; --pixel-fold-porcelain-950: 25.98% 0.018 35.75; } } @layer colors.pixel-fold-obsidian { :where(html) { --pixel-fold-obsidian-50: 97.31% 0 0; --pixel-fold-obsidian-100: 92.8% 0 0; --pixel-fold-obsidian-200: 86.07% 0 0; --pixel-fold-obsidian-300: 75.72% 0 0; --pixel-fold-obsidian-400: 62.68% 0 0; --pixel-fold-obsidian-500: 53.48% 0 0; --pixel-fold-obsidian-600: 47.84% 0 0; --pixel-fold-obsidian-700: 42.76% 0 0; --pixel-fold-obsidian-800: 39.04% 0 0; --pixel-fold-obsidian-900: 36% 0 0; --pixel-fold-obsidian-950: 22.64% 0 0; } } @layer colors.pixel-tablet-porcelain { :where(html) { --pixel-tablet-porcelain-50: 97.41% 0.003 67.78; --pixel-tablet-porcelain-100: 93.95% 0.009 67.72; --pixel-tablet-porcelain-200: 87.52% 0.018 67.6; --pixel-tablet-porcelain-300: 79.05% 0.029 62.21; --pixel-tablet-porcelain-400: 69.38% 0.041 53.07; --pixel-tablet-porcelain-500: 62.61% 0.053 49.17; --pixel-tablet-porcelain-600: 57.6% 0.053 41.13; --pixel-tablet-porcelain-700: 50.39% 0.048 37.03; --pixel-tablet-porcelain-800: 44.24% 0.037 33.3; --pixel-tablet-porcelain-900: 38.9% 0.031 33.72; --pixel-tablet-porcelain-950: 25.73% 0.019 29.3; } } @layer colors.pixel-tablet-hazel { :where(html) { --pixel-tablet-hazel-50: 97.21% 0.002 145.56; --pixel-tablet-hazel-100: 92.69% 0.002 145.56; --pixel-tablet-hazel-200: 85.96% 0.002 145.56; --pixel-tablet-hazel-300: 75.82% 0.004 145.54; --pixel-tablet-hazel-400: 64.11% 0.004 145.53; --pixel-tablet-hazel-500: 53.58% 0.004 145.52; --pixel-tablet-hazel-600: 47.95% 0.004 145.51; --pixel-tablet-hazel-700: 42.91% 0.003 164.96; --pixel-tablet-hazel-800: 39.04% 0 0; --pixel-tablet-hazel-900: 35.87% 0.002 145.53; --pixel-tablet-hazel-950: 26.86% 0 0; } } @layer colors.pixel-tablet-rose { :where(html) { --pixel-tablet-rose-50: 97.82% 0.003 39.48; --pixel-tablet-rose-100: 95.32% 0.007 39.46; --pixel-tablet-rose-200: 91.71% 0.014 46.22; --pixel-tablet-rose-300: 83.31% 0.028 43.62; --pixel-tablet-rose-400: 76.65% 0.038 43.76; --pixel-tablet-rose-500: 67.83% 0.051 42.6; --pixel-tablet-rose-600: 59.79% 0.056 42.79; --pixel-tablet-rose-700: 52.14% 0.051 42.77; --pixel-tablet-rose-800: 46.46% 0.042 44.27; --pixel-tablet-rose-900: 42.11% 0.032 44.36; --pixel-tablet-rose-950: 27.37% 0.023 45.99; } } @layer colors.pixel-buds-clearly-white { :where(html) { --pixel-buds-clearly-white-50: 100% 0 0; --pixel-buds-clearly-white-100: 95.21% 0 0; --pixel-buds-clearly-white-200: 89.45% 0 0; --pixel-buds-clearly-white-300: 79.84% 0 0; --pixel-buds-clearly-white-400: 67.97% 0 0; --pixel-buds-clearly-white-500: 58.63% 0 0; --pixel-buds-clearly-white-600: 50.68% 0 0; --pixel-buds-clearly-white-700: 43.86% 0 0; --pixel-buds-clearly-white-800: 39.42% 0 0; --pixel-buds-clearly-white-900: 36% 0 0; --pixel-buds-clearly-white-950: 28.09% 0 0; } } @layer colors.pixel-buds-orange { :where(html) { --pixel-buds-orange-50: 97.63% 0.011 39.44; --pixel-buds-orange-100: 94.7% 0.025 35.71; --pixel-buds-orange-200: 90.49% 0.049 35.45; --pixel-buds-orange-300: 84.09% 0.084 36.21; --pixel-buds-orange-400: 75.39% 0.136 36.18; --pixel-buds-orange-500: 71.32% 0.151 36.25; --pixel-buds-orange-600: 61.18% 0.186 35.62; --pixel-buds-orange-700: 53.56% 0.165 35.65; --pixel-buds-orange-800: 47.14% 0.138 35.8; --pixel-buds-orange-900: 42.2% 0.112 36.09; --pixel-buds-orange-950: 27.49% 0.075 36.42; } } @layer colors.pixel-buds-quite-mint { :where(html) { --pixel-buds-quite-mint-50: 97.3% 0.008 168.76; --pixel-buds-quite-mint-100: 93.4% 0.022 163.04; --pixel-buds-quite-mint-200: 85.1% 0.045 167.22; --pixel-buds-quite-mint-300: 77.9% 0.06 169.76; --pixel-buds-quite-mint-400: 67.07% 0.077 170.88; --pixel-buds-quite-mint-500: 57.45% 0.079 171.7; --pixel-buds-quite-mint-600: 48.56% 0.069 172.5; --pixel-buds-quite-mint-700: 41.81% 0.059 173.91; --pixel-buds-quite-mint-800: 35.99% 0.046 175.77; --pixel-buds-quite-mint-900: 31.88% 0.038 176.78; --pixel-buds-quite-mint-950: 22.68% 0.025 182.12; } } @layer colors.pixel-buds-almost-black { :where(html) { --pixel-buds-almost-black-50: 97.04% 0.001 286.38; --pixel-buds-almost-black-100: 92.52% 0.001 286.37; --pixel-buds-almost-black-200: 85.79% 0.001 286.37; --pixel-buds-almost-black-300: 75.2% 0.006 286.26; --pixel-buds-almost-black-400: 62.35% 0.005 271.34; --pixel-buds-almost-black-500: 53.14% 0.005 271.32; --pixel-buds-almost-black-600: 47.26% 0.006 286.15; --pixel-buds-almost-black-700: 42.7% 0.002 247.87; --pixel-buds-almost-black-800: 38.98% 0.002 247.88; --pixel-buds-almost-black-900: 35.65% 0.002 286.31; --pixel-buds-almost-black-950: 23.12% 0.002 286.25; } } @layer colors.pixel-buds-a-sea { :where(html) { --pixel-buds-a-sea-50: 97.45% 0.008 253.85; --pixel-buds-a-sea-100: 93.66% 0.02 243.42; --pixel-buds-a-sea-200: 89.08% 0.036 239.19; --pixel-buds-a-sea-300: 80.23% 0.068 235.96; --pixel-buds-a-sea-400: 70.25% 0.1 235.38; --pixel-buds-a-sea-500: 61.71% 0.114 238.51; --pixel-buds-a-sea-600: 52.96% 0.107 241.85; --pixel-buds-a-sea-700: 45.35% 0.092 243.31; --pixel-buds-a-sea-800: 40.42% 0.075 242.55; --pixel-buds-a-sea-900: 36.25% 0.062 244.04; --pixel-buds-a-sea-950: 27.95% 0.044 243.96; } } @layer colors.pixel-buds-a-dark-olive { :where(html) { --pixel-buds-a-dark-olive-50: 97.54% 0.001 197.14; --pixel-buds-a-dark-olive-100: 91.9% 0.004 157.17; --pixel-buds-a-dark-olive-200: 83.52% 0.01 155.06; --pixel-buds-a-dark-olive-300: 72.5% 0.014 159.78; --pixel-buds-a-dark-olive-400: 65.03% 0.014 164.58; --pixel-buds-a-dark-olive-500: 51.76% 0.014 164.39; --pixel-buds-a-dark-olive-600: 44.02% 0.013 167.27; --pixel-buds-a-dark-olive-700: 38.64% 0.011 160.86; --pixel-buds-a-dark-olive-800: 34.3% 0.008 169.98; --pixel-buds-a-dark-olive-900: 31.38% 0.005 174.16; --pixel-buds-a-dark-olive-950: 21.85% 0.005 173.91; } } @layer colors.pixel-buds-a-clearly-white { :where(html) { --pixel-buds-a-clearly-white-50: 97.84% 0.001 197.14; --pixel-buds-a-clearly-white-100: 95.12% 0.003 247.86; --pixel-buds-a-clearly-white-200: 91.56% 0.006 223.46; --pixel-buds-a-clearly-white-300: 80% 0.015 224.54; --pixel-buds-a-clearly-white-400: 68.71% 0.022 219.8; --pixel-buds-a-clearly-white-500: 59.5% 0.028 219.03; --pixel-buds-a-clearly-white-600: 51.2% 0.024 223.36; --pixel-buds-a-clearly-white-700: 44.34% 0.02 225.6; --pixel-buds-a-clearly-white-800: 39.75% 0.017 226.97; --pixel-buds-a-clearly-white-900: 36.44% 0.013 219.84; --pixel-buds-a-clearly-white-950: 28.04% 0.01 229.28; } } @layer colors.pixel-buds-a-charcoal { :where(html) { --pixel-buds-a-charcoal-50: 97.12% 0.002 325.59; --pixel-buds-a-charcoal-100: 92.6% 0.002 325.59; --pixel-buds-a-charcoal-200: 85.87% 0.002 325.59; --pixel-buds-a-charcoal-300: 75.59% 0.003 345.24; --pixel-buds-a-charcoal-400: 62.58% 0.004 325.62; --pixel-buds-a-charcoal-500: 53.37% 0.004 325.63; --pixel-buds-a-charcoal-600: 47.7% 0.003 345.31; --pixel-buds-a-charcoal-700: 41.78% 0.002 325.61; --pixel-buds-a-charcoal-800: 39.04% 0 0; --pixel-buds-a-charcoal-900: 35.75% 0.002 325.62; --pixel-buds-a-charcoal-950: 26.86% 0 0; } } @layer colors.pixel-buds-pro-bay { :where(html) { --pixel-buds-pro-bay-50: 97.09% 0.012 255.5; --pixel-buds-pro-bay-100: 93.43% 0.029 252.95; --pixel-buds-pro-bay-200: 88.7% 0.052 251.07; --pixel-buds-pro-bay-300: 84.49% 0.073 248.08; --pixel-buds-pro-bay-400: 72.63% 0.128 251.21; --pixel-buds-pro-bay-500: 63.77% 0.168 257.45; --pixel-buds-pro-bay-600: 56.03% 0.194 261.5; --pixel-buds-pro-bay-700: 50.09% 0.196 263.62; --pixel-buds-pro-bay-800: 43.76% 0.163 264.71; --pixel-buds-pro-bay-900: 38.84% 0.124 264.55; --pixel-buds-pro-bay-950: 28.91% 0.079 266.68; } } @layer colors.pixel-buds-pro-porcelain { :where(html) { --pixel-buds-pro-porcelain-50: 95.99% 0.008 73.74; --pixel-buds-pro-porcelain-100: 94.25% 0.013 75.36; --pixel-buds-pro-porcelain-200: 87.89% 0.023 71.76; --pixel-buds-pro-porcelain-300: 79.77% 0.039 68.53; --pixel-buds-pro-porcelain-400: 70.5% 0.054 61.93; --pixel-buds-pro-porcelain-500: 63.69% 0.066 55.83; --pixel-buds-pro-porcelain-600: 58.52% 0.067 48.06; --pixel-buds-pro-porcelain-700: 50.96% 0.059 42.68; --pixel-buds-pro-porcelain-800: 44.49% 0.047 38.07; --pixel-buds-pro-porcelain-900: 39.18% 0.036 39.22; --pixel-buds-pro-porcelain-950: 25.93% 0.023 36.54; } } @layer colors.pixel-buds-pro-coral { :where(html) { --pixel-buds-pro-coral-50: 97.58% 0.009 34.3; --pixel-buds-pro-coral-100: 94.59% 0.023 31.1; --pixel-buds-pro-coral-200: 90.29% 0.044 31.88; --pixel-buds-pro-coral-300: 83.69% 0.076 32.84; --pixel-buds-pro-coral-400: 73.98% 0.128 33.23; --pixel-buds-pro-coral-500: 66.64% 0.16 33.74; --pixel-buds-pro-coral-600: 59.66% 0.174 33.89; --pixel-buds-pro-coral-700: 52.13% 0.154 33.93; --pixel-buds-pro-coral-800: 46.02% 0.129 33.87; --pixel-buds-pro-coral-900: 41.28% 0.103 33.5; --pixel-buds-pro-coral-950: 26.8% 0.071 33.28; } } @layer colors.pixel-buds-pro-charcoal { :where(html) { --pixel-buds-pro-charcoal-50: 97.12% 0.002 325.59; --pixel-buds-pro-charcoal-100: 92.6% 0.002 325.59; --pixel-buds-pro-charcoal-200: 85.87% 0.002 325.59; --pixel-buds-pro-charcoal-300: 75.59% 0.003 345.24; --pixel-buds-pro-charcoal-400: 62.58% 0.004 325.62; --pixel-buds-pro-charcoal-500: 53.37% 0.004 325.63; --pixel-buds-pro-charcoal-600: 47.7% 0.003 345.31; --pixel-buds-pro-charcoal-700: 41.78% 0.002 325.61; --pixel-buds-pro-charcoal-800: 39.04% 0 0; --pixel-buds-pro-charcoal-900: 35.75% 0.002 325.62; --pixel-buds-pro-charcoal-950: 26.86% 0 0; } } @layer colors.pixel-buds-pro-fog { :where(html) { --pixel-buds-pro-fog-50: 97.84% 0.001 197.14; --pixel-buds-pro-fog-100: 95.12% 0.003 247.86; --pixel-buds-pro-fog-200: 91.56% 0.006 223.46; --pixel-buds-pro-fog-300: 80% 0.015 224.54; --pixel-buds-pro-fog-400: 68.71% 0.022 219.8; --pixel-buds-pro-fog-500: 59.5% 0.028 219.03; --pixel-buds-pro-fog-600: 51.2% 0.024 223.36; --pixel-buds-pro-fog-700: 44.34% 0.02 225.6; --pixel-buds-pro-fog-800: 39.75% 0.017 226.97; --pixel-buds-pro-fog-900: 36.44% 0.013 219.84; --pixel-buds-pro-fog-950: 28.04% 0.01 229.28; } } @layer colors.pixel-buds-pro-lemongrass { :where(html) { --pixel-buds-pro-lemongrass-50: 98.28% 0.022 109.53; --pixel-buds-pro-lemongrass-100: 94.8% 0.065 112.28; --pixel-buds-pro-lemongrass-200: 92.66% 0.09 113.48; --pixel-buds-pro-lemongrass-300: 87.5% 0.134 116.2; --pixel-buds-pro-lemongrass-400: 82.03% 0.159 117.24; --pixel-buds-pro-lemongrass-500: 73.35% 0.158 119.3; --pixel-buds-pro-lemongrass-600: 61.91% 0.135 119.94; --pixel-buds-pro-lemongrass-700: 51.08% 0.108 120.52; --pixel-buds-pro-lemongrass-800: 43.65% 0.085 119.67; --pixel-buds-pro-lemongrass-900: 39.16% 0.071 120.78; --pixel-buds-pro-lemongrass-950: 26.5% 0.051 122.16; } } @layer colors.pixel-watch-champagne-gold-case { :where(html) { --pixel-watch-champagne-gold-case-50: 97.56% 0.009 67.73; --pixel-watch-champagne-gold-case-100: 94.13% 0.02 62.86; --pixel-watch-champagne-gold-case-200: 87.57% 0.041 57.7; --pixel-watch-champagne-gold-case-300: 81.6% 0.061 54.4; --pixel-watch-champagne-gold-case-400: 69.68% 0.103 46.81; --pixel-watch-champagne-gold-case-500: 63.09% 0.127 42.74; --pixel-watch-champagne-gold-case-600: 57.61% 0.134 36.79; --pixel-watch-champagne-gold-case-700: 49.89% 0.119 33.34; --pixel-watch-champagne-gold-case-800: 43.41% 0.096 30.92; --pixel-watch-champagne-gold-case-900: 38% 0.077 30.12; --pixel-watch-champagne-gold-case-950: 24.95% 0.05 26.97; } } @layer colors.pixel-watch-matte-black-case { :where(html) { --pixel-watch-matte-black-case-50: 97.31% 0 0; --pixel-watch-matte-black-case-100: 92.8% 0 0; --pixel-watch-matte-black-case-200: 86.07% 0 0; --pixel-watch-matte-black-case-300: 75.72% 0 0; --pixel-watch-matte-black-case-400: 62.68% 0 0; --pixel-watch-matte-black-case-500: 53.48% 0 0; --pixel-watch-matte-black-case-600: 47.84% 0 0; --pixel-watch-matte-black-case-700: 42.76% 0 0; --pixel-watch-matte-black-case-800: 39.04% 0 0; --pixel-watch-matte-black-case-900: 31.71% 0 0; --pixel-watch-matte-black-case-950: 26.86% 0 0; } } @layer colors.pixel-watch-polished-silver-case { :where(html) { --pixel-watch-polished-silver-case-50: 97.61% 0 0; --pixel-watch-polished-silver-case-100: 95.51% 0 0; --pixel-watch-polished-silver-case-200: 91.58% 0 0; --pixel-watch-polished-silver-case-300: 86.07% 0 0; --pixel-watch-polished-silver-case-400: 80.47% 0 0; --pixel-watch-polished-silver-case-500: 73.8% 0 0; --pixel-watch-polished-silver-case-600: 67.31% 0 0; --pixel-watch-polished-silver-case-700: 60.32% 0 0; --pixel-watch-polished-silver-case-800: 52.43% 0 0; --pixel-watch-polished-silver-case-900: 46.04% 0 0; --pixel-watch-polished-silver-case-950: 32.11% 0 0; } } @layer colors.pixel-watch2-polished-silver-aluminum-case { :where(html) { --pixel-watch2-polished-silver-aluminum-case-50: 97.61% 0 0; --pixel-watch2-polished-silver-aluminum-case-100: 94.34% 0.001 286.37; --pixel-watch2-polished-silver-aluminum-case-200: 87.59% 0.003 264.54; --pixel-watch2-polished-silver-aluminum-case-300: 83.18% 0.004 247.87; --pixel-watch2-polished-silver-aluminum-case-400: 74.4% 0.006 264.52; --pixel-watch2-polished-silver-aluminum-case-500: 67.63% 0.008 268.52; --pixel-watch2-polished-silver-aluminum-case-600: 62.03% 0.009 271.27; --pixel-watch2-polished-silver-aluminum-case-700: 57.38% 0.009 278.52; --pixel-watch2-polished-silver-aluminum-case-800: 50.49% 0.008 286.12; --pixel-watch2-polished-silver-aluminum-case-900: 44.24% 0.005 271.3; --pixel-watch2-polished-silver-aluminum-case-950: 32.87% 0.004 264.51; } } @layer colors.pixel-watch2-matte-black-aluminum-case { :where(html) { --pixel-watch2-matte-black-aluminum-case-50: 97.31% 0 0; --pixel-watch2-matte-black-aluminum-case-100: 92.8% 0 0; --pixel-watch2-matte-black-aluminum-case-200: 86.07% 0 0; --pixel-watch2-matte-black-aluminum-case-300: 75.72% 0 0; --pixel-watch2-matte-black-aluminum-case-400: 62.68% 0 0; --pixel-watch2-matte-black-aluminum-case-500: 53.48% 0 0; --pixel-watch2-matte-black-aluminum-case-600: 47.84% 0 0; --pixel-watch2-matte-black-aluminum-case-700: 41.65% 0 0; --pixel-watch2-matte-black-aluminum-case-800: 39.04% 0 0; --pixel-watch2-matte-black-aluminum-case-900: 36% 0 0; --pixel-watch2-matte-black-aluminum-case-950: 26.86% 0 0; } } @layer colors.pixel-watch2-champagne-gold-aluminum-case { :where(html) { --pixel-watch2-champagne-gold-aluminum-case-50: 97.32% 0.007 53.45; --pixel-watch2-champagne-gold-aluminum-case-100: 94.02% 0.017 61.95; --pixel-watch2-champagne-gold-aluminum-case-200: 87.71% 0.035 61.65; --pixel-watch2-champagne-gold-aluminum-case-300: 81.42% 0.051 59.12; --pixel-watch2-champagne-gold-aluminum-case-400: 70.01% 0.082 51.46; --pixel-watch2-champagne-gold-aluminum-case-500: 63.27% 0.101 46.92; --pixel-watch2-champagne-gold-aluminum-case-600: 58.02% 0.107 40.76; --pixel-watch2-champagne-gold-aluminum-case-700: 50.05% 0.094 35.21; --pixel-watch2-champagne-gold-aluminum-case-800: 43.73% 0.076 32.69; --pixel-watch2-champagne-gold-aluminum-case-900: 38.49% 0.061 33.2; --pixel-watch2-champagne-gold-aluminum-case-950: 25.36% 0.039 30.19; } } @layer colors.pixel-watch-hazel-active-band { :where(html) { --pixel-watch-hazel-active-band-50: 97.54% 0.001 197.14; --pixel-watch-hazel-active-band-100: 92.05% 0.006 170.44; --pixel-watch-hazel-active-band-200: 83.58% 0.009 168.7; --pixel-watch-hazel-active-band-300: 72.7% 0.015 169.06; --pixel-watch-hazel-active-band-400: 61.3% 0.019 173.65; --pixel-watch-hazel-active-band-500: 54.49% 0.02 173.5; --pixel-watch-hazel-active-band-600: 44.25% 0.015 177.4; --pixel-watch-hazel-active-band-700: 38.87% 0.013 173.6; --pixel-watch-hazel-active-band-800: 34.47% 0.011 168.1; --pixel-watch-hazel-active-band-900: 31.59% 0.007 182.56; --pixel-watch-hazel-active-band-950: 21.85% 0.005 173.91; } } @layer colors.pixel-watch-obsidian-active-band { :where(html) { --pixel-watch-obsidian-active-band-50: 97.31% 0 0; --pixel-watch-obsidian-active-band-100: 92.8% 0 0; --pixel-watch-obsidian-active-band-200: 86.07% 0 0; --pixel-watch-obsidian-active-band-300: 75.72% 0 0; --pixel-watch-obsidian-active-band-400: 62.68% 0 0; --pixel-watch-obsidian-active-band-500: 53.48% 0 0; --pixel-watch-obsidian-active-band-600: 47.84% 0 0; --pixel-watch-obsidian-active-band-700: 42.76% 0 0; --pixel-watch-obsidian-active-band-800: 39.04% 0 0; --pixel-watch-obsidian-active-band-900: 36% 0 0; --pixel-watch-obsidian-active-band-950: 23.5% 0 0; } } @layer colors.pixel-watch-charcoal-active-band { :where(html) { --pixel-watch-charcoal-active-band-50: 97.12% 0.002 325.59; --pixel-watch-charcoal-active-band-100: 92.6% 0.002 325.59; --pixel-watch-charcoal-active-band-200: 85.87% 0.002 325.59; --pixel-watch-charcoal-active-band-300: 75.59% 0.003 345.24; --pixel-watch-charcoal-active-band-400: 62.58% 0.004 325.62; --pixel-watch-charcoal-active-band-500: 53.37% 0.004 325.63; --pixel-watch-charcoal-active-band-600: 47.7% 0.003 345.31; --pixel-watch-charcoal-active-band-700: 41.78% 0.002 325.61; --pixel-watch-charcoal-active-band-800: 39.04% 0 0; --pixel-watch-charcoal-active-band-900: 35.75% 0.002 325.62; --pixel-watch-charcoal-active-band-950: 26.86% 0 0; } } @layer colors.pixel-watch-chalk-active-band { :where(html) { --pixel-watch-chalk-active-band-50: 97.46% 0.005 67.76; --pixel-watch-chalk-active-band-100: 92.52% 0.013 71.32; --pixel-watch-chalk-active-band-200: 87.63% 0.021 67.55; --pixel-watch-chalk-active-band-300: 79.44% 0.035 65.84; --pixel-watch-chalk-active-band-400: 69.95% 0.05 57.5; --pixel-watch-chalk-active-band-500: 63.23% 0.061 53.31; --pixel-watch-chalk-active-band-600: 58.05% 0.062 44.83; --pixel-watch-chalk-active-band-700: 50.56% 0.056 39.21; --pixel-watch-chalk-active-band-800: 44.3% 0.043 35.48; --pixel-watch-chalk-active-band-900: 39.09% 0.035 37.6; --pixel-watch-chalk-active-band-950: 25.58% 0.022 27.94; } } @layer colors.pixel-watch2-bay-active-band { :where(html) { --pixel-watch2-bay-active-band-50: 97.14% 0.011 256.69; --pixel-watch2-bay-active-band-100: 93.4% 0.023 258.36; --pixel-watch2-bay-active-band-200: 88.58% 0.04 256.59; --pixel-watch2-bay-active-band-300: 78.14% 0.079 254.03; --pixel-watch2-bay-active-band-400: 71.17% 0.103 257.02; --pixel-watch2-bay-active-band-500: 62.55% 0.136 261.38; --pixel-watch2-bay-active-band-600: 55.05% 0.158 264.95; --pixel-watch2-bay-active-band-700: 49.61% 0.159 267.18; --pixel-watch2-bay-active-band-800: 43.63% 0.132 268.72; --pixel-watch2-bay-active-band-900: 38.82% 0.101 268.45; --pixel-watch2-bay-active-band-950: 29.12% 0.063 270.86; } } @layer colors.pixel-watch2-obsidian-active-band { :where(html) { --pixel-watch2-obsidian-active-band-50: 97.31% 0 0; --pixel-watch2-obsidian-active-band-100: 92.8% 0 0; --pixel-watch2-obsidian-active-band-200: 86.07% 0 0; --pixel-watch2-obsidian-active-band-300: 75.72% 0 0; --pixel-watch2-obsidian-active-band-400: 62.68% 0 0; --pixel-watch2-obsidian-active-band-500: 53.48% 0 0; --pixel-watch2-obsidian-active-band-600: 47.84% 0 0; --pixel-watch2-obsidian-active-band-700: 42.76% 0 0; --pixel-watch2-obsidian-active-band-800: 39.04% 0 0; --pixel-watch2-obsidian-active-band-900: 36% 0 0; --pixel-watch2-obsidian-active-band-950: 23.5% 0 0; } } @layer colors.pixel-watch2-hazel-active-band { :where(html) { --pixel-watch2-hazel-active-band-50: 97.54% 0.001 197.14; --pixel-watch2-hazel-active-band-100: 91.9% 0.004 157.17; --pixel-watch2-hazel-active-band-200: 83.55% 0.009 161.31; --pixel-watch2-hazel-active-band-300: 72.53% 0.013 164.65; --pixel-watch2-hazel-active-band-400: 60.97% 0.014 172.06; --pixel-watch2-hazel-active-band-500: 54.73% 0.016 168.8; --pixel-watch2-hazel-active-band-600: 44.02% 0.013 167.27; --pixel-watch2-hazel-active-band-700: 38.67% 0.01 168.22; --pixel-watch2-hazel-active-band-800: 34.3% 0.008 169.98; --pixel-watch2-hazel-active-band-900: 31.51% 0.009 159.59; --pixel-watch2-hazel-active-band-950: 21.85% 0.005 173.91; } } @layer colors.pixel-watch2-porcelain-active-band { :where(html) { --pixel-watch2-porcelain-active-band-50: 97.41% 0.003 67.78; --pixel-watch2-porcelain-active-band-100: 92.47% 0.011 71.89; --pixel-watch2-porcelain-active-band-200: 87.52% 0.018 67.6; --pixel-watch2-porcelain-active-band-300: 79.25% 0.029 65.67; --pixel-watch2-porcelain-active-band-400: 69.65% 0.043 56.06; --pixel-watch2-porcelain-active-band-500: 62.81% 0.052 51.18; --pixel-watch2-porcelain-active-band-600: 57.89% 0.054 43.87; --pixel-watch2-porcelain-active-band-700: 50.8% 0.046 41.48; --pixel-watch2-porcelain-active-band-800: 44.54% 0.038 37.79; --pixel-watch2-porcelain-active-band-900: 39.13% 0.03 37.35; --pixel-watch2-porcelain-active-band-950: 25.98% 0.018 35.75; } } } } @layer themes { /* THEMES ================================ */ @layer themes.light-version-1 { :where(html) { --light-surface-1-color: var(--gray-0-oklch); --light-surface-2-color: var(--gray-1-oklch); --light-surface-3-color: var(--gray-2-oklch); --light-surface-4-color: var(--gray-3-oklch); --light-text-1-color: var(--gray-8-oklch); --light-text-2-color: var(--gray-7-oklch); --light-brand-1-color: var(--orange-6-oklch); --light-surface-shadow-1: var(--gray-8-oklch); --light-shadow-strength: .02; } } @layer themes.light-version-2 { :where(html) { --light-surface-5-color: 92.53% 0.011 225.99; --light-surface-6-color: 99.33% 0.001 197.14; --light-surface-7-color: 94.01% 0.007 233.64; --light-surface-8-color: 88.53% 0.013 228.94; --light-text-3-color: 23.78% 0.05 235; --light-text-4-color: 42.86% 0.043 230.77; --light-brand-2-color: 70.72% 0.1679488624357663 242.04198289887938; --light-surface-shadow-2: 32.35% 0.011 225.42; --light-shadow-strength: .02; } } @layer themes.dark-version-1 { :where(html) { --dark-surface-1-color: var(--gray-12-oklch); --dark-surface-2-color: var(--gray-11-oklch); --dark-surface-3-color: var(--gray-10-oklch); --dark-surface-4-color: var(--gray-9-oklch); --dark-text-1-color: var(--gray-3-oklch); --dark-text-2-color: var(--gray-5-oklch); --dark-brand-1-color: var(--orange-3-oklch); --dark-surface-shadow-1: var(--gray-12-oklch); --dark-shadow-strength: .8; } } @layer themes.dark-version-2 { :where(html) { --dark-surface-5-color: 21.54% 0.006 236.85; --dark-surface-6-color: 27.17% 0.009 219.82; --dark-surface-7-color: 32.19% 0.007 229.03; --dark-surface-8-color: 37.23% 0.006 228.98; --dark-text-3-color: 88.62% 0.01 222.07; --dark-text-4-color: 72.45% 0.008 228.9; --dark-brand-2-color: 47.53% 0.075 234.04; --dark-surface-shadow-2: 13.39% 0.011 219.06; --dark-shadow-strength: .8; } } @layer themes.dim-version-1 { :where(html) { --dim-surface-1-color: var(--gray-8-oklch); --dim-surface-2-color: var(--gray-7-oklch); --dim-surface-3-color: var(--gray-6-oklch); --dim-surface-4-color: var(--gray-5-oklch); --dim-text-1-color: var(--gray-3-oklch); --dim-text-2-color: var(--gray-4-oklch); --dim-brand-1-color: var(--orange-4-oklch); --dim-surface-shadow-1: var(--gray-9-oklch); --dim-shadow-strength: .2; } } @layer themes.dim-version-2 { :where(html) { --dim-surface-5-color: 32.35% 0.011 225.42; --dim-surface-6-color: 37.24% 0.014 226.34; --dim-surface-7-color: 42.01% 0.007 223.58; --dim-surface-8-color: 46.69% 0.009 229.01; --dim-text-3-color: 80.69% 0.017 233.08; --dim-text-4-color: 69.41% 0.017 227.08; --dim-brand-2-color: 57.44% 0.122 238.11; --dim-surface-shadow-2: 25.16% 0.022 232.32; --dim-shadow-strength: .2; } } @layer themes.grape { :where(html) { /* Grape */ --grape-surface-1-color: var(--purple-0-oklch); --grape-surface-2-color: var(--purple-1-oklch); --grape-surface-3-color: var(--purple-2-oklch); --grape-surface-4-color: var(--purple-3-oklch); --grape-text-1-color: var(--purple-9-oklch); --grape-text-2-color: var(--purple-7-oklch); --grape-brand-color: var(--purple-5-oklch); --grape-surface-shadow-1: var(--purple-12-oklch); --grape-shadow-strength: .02; } } @layer themes.choco { :where(html) { /* Choco */ --choco-surface-1-color: var(--choco-12-oklch); --choco-surface-2-color: var(--choco-11-oklch); --choco-surface-3-color: var(--choco-10-oklch); --choco-surface-4-color: var(--choco-9-oklch); --choco-text-1-color: var(--choco-1-oklch); --choco-text-2-color: var(--choco-2-oklch); --choco-brand-color: var(--choco-5-oklch); --choco-surface-shadow-1: 25deg 65% 11%; --choco-shadow-strength: .5; } } /* Light Theme */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --surface-1-color: var(--light-surface-1-color); --surface-2-color: var(--light-surface-2-color); --surface-3-color: var(--light-surface-3-color); --surface-4-color: var(--light-surface-4-color); --surface-5-color: var(--light-surface-5-color); --surface-6-color: var(--light-surface-6-color); --surface-7-color: var(--light-surface-7-color); --surface-8-color: var(--light-surface-8-color); --text-1-color: var(--light-text-1-color); --text-2-color: var(--light-text-2-color); --text-3-color: var(--light-text-3-color); --text-4-color: var(--light-text-4-color); --brand-1-color: var(--light-brand-1-color); --brand-2-color: var(--light-brand-2-color); --surface-shadow-1: var(--light-surface-shadow-1); --surface-shadow-2: var(--light-surface-shadow-2); --surface-shadow-strength: var(--light-shadow-strength); } } /* Dark Theme */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --surface-1-color: var(--dark-surface-1-color); --surface-2-color: var(--dark-surface-2-color); --surface-3-color: var(--dark-surface-3-color); --surface-4-color: var(--dark-surface-4-color); --surface-5-color: var(--dark-surface-5-color); --surface-6-color: var(--dark-surface-6-color); --surface-7-color: var(--dark-surface-7-color); --surface-8-color: var(--dark-surface-8-color); --text-1-color: var(--dark-text-1-color); --text-2-color: var(--dark-text-2-color); --text-3-color: var(--dark-text-3-color); --text-4-color: var(--dark-text-4-color); --brand-1-color: var(--dark-brand-1-color); --brand-2-color: var(--dark-brand-2-color); --surface-shadow-1: var(--dark-surface-shadow-1); --surface-shadow-2: var(--dark-surface-shadow-2); --surface-shadow-strength: var(--dark-shadow-strength); } } [color-scheme=light] { color-scheme: light; --surface-1-color: var(--light-surface-1-color); --surface-2-color: var(--light-surface-2-color); --surface-3-color: var(--light-surface-3-color); --surface-4-color: var(--light-surface-4-color); --surface-5-color: var(--light-surface-5-color); --surface-6-color: var(--light-surface-6-color); --surface-7-color: var(--light-surface-7-color); --surface-8-color: var(--light-surface-8-color); --text-1-color: var(--light-text-1-color); --text-2-color: var(--light-text-2-color); --text-3-color: var(--light-text-3-color); --text-4-color: var(--light-text-4-color); --brand-1-color: var(--light-brand-1-color); --brand-2-color: var(--light-brand-2-color); --surface-shadow-1: var(--light-surface-shadow-1); --surface-shadow-2: var(--light-surface-shadow-2); --surface-shadow-strength: var(--light-shadow-strength); } [color-scheme=dark] { color-scheme: dark; --surface-1-color: var(--dark-surface-1-color); --surface-2-color: var(--dark-surface-2-color); --surface-3-color: var(--dark-surface-3-color); --surface-4-color: var(--dark-surface-4-color); --surface-5-color: var(--dark-surface-5-color); --surface-6-color: var(--dark-surface-6-color); --surface-7-color: var(--dark-surface-7-color); --surface-8-color: var(--dark-surface-8-color); --text-1-color: var(--dark-text-1-color); --text-2-color: var(--dark-text-2-color); --text-3-color: var(--dark-text-3-color); --text-4-color: var(--dark-text-4-color); --brand-1-color: var(--dark-brand-1-color); --brand-2-color: var(--dark-brand-2-color); --surface-shadow-1: var(--dark-surface-shadow-1); --surface-shadow-2: var(--dark-surface-shadow-2); --surface-shadow-strength: var(--dark-shadow-strength); } [color-scheme=dim] { color-scheme: dark; --surface-1-color: var(--dim-surface-1-color); --surface-2-color: var(--dim-surface-2-color); --surface-3-color: var(--dim-surface-3-color); --surface-4-color: var(--dim-surface-4-color); --surface-5-color: var(--dim-surface-5-color); --surface-6-color: var(--dim-surface-6-color); --surface-7-color: var(--dim-surface-7-color); --surface-8-color: var(--dim-surface-8-color); --text-1-color: var(--dim-text-1-color); --text-2-color: var(--dim-text-2-color); --text-3-color: var(--dim-text-3-color); --text-4-color: var(--dim-text-4-color); --brand-1-color: var(--dim-brand-1-color); --brand-2-color: var(--dim-brand-2-color); --surface-shadow-1: var(--dim-surface-shadow-1); --surface-shadow-2: var(--dim-surface-shadow-2); --surface-shadow-strength: var(--dim-shadow-strength); } [color-scheme=grape] { color-scheme: light; --primary-surface-color: var(--grape-surface-1-color); --secondary-surface-color: var(--grape-surface-2-color); --tertiary-surface-color: var(--grape-surface-3-color); --quaternary-surface-color: var(--grape-surface-4-color); --primary-text-color: var(--grape-text-1-color); --secondary-text-color: var(--grape-text-2-color); --brand-color: var(--grape-brand-color); --surface-shadow: var(--grape-surface-shadow-1); --surface-shadow-strength: var(--grape-shadow-strength); } [color-scheme=choco] { color-scheme: light; --primary-surface-color: var(--choco-surface-1-color); --secondary-surface-color: var(--choco-surface-2-color); --tertiary-surface-color: var(--choco-surface-3-color); --quaternary-surface-color: var(--choco-surface-4-color); --primary-text-color: var(--choco-text-1-color); --secondary-text-color: var(--choco-text-2-color); --brand-color: var(--choco-brand-color); --surface-shadow: var(--choco-surface-shadow-1); --surface-shadow-strength: var(--choco-shadow-strength); } } @layer layout { @layer layout.container { :where(html) { /* Default Container Layout Properties */ --container-content-width: 76.875rem; --container-inline-offset: .9375rem; --container-inline-size: calc(var(--container-content-width) + (var(--container-inline-offset) * 2)); } } @layer layout.wrapper { :where(html) { /* Modern Wrapper Layout Properties */ --wrapper-content-inline-size: 80vi; --wrapper-inline-offset: 1.875rem; --wrapper-inline-size: min(var(--wrapper-content-inline-size), 100% - var(--wrapper-inline-offset)); } } @layer layout.grid { :where(html) { --padding-inline: 1em; --content-max-inline-size: 900px; --breakout-max-inline-size: 1200px; --breakout-size: calc((var(--breakout-max-inline-size) - var(--content-max-inline-size)) / 2); --grid-cell: [stack] 1fr / [stack] 1fr; --grid-cell-name: stack; --grid-ram: repeat(auto-fit, minmax(min(0, 100%), 1fr)); --grid-holy-grail: auto 1fr auto / auto 1fr auto; } * { --grid_adapt_mixin-viewport_context: 100vw; --grid_adapt_mixin-container_context: 100%; --grid_adapt_mixin-context: var(--grid_adapt_mixin-viewport_context); --grid_adapt_mixin-break_1: 64em; --above-break_1-columns: 5; --grid_adapt_mixin-break_2: 30em; --above-break_2-columns: 2; --grid_adapt_mixin: repeat(auto-fill, minmax(clamp(clamp(calc(100% / calc(var(--above-break_1-columns) + 1) + 0.1%), calc(calc(var(--grid_adapt_mixin-break_1) - var(--grid_adapt_mixin-context)) * 1e5), calc(100% / calc(var(--above-break_2-columns) + 1) + 0.1%)), calc(calc(var(--grid_adapt_mixin-break_2) - var(--grid_adapt_mixin-context)) * 1e5), 100%), 1fr)); } } @layer layout.spacing { :where(html) { /* SPACING ================================ */ --gap: 1.875rem; --hero-padding-block: clamp(15rem, 15vh, 20rem); --section-padding-block: clamp(5rem, 10vh, 6rem); --site-header-padding-block: 2rem; } } } @layer reset { /* ======================================= */ /* ========== RESET BASE STYLES ========== */ /* ======================================= */ /* Apply border-box model for simpler sizing calculations */ *, *::before, *::after { box-sizing: border-box; } /* Remove default spacing and inherit font from parent */ * { margin: 0; padding: 0; font: inherit; } /* Set full viewport height for body and HTML */ :where(html) { block-size: 100%; } /* Disable text size adjustment & motion settings on html element */ :where(html) { --isLTR: 1; --isRTL: -1; /* improves punctuation in supported browsers */ hanging-punctuation: first last; /* Prevent text size adjustment on mobile devices */ -webkit-text-size-adjust: none; /* Enable smooth scrolling by default */ /* Override smooth scrolling and animations for reduced motion preference */ } :where(html):dir(rtl) { --isLTR: -1; --isRTL: 1; } @media (prefers-reduced-motion: no-preference) { :where(html) { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { :where(html) html:focus-within { scroll-behavior: auto; } :where(html) *, :where(html) *::before, :where(html) *::after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Set minimum viewport height, line height, and text rendering */ :where(body) { min-block-size: 100vh; min-block-size: 100dvh; min-block-size: 100svh; font-size: 0.875rem; line-height: 1.5; text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; } /* ===================================== */ /* ========== LISTS AND LINKS ========== */ /* ===================================== */ /* Remove list styles for ordered, unordered, and menu lists */ :where(ol, ul, menu) { list-style: none; } /* Set cursor pointer for clickable elements */ :where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"])) { cursor: pointer; } /* Set touch behavior for interactive elements */ :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Styles for unstyled anchor elements */ :where(a):where([href]) { color: inherit; text-decoration: none; } :where(a):where(:visited) { -webkit-text-decoration-color: oklch(var(--purple-2)); text-decoration-color: oklch(var(--purple-2)); } :where(a):where(:not(:hover)) { text-decoration: inherit; } :where(a):where(:not([class])) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } :where(table) { border-collapse: collapse; } /* ================================ */ /* ========== TYPOGRAPHY ========== */ /* ================================ */ /* Improved heading in supported browsers */ :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } :where(h1, h2, h3) { line-height: 1.1; } /* improve readability with max-width on paragraphs and lists & prevent orphans in supported browsers */ :where(p) { --p-max-inline-size: 65ch; max-inline-size: var(--p-max-inline-size); text-wrap: pretty; } /* Inherit font styles for form elements */ :where(input, button, textarea, select) { font: inherit; font-size: inherit; letter-spacing: inherit; word-spacing: inherit; } /* ==================================== */ /* ========== MEDIA ELEMENTS ========== */ /* ==================================== */ /* Display all media elements as block-level elements for consistent layout */ :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; } /* Set block size to auto for natural height and width behavior - responsive images/videos */ :where(img, svg, video) { block-size: auto; max-inline-size: 100%; -o-object-fit: cover; object-fit: cover; } /* Inherit fill color from the current text color for seamless integration */ :where(svg) { fill: currentColor; } } @layer base { /* Base Styles - These styles are applied to the entire website ================================ */ html { background-color: oklch(var(--surface-1-color)); color: oklch(var(--text-1-color)); } body { display: grid; grid-template-rows: auto 1fr auto; font-family: var(--font-sans); font-weight: var(--font-weight-400); font-size: var(--font-size-300); line-height: var(--font-lineheight-6); } } @layer helpers { /* HELPER STYLES - These styles provide common utility classes for accessibility and visual adjustments ================================ */ /* Hide content visually while keeping it accessible to assistive technologies */ .visually-hidden { position: absolute; overflow: hidden; margin: -0.0625rem; border: 0; padding: 0; inline-size: 0.0625rem; block-size: 0.0625rem; clip: rect(0 0 0 0); } /* Provides a skip link for keyboard navigation */ .skip-to-content { position: absolute; margin-inline: auto; padding-block: 0.5em; padding-inline: 1em; background-color: oklch(var(--pixel-8-minty-fresh-color)); color: oklch(var(--black-color)); z-index: 999; transform: translateY(-100%); transition: transform 250ms ease-in; } .skip-to-content:is(:focus) { transform: translateY(0); } /* Removes focus outline when using JavaScript focus-visible library */ .js-focus-visible :focus:not(.focus-visible) { outline: none; } /* Disables scrolling for the entire viewport */ .dis-scroll { position: fixed; inset-inline-start: 0; inset-block-start: 0; overflow: hidden; inline-size: 100%; block-size: 100vh; block-size: 100dvh; block-size: 100svh; -ms-scroll-chaining: none; overscroll-behavior: none; } /* Overrides for iOS to prevent scroll issues */ .page--ios .dis-scroll { position: relative; } /* Resets button styles for a clean slate */ .btn-reset { border: none; padding: 0; background-color: transparent; cursor: pointer; } /* Resets list styles for a clean slate */ .list-reset { list-style: none; margin: 0; padding: 0; } /* Resets input styles for a clean slate */ .input-reset { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; border-radius: 0; background-color: var(--color-white); } .input-reset::-webkit-search-decoration, .input-reset::-webkit-search-cancel-button, .input-reset::-webkit-search-results-button, .input-reset::-webkit-search-results-decoration { display: none; } .input-reset::-ms-reveal, .input-reset::-ms-clear { display: none; } .input-reset::-webkit-file-upload-button { visibility: hidden; } .input-reset::-webkit-outer-spin-button, .input-reset::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } @layer utilities { /* Utility Styles - These styles provide common layout and formatting classes ================================ */ .container { margin-inline: auto; padding-inline: var(--container-inline-offset); max-inline-size: var(--container-inline-size); } .wrapper { margin-inline: auto; container-type: inline-size; inline-size: var(--wrapper-inline-size); } .grid { display: grid; } .d-inline-grid { display: inline-grid; } .flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-block { display: block; } .d-inline-block { display: inline-block; } .is-hidden { display: none !important; } .centered { text-align: center; } .swiper-wrapper { box-sizing: inherit; } .flow { --flow-space: 2rem; } .flow > *:where(:not(:first-child)) { -webkit-margin-before: var(--flow-space); margin-block-start: var(--flow-space); } } @layer demo { @layer root { :root { --card-height: 40vi; --card-margin: 4vi; --card-top-offset: 1rem; --outline-width: 0px; --hotpink-color: 72.83% 0.197 351.99; --lime-color: 86.64% 0.2948272403370167 142.49533888780996; --blue-color: 45.2% 0.31321437166460125 264.052020638055; } } @layer typography { .title { -webkit-margin-after: 0.75vi; margin-block-end: 0.75vi; font-weight: var(--font-weight-700); font-size: var(--fluid-font-size-600); color: oklch(var(--gray-0-oklch)); } .description { margin-inline: auto; font-size: var(--fluid-font-size-300); text-align: center; color: oklch(var(--gray-4-oklch)); } } @layer baseLayout { .header { display: grid; block-size: 100svb; padding-block: 5vmax; background-image: url("https://imgur.com/1KIX0ds.jpeg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .header__content { align-self: end; justify-self: center; text-align: center; } .footer { padding-block: 1ex; padding-inline: 3ex; } .footer > small > a { margin-inline: 1ex; font-weight: var(--font-weight-600); color: oklch(var(--brand-2-color)); } } @layer debug { #debug { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; } #debug::after { content: " Show Debug"; -webkit-margin-start: 1.5rem; margin-inline-start: 1.5rem; white-space: nowrap; color: oklch(var(--dim-brand-2-color)); } #debug:checked ~ main { --outline-width: 1px; } } @layer component { .stack-list { display: grid; grid-template-columns: 1fr; container-type: inline-size; grid-template-rows: repeat(var(--numcards), var(--card-height)); gap: var(--card-margin); -webkit-margin-after: var(--card-margin); margin-block-end: var(--card-margin); -webkit-padding-after: calc(var(--numcards) * var(--card-top-offset)); padding-block-end: calc(var(--numcards) * var(--card-top-offset)); outline: calc(var(--outline-width) * 10) solid oklch(var(--hotpink-color)); } .stack-list__item { position: sticky; inset-block-start: 0; -webkit-padding-before: calc(var(--index) * var(--card-top-offset)); padding-block-start: calc(var(--index) * var(--card-top-offset)); outline: var(--outline-width) solid oklch(var(--lime-color)); } .stack-list__item:is(:nth-child(1)) { --index: 1; } .stack-list__item:is(:nth-child(2)) { --index: 2; } .stack-list__item:is(:nth-child(3)) { --index: 3; } .stack-list__item:is(:nth-child(4)) { --index: 4; } .stack-list__item:is(:nth-child(5)) { --index: 5; } .stack-list__item:is(:nth-child(6)) { --index: 6; } @supports (animation-timeline: view()) { .stack-list { --numcards: 6; view-timeline-name: --cards-element-scrolls-in-body; } .stack-list__item { --index0: calc(var(--index) - 1); --reverse-index: calc(var(--numcards) - var(--index0)); --reverse-index0: calc(var(--reverse-index) - 1); } } .card { --_card-light-surface-color: var(--white-color); --_card-dark-surface-color: var(--dark-surface-4-color); --_card-surface-color: var(--_card-light-surface-color); --_card-text-color: var(--text-1-color); --_card-light-shadow-color: var(--black-color); --_card-dark-shadow-color: var(--gray-6-oklch); --_card-shadow-color: var(--_card-light-shadow-color); --_card-radius-size: 1rem; --_card-border-radius: clamp(0px, calc(100vw - 100%) * 1e5, var(--_card-radius-size)); overflow: hidden; display: grid; grid-template-areas: "text img"; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: stretch; background-color: oklch(var(--_card-surface-color)); box-shadow: 0 0.2em 1em oklch(var(--_card-shadow-color)/0.1), 0 1em 2em oklch(var(--_card-shadow-color)/0.1); border-radius: var(--_card-radius-size); outline: var(--outline-width) solid oklch(var(--blue-color)); color: oklch(var(--_card-text-color)); transform-origin: 50% 0%; will-change: transform; } @media (prefers-color-scheme: dark) { .card { --_card-surface-color: var(--_card-dark-surface-color); --_card-shadow-color: var(--_card-dark-shadow-color); } } .card__cover { grid-area: img; overflow: hidden; } .card__content { grid-area: text; width: 80%; place-self: center; text-align: left; display: grid; gap: 1em; place-items: start; } .card__title { font-family: var(--font-serif); font-weight: var(--font-weight-700); font-size: var(--fluid-font-size-500); letter-spacing: var(--font-letterspacing-3); } .card__descr { font-size: var(--fluid-font-size-300); } .card__link { --_link-light-border-color: var(--blue-8-oklch); --_link-dark-border-color: var(--blue-3-oklch); --_link-border-color: var(--_link-light-border-color); --_link-light-text-color: var(--blue-9-oklch); --_link-light--accent-text-color: var(--blue-0-oklch); --_link-dark-text-color: var(--blue-1-oklch); --_link-dark--accent-text-color: var(--black-color); --_link-text-color: var(--_link-light-text-color); --_link-accent-text-color: var(--_link-light--accent-text-color); --_linl-light-fill-color: var(--_link-light-border-color); --_linl-dark-fill-color: var(--blue-3-oklch); --_link-fill-color: var(--_linl-light-fill-color); --_link-ink-shadow: 0 1px 0 oklch(var(--blue-8-oklch)); --_link-border-radius: 5px; display: inline-block; -webkit-margin-before: 4svb; margin-block-start: 4svb; padding-block: 1.5ex; padding-inline: 4ex; background-color: transparent; border: 2px solid oklch(var(--_link-border-color)); border-radius: var(--_link-border-radius); font-weight: var(--font-weight-700); font-size: var(--fluid-font-size-100); color: oklch(var(--_link-text-color)); } @media (prefers-color-scheme: dark) { .card__link { --_link-border-color: var(--_link-dark-border-color); --_link-text-color: var(--_link-dark-text-color); --_link-accent-text-color: var(--_link-dark--accent-text-color); --_link-fill-color: var(--_linl-dark-fill-color); } } @media (prefers-reduced-motion: no-preference) { .card__link { transition: color 250ms ease, background-color 250ms ease, border-color 250ms ease, text-shadow 250ms ease; } } .card__link:is(:focus-visible, :hover) { background-color: oklch(var(--_link-fill-color)); color: oklch(var(--_link-accent-text-color)); } @media (prefers-color-scheme: light) { .card__link:is(:focus-visible, :hover) { text-shadow: var(--_link-ink-shadow); } } @supports (animation-timeline: view()) { .card { --start-range: calc(var(--index0) / var(--numcards) * 100%); --end-range: calc((var(--index)) / var(--numcards) * 100%); -webkit-animation: linear scale forwards; animation: linear scale forwards; animation-timeline: --cards-element-scrolls-in-body; animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); } } } @layer motion { @supports (animation-timeline: view()) { @-webkit-keyframes scale { to { transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); } } @keyframes scale { to { transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index)))); } } } } }