/* Flavor DS — generated by @flavor-ds/tokens. DO NOT EDIT BY HAND. * Theme axes (set on ): * data-hue: brand | brand2 | neutral | red | scarlet | orange | tangerine | yellow | lime | green | teal | cyan | blue | violet | purple | magenta (default: brand — brand themes pair a primary + secondary hue) * data-sat: muted | regular | bold (default: regular) * data-mode: light | dark data-contrast: aa | aaa * data-tonal: (present = the hue's most-saturated step is the page) * data-media: (present = photo background, solid white UI, ignores mode) * data-density: compact | regular | comfy * data-font: flavor | editorial | reading | geometric | expressive * dir: ltr | rtl */ :root, :root[data-mode="light"] { color-scheme: light; --flavor-white: #ffffff; --flavor-black: #0d0d0f; --flavor-neutral-muted-1: #fbfcfc; --flavor-neutral-muted-2: #f6f7f7; --flavor-neutral-muted-3: #ecedee; --flavor-neutral-muted-4: #e0e1e3; --flavor-neutral-muted-5: #d2d4d7; --flavor-neutral-muted-6: #c3c6c9; --flavor-neutral-muted-7: #b2b4b8; --flavor-neutral-muted-8: #9c9fa2; --flavor-neutral-muted-9: #7e8083; --flavor-neutral-muted-10: #6a6c6f; --flavor-neutral-muted-11: #4b4d4f; --flavor-neutral-muted-12: #212223; --flavor-neutral-regular-1: #fbfcfd; --flavor-neutral-regular-2: #f6f7f8; --flavor-neutral-regular-3: #ebedef; --flavor-neutral-regular-4: #dee2e6; --flavor-neutral-regular-5: #d0d5db; --flavor-neutral-regular-6: #c1c6ce; --flavor-neutral-regular-7: #afb5bc; --flavor-neutral-regular-8: #9a9fa6; --flavor-neutral-regular-9: #7b8187; --flavor-neutral-regular-10: #676c73; --flavor-neutral-regular-11: #4a4d52; --flavor-neutral-regular-12: #202224; --flavor-neutral-bold-1: #fafcfe; --flavor-neutral-bold-2: #f5f7f9; --flavor-neutral-bold-3: #eaedf1; --flavor-neutral-bold-4: #dce2e9; --flavor-neutral-bold-5: #cdd5e0; --flavor-neutral-bold-6: #bec7d2; --flavor-neutral-bold-7: #acb5c1; --flavor-neutral-bold-8: #979fab; --flavor-neutral-bold-9: #79818c; --flavor-neutral-bold-10: #656d77; --flavor-neutral-bold-11: #484e55; --flavor-neutral-bold-12: #1f2226; --flavor-red-muted-1: #fffbfa; --flavor-red-muted-2: #fff4f2; --flavor-red-muted-3: #fce8e5; --flavor-red-muted-4: #fed7d2; --flavor-red-muted-5: #fdc4bd; --flavor-red-muted-6: #f2b4ac; --flavor-red-muted-7: #e0a39b; --flavor-red-muted-8: #c98d86; --flavor-red-muted-9: #a86f68; --flavor-red-muted-10: #915c55; --flavor-red-muted-11: #69413c; --flavor-red-muted-12: #2f1c19; --flavor-red-regular-1: #fffbfa; --flavor-red-regular-2: #fff4f2; --flavor-red-regular-3: #ffe6e3; --flavor-red-regular-4: #ffd6d1; --flavor-red-regular-5: #ffc3bc; --flavor-red-regular-6: #ffada3; --flavor-red-regular-7: #ff9085; --flavor-red-regular-8: #f46f64; --flavor-red-regular-9: #d04f47; --flavor-red-regular-10: #b53c35; --flavor-red-regular-11: #852823; --flavor-red-regular-12: #3d110e; --flavor-red-bold-1: #fffbfa; --flavor-red-bold-2: #fff4f2; --flavor-red-bold-3: #ffe6e3; --flavor-red-bold-4: #ffd6d1; --flavor-red-bold-5: #ffc3bc; --flavor-red-bold-6: #ffada3; --flavor-red-bold-7: #ff9085; --flavor-red-bold-8: #ff645a; --flavor-red-bold-9: #f0001b; --flavor-red-bold-10: #cb0015; --flavor-red-bold-11: #94000c; --flavor-red-bold-12: #470003; --flavor-scarlet-muted-1: #fffbf9; --flavor-scarlet-muted-2: #fff4f0; --flavor-scarlet-muted-3: #fae8e2; --flavor-scarlet-muted-4: #fcd9cc; --flavor-scarlet-muted-5: #fbc7b4; --flavor-scarlet-muted-6: #efb7a2; --flavor-scarlet-muted-7: #dda591; --flavor-scarlet-muted-8: #c6907c; --flavor-scarlet-muted-9: #a6725f; --flavor-scarlet-muted-10: #8e5e4c; --flavor-scarlet-muted-11: #674335; --flavor-scarlet-muted-12: #2e1d16; --flavor-scarlet-regular-1: #fffbf9; --flavor-scarlet-regular-2: #fff4f0; --flavor-scarlet-regular-3: #ffe7de; --flavor-scarlet-regular-4: #ffd7c9; --flavor-scarlet-regular-5: #ffc5b0; --flavor-scarlet-regular-6: #ffb092; --flavor-scarlet-regular-7: #ff936b; --flavor-scarlet-regular-8: #ef7749; --flavor-scarlet-regular-9: #cc5727; --flavor-scarlet-regular-10: #b14412; --flavor-scarlet-regular-11: #822e06; --flavor-scarlet-regular-12: #3b1405; --flavor-scarlet-bold-1: #fffbf9; --flavor-scarlet-bold-2: #fff4f0; --flavor-scarlet-bold-3: #ffe7de; --flavor-scarlet-bold-4: #ffd7c9; --flavor-scarlet-bold-5: #ffc5b0; --flavor-scarlet-bold-6: #ffb092; --flavor-scarlet-bold-7: #ff936b; --flavor-scarlet-bold-8: #ff6826; --flavor-scarlet-bold-9: #d64d00; --flavor-scarlet-bold-10: #b54000; --flavor-scarlet-bold-11: #842c00; --flavor-scarlet-bold-12: #3e1000; --flavor-orange-muted-1: #fffbf8; --flavor-orange-muted-2: #fef5ee; --flavor-orange-muted-3: #f8eae0; --flavor-orange-muted-4: #f8dbc8; --flavor-orange-muted-5: #f5caaf; --flavor-orange-muted-6: #e9bb9c; --flavor-orange-muted-7: #d7a98b; --flavor-orange-muted-8: #c09476; --flavor-orange-muted-9: #a07659; --flavor-orange-muted-10: #896247; --flavor-orange-muted-11: #644531; --flavor-orange-muted-12: #2c1e14; --flavor-orange-regular-1: #fffbf8; --flavor-orange-regular-2: #fff5ee; --flavor-orange-regular-3: #ffe8d9; --flavor-orange-regular-4: #ffd9c0; --flavor-orange-regular-5: #ffc7a1; --flavor-orange-regular-6: #ffb27d; --flavor-orange-regular-7: #fc984c; --flavor-orange-regular-8: #e48233; --flavor-orange-regular-9: #c16300; --flavor-orange-regular-10: #a35300; --flavor-orange-regular-11: #773a00; --flavor-orange-regular-12: #371800; --flavor-orange-bold-1: #fffbf8; --flavor-orange-bold-2: #fff5ee; --flavor-orange-bold-3: #ffe8d9; --flavor-orange-bold-4: #ffd9c0; --flavor-orange-bold-5: #ffc7a1; --flavor-orange-bold-6: #ffb27d; --flavor-orange-bold-7: #ff9645; --flavor-orange-bold-8: #ed7b00; --flavor-orange-bold-9: #c16300; --flavor-orange-bold-10: #a35300; --flavor-orange-bold-11: #773a00; --flavor-orange-bold-12: #371800; --flavor-tangerine-muted-1: #fffbf6; --flavor-tangerine-muted-2: #fcf6ed; --flavor-tangerine-muted-3: #f5ebde; --flavor-tangerine-muted-4: #f2dec4; --flavor-tangerine-muted-5: #eccfa8; --flavor-tangerine-muted-6: #e0c095; --flavor-tangerine-muted-7: #ceaf84; --flavor-tangerine-muted-8: #b7996f; --flavor-tangerine-muted-9: #987b52; --flavor-tangerine-muted-10: #826640; --flavor-tangerine-muted-11: #5e492b; --flavor-tangerine-muted-12: #2a2012; --flavor-tangerine-regular-1: #fffbf6; --flavor-tangerine-regular-2: #fff5e8; --flavor-tangerine-regular-3: #ffe9cc; --flavor-tangerine-regular-4: #ffdbaa; --flavor-tangerine-regular-5: #ffca7f; --flavor-tangerine-regular-6: #feb644; --flavor-tangerine-regular-7: #eba42c; --flavor-tangerine-regular-8: #d38f00; --flavor-tangerine-regular-9: #ac7300; --flavor-tangerine-regular-10: #916100; --flavor-tangerine-regular-11: #694500; --flavor-tangerine-regular-12: #301d00; --flavor-tangerine-bold-1: #fffbf6; --flavor-tangerine-bold-2: #fff5e8; --flavor-tangerine-bold-3: #ffe9cc; --flavor-tangerine-bold-4: #ffdbaa; --flavor-tangerine-bold-5: #ffca7f; --flavor-tangerine-bold-6: #ffb63f; --flavor-tangerine-bold-7: #efa300; --flavor-tangerine-bold-8: #d38f00; --flavor-tangerine-bold-9: #ac7300; --flavor-tangerine-bold-10: #916100; --flavor-tangerine-bold-11: #694500; --flavor-tangerine-bold-12: #301d00; --flavor-yellow-muted-1: #fefcf5; --flavor-yellow-muted-2: #f9f7ed; --flavor-yellow-muted-3: #f1eddf; --flavor-yellow-muted-4: #e9e2c5; --flavor-yellow-muted-5: #e0d5a9; --flavor-yellow-muted-6: #d3c696; --flavor-yellow-muted-7: #c1b485; --flavor-yellow-muted-8: #ab9e70; --flavor-yellow-muted-9: #8c8052; --flavor-yellow-muted-10: #776c41; --flavor-yellow-muted-11: #564d2c; --flavor-yellow-muted-12: #262212; --flavor-yellow-regular-1: #fffcf0; --flavor-yellow-regular-2: #fdf7e1; --flavor-yellow-regular-3: #f6edcd; --flavor-yellow-regular-4: #f3e19f; --flavor-yellow-regular-5: #efd368; --flavor-yellow-regular-6: #e3c446; --flavor-yellow-regular-7: #d1b22e; --flavor-yellow-regular-8: #bb9c00; --flavor-yellow-regular-9: #977e00; --flavor-yellow-regular-10: #806a00; --flavor-yellow-regular-11: #5c4c00; --flavor-yellow-regular-12: #292100; --flavor-yellow-bold-1: #fffcf0; --flavor-yellow-bold-2: #fff7d9; --flavor-yellow-bold-3: #fbedb8; --flavor-yellow-bold-4: #fee06c; --flavor-yellow-bold-5: #f9d100; --flavor-yellow-bold-6: #e8c300; --flavor-yellow-bold-7: #d4b200; --flavor-yellow-bold-8: #bb9c00; --flavor-yellow-bold-9: #977e00; --flavor-yellow-bold-10: #806a00; --flavor-yellow-bold-11: #5c4c00; --flavor-yellow-bold-12: #292100; --flavor-lime-muted-1: #fbfdf6; --flavor-lime-muted-2: #f5f8ef; --flavor-lime-muted-3: #eaefe1; --flavor-lime-muted-4: #dde6c9; --flavor-lime-muted-5: #cddbb0; --flavor-lime-muted-6: #becd9e; --flavor-lime-muted-7: #adbb8d; --flavor-lime-muted-8: #97a578; --flavor-lime-muted-9: #79875b; --flavor-lime-muted-10: #667248; --flavor-lime-muted-11: #485232; --flavor-lime-muted-12: #1f2415; --flavor-lime-regular-1: #f9feef; --flavor-lime-regular-2: #f3fae5; --flavor-lime-regular-3: #e8f2d2; --flavor-lime-regular-4: #d7ebaa; --flavor-lime-regular-5: #c6e27e; --flavor-lime-regular-6: #b6d462; --flavor-lime-regular-7: #a5c250; --flavor-lime-regular-8: #90ac37; --flavor-lime-regular-9: #728d02; --flavor-lime-regular-10: #607600; --flavor-lime-regular-11: #445500; --flavor-lime-regular-12: #1d2600; --flavor-lime-bold-1: #f9ffec; --flavor-lime-bold-2: #f1fcda; --flavor-lime-bold-3: #e5f5c1; --flavor-lime-bold-4: #d2f083; --flavor-lime-bold-5: #bee810; --flavor-lime-bold-6: #b1d800; --flavor-lime-bold-7: #a1c500; --flavor-lime-bold-8: #8dae00; --flavor-lime-bold-9: #728d00; --flavor-lime-bold-10: #607600; --flavor-lime-bold-11: #445500; --flavor-lime-bold-12: #1d2600; --flavor-green-muted-1: #f8fef9; --flavor-green-muted-2: #f1f9f2; --flavor-green-muted-3: #e4f1e6; --flavor-green-muted-4: #d0e9d4; --flavor-green-muted-5: #bbdfc1; --flavor-green-muted-6: #a9d2b0; --flavor-green-muted-7: #98c09f; --flavor-green-muted-8: #83aa8a; --flavor-green-muted-9: #658b6c; --flavor-green-muted-10: #527659; --flavor-green-muted-11: #39553f; --flavor-green-muted-12: #18251b; --flavor-green-regular-1: #f5fff6; --flavor-green-regular-2: #eafded; --flavor-green-regular-3: #daf5de; --flavor-green-regular-4: #baf2c4; --flavor-green-regular-5: #95eca8; --flavor-green-regular-6: #7edf94; --flavor-green-regular-7: #6ccd83; --flavor-green-regular-8: #54b66e; --flavor-green-regular-9: #319751; --flavor-green-regular-10: #1b803f; --flavor-green-regular-11: #0d5d2a; --flavor-green-regular-12: #072912; --flavor-green-bold-1: #f5fff6; --flavor-green-bold-2: #e5ffe9; --flavor-green-bold-3: #cefad5; --flavor-green-bold-4: #9dfbb1; --flavor-green-bold-5: #59f889; --flavor-green-bold-6: #15ec71; --flavor-green-bold-7: #00d865; --flavor-green-bold-8: #00be58; --flavor-green-bold-9: #009a46; --flavor-green-bold-10: #00823a; --flavor-green-bold-11: #005e28; --flavor-green-bold-12: #002a0e; --flavor-teal-muted-1: #f6fdfe; --flavor-teal-muted-2: #eff9fa; --flavor-teal-muted-3: #e1f0f1; --flavor-teal-muted-4: #c9e8ea; --flavor-teal-muted-5: #b0dee1; --flavor-teal-muted-6: #9dd1d3; --flavor-teal-muted-7: #8cbfc2; --flavor-teal-muted-8: #76a9ac; --flavor-teal-muted-9: #588a8d; --flavor-teal-muted-10: #467578; --flavor-teal-muted-11: #305456; --flavor-teal-muted-12: #142526; --flavor-teal-regular-1: #f3ffff; --flavor-teal-regular-2: #e5fcfd; --flavor-teal-regular-3: #d2f5f6; --flavor-teal-regular-4: #a8f0f4; --flavor-teal-regular-5: #72eaf0; --flavor-teal-regular-6: #4edde4; --flavor-teal-regular-7: #35cbd2; --flavor-teal-regular-8: #00b4bb; --flavor-teal-regular-9: #009298; --flavor-teal-regular-10: #007b80; --flavor-teal-regular-11: #00585c; --flavor-teal-regular-12: #00282a; --flavor-teal-bold-1: #f3ffff; --flavor-teal-bold-2: #e0feff; --flavor-teal-bold-3: #c0f9fc; --flavor-teal-bold-4: #79f8ff; --flavor-teal-bold-5: #01f1fa; --flavor-teal-bold-6: #00e0e9; --flavor-teal-bold-7: #00cdd5; --flavor-teal-bold-8: #00b4bb; --flavor-teal-bold-9: #009298; --flavor-teal-bold-10: #007b80; --flavor-teal-bold-11: #00585c; --flavor-teal-bold-12: #00282a; --flavor-cyan-muted-1: #f8fdff; --flavor-cyan-muted-2: #eff9fe; --flavor-cyan-muted-3: #e0f0f7; --flavor-cyan-muted-4: #c8e7f5; --flavor-cyan-muted-5: #aedcf2; --flavor-cyan-muted-6: #9bcee6; --flavor-cyan-muted-7: #8abdd4; --flavor-cyan-muted-8: #74a7bd; --flavor-cyan-muted-9: #56889e; --flavor-cyan-muted-10: #447387; --flavor-cyan-muted-11: #2e5262; --flavor-cyan-muted-12: #13242c; --flavor-cyan-regular-1: #f8fdff; --flavor-cyan-regular-2: #edf9ff; --flavor-cyan-regular-3: #d6f2ff; --flavor-cyan-regular-4: #bbe9ff; --flavor-cyan-regular-5: #9ae0ff; --flavor-cyan-regular-6: #6ed4ff; --flavor-cyan-regular-7: #2fc5fa; --flavor-cyan-regular-8: #00aee1; --flavor-cyan-regular-9: #008db7; --flavor-cyan-regular-10: #00779a; --flavor-cyan-regular-11: #005570; --flavor-cyan-regular-12: #002634; --flavor-cyan-bold-1: #f8fdff; --flavor-cyan-bold-2: #edf9ff; --flavor-cyan-bold-3: #d6f2ff; --flavor-cyan-bold-4: #bbe9ff; --flavor-cyan-bold-5: #9ae0ff; --flavor-cyan-bold-6: #6ed4ff; --flavor-cyan-bold-7: #00c5ff; --flavor-cyan-bold-8: #00aee1; --flavor-cyan-bold-9: #008db7; --flavor-cyan-bold-10: #00779a; --flavor-cyan-bold-11: #005570; --flavor-cyan-bold-12: #002634; --flavor-blue-muted-1: #fafcff; --flavor-blue-muted-2: #f2f7ff; --flavor-blue-muted-3: #e4eefb; --flavor-blue-muted-4: #cfe3fd; --flavor-blue-muted-5: #b9d7fe; --flavor-blue-muted-6: #a8c9f3; --flavor-blue-muted-7: #97b7e1; --flavor-blue-muted-8: #81a1ca; --flavor-blue-muted-9: #6482aa; --flavor-blue-muted-10: #516e92; --flavor-blue-muted-11: #394e6b; --flavor-blue-muted-12: #182230; --flavor-blue-regular-1: #fafcff; --flavor-blue-regular-2: #f2f7ff; --flavor-blue-regular-3: #e1eeff; --flavor-blue-regular-4: #cee3ff; --flavor-blue-regular-5: #b8d7ff; --flavor-blue-regular-6: #9fc9ff; --flavor-blue-regular-7: #7fb7ff; --flavor-blue-regular-8: #56a0fc; --flavor-blue-regular-9: #3680da; --flavor-blue-regular-10: #236bbf; --flavor-blue-regular-11: #144d8d; --flavor-blue-regular-12: #092240; --flavor-blue-bold-1: #fafcff; --flavor-blue-bold-2: #f2f7ff; --flavor-blue-bold-3: #e1eeff; --flavor-blue-bold-4: #cee3ff; --flavor-blue-bold-5: #b8d7ff; --flavor-blue-bold-6: #9fc9ff; --flavor-blue-bold-7: #7fb7ff; --flavor-blue-bold-8: #53a0ff; --flavor-blue-bold-9: #007df2; --flavor-blue-bold-10: #0069cd; --flavor-blue-bold-11: #004b96; --flavor-blue-bold-12: #002148; --flavor-violet-muted-1: #fbfbff; --flavor-violet-muted-2: #f5f6ff; --flavor-violet-muted-3: #eaecfc; --flavor-violet-muted-4: #dbdffe; --flavor-violet-muted-5: #cbd0ff; --flavor-violet-muted-6: #bcc1f4; --flavor-violet-muted-7: #abb0e2; --flavor-violet-muted-8: #959acb; --flavor-violet-muted-9: #777cab; --flavor-violet-muted-10: #646793; --flavor-violet-muted-11: #474a6b; --flavor-violet-muted-12: #1f2030; --flavor-violet-regular-1: #fbfbff; --flavor-violet-regular-2: #f5f6ff; --flavor-violet-regular-3: #e9ebff; --flavor-violet-regular-4: #dbdfff; --flavor-violet-regular-5: #cbd0ff; --flavor-violet-regular-6: #bac0ff; --flavor-violet-regular-7: #a5abff; --flavor-violet-regular-8: #8d90ff; --flavor-violet-regular-9: #7071dd; --flavor-violet-regular-10: #5d5dc1; --flavor-violet-regular-11: #42418f; --flavor-violet-regular-12: #1c1c41; --flavor-violet-bold-1: #fbfbff; --flavor-violet-bold-2: #f5f6ff; --flavor-violet-bold-3: #e9ebff; --flavor-violet-bold-4: #dbdfff; --flavor-violet-bold-5: #cbd0ff; --flavor-violet-bold-6: #bac0ff; --flavor-violet-bold-7: #a5abff; --flavor-violet-bold-8: #8d90ff; --flavor-violet-bold-9: #6d64ff; --flavor-violet-bold-10: #5c44f3; --flavor-violet-bold-11: #412eb5; --flavor-violet-bold-12: #1b1553; --flavor-purple-muted-1: #fdfbff; --flavor-purple-muted-2: #f9f4ff; --flavor-purple-muted-3: #f0e9f9; --flavor-purple-muted-4: #e8dafa; --flavor-purple-muted-5: #decaf8; --flavor-purple-muted-6: #d1baed; --flavor-purple-muted-7: #bfa9db; --flavor-purple-muted-8: #a993c4; --flavor-purple-muted-9: #8a75a4; --flavor-purple-muted-10: #75618d; --flavor-purple-muted-11: #544567; --flavor-purple-muted-12: #251e2e; --flavor-purple-regular-1: #fdfbff; --flavor-purple-regular-2: #f9f4ff; --flavor-purple-regular-3: #f2e8ff; --flavor-purple-regular-4: #e9d9ff; --flavor-purple-regular-5: #e0c8ff; --flavor-purple-regular-6: #d6b4ff; --flavor-purple-regular-7: #ca9bff; --flavor-purple-regular-8: #b780f0; --flavor-purple-regular-9: #9862ce; --flavor-purple-regular-10: #824eb4; --flavor-purple-regular-11: #5e3684; --flavor-purple-regular-12: #29173c; --flavor-purple-bold-1: #fdfbff; --flavor-purple-bold-2: #f9f4ff; --flavor-purple-bold-3: #f2e8ff; --flavor-purple-bold-4: #e9d9ff; --flavor-purple-bold-5: #e0c8ff; --flavor-purple-bold-6: #d6b4ff; --flavor-purple-bold-7: #ca9bff; --flavor-purple-bold-8: #bc78ff; --flavor-purple-bold-9: #a63bfa; --flavor-purple-bold-10: #9022dd; --flavor-purple-bold-11: #6911a4; --flavor-purple-bold-12: #2f0a4b; --flavor-magenta-muted-1: #fffafd; --flavor-magenta-muted-2: #fff3f9; --flavor-magenta-muted-3: #f9e7f0; --flavor-magenta-muted-4: #f9d6e8; --flavor-magenta-muted-5: #f6c3df; --flavor-magenta-muted-6: #ebb2d1; --flavor-magenta-muted-7: #d8a1bf; --flavor-magenta-muted-8: #c28ba9; --flavor-magenta-muted-9: #a16e8b; --flavor-magenta-muted-10: #8a5a76; --flavor-magenta-muted-11: #654055; --flavor-magenta-muted-12: #2d1b25; --flavor-magenta-regular-1: #fffafd; --flavor-magenta-regular-2: #fff3f9; --flavor-magenta-regular-3: #ffe4f2; --flavor-magenta-regular-4: #ffd2ea; --flavor-magenta-regular-5: #ffbee1; --flavor-magenta-regular-6: #ffa5d8; --flavor-magenta-regular-7: #fe83cd; --flavor-magenta-regular-8: #e66db6; --flavor-magenta-regular-9: #c34e97; --flavor-magenta-regular-10: #a93b81; --flavor-magenta-regular-11: #7c275d; --flavor-magenta-regular-12: #381129; --flavor-magenta-bold-1: #fffafd; --flavor-magenta-bold-2: #fff3f9; --flavor-magenta-bold-3: #ffe4f2; --flavor-magenta-bold-4: #ffd2ea; --flavor-magenta-bold-5: #ffbee1; --flavor-magenta-bold-6: #ffa5d8; --flavor-magenta-bold-7: #ff83cd; --flavor-magenta-bold-8: #ff48c0; --flavor-magenta-bold-9: #de00a2; --flavor-magenta-bold-10: #bc0089; --flavor-magenta-bold-11: #890063; --flavor-magenta-bold-12: #41002d; } :root[data-mode="dark"] { color-scheme: dark; --flavor-white: #ffffff; --flavor-black: #0d0d0f; --flavor-neutral-muted-1: #0a0a0a; --flavor-neutral-muted-2: #101011; --flavor-neutral-muted-3: #171718; --flavor-neutral-muted-4: #1d1e20; --flavor-neutral-muted-5: #27292b; --flavor-neutral-muted-6: #343638; --flavor-neutral-muted-7: #4b4d50; --flavor-neutral-muted-8: #6a6c6f; --flavor-neutral-muted-9: #96989c; --flavor-neutral-muted-10: #acaeb1; --flavor-neutral-muted-11: #c5c7ca; --flavor-neutral-muted-12: #eaebed; --flavor-neutral-regular-1: #0a0a0b; --flavor-neutral-regular-2: #101112; --flavor-neutral-regular-3: #161719; --flavor-neutral-regular-4: #1c1e21; --flavor-neutral-regular-5: #25292e; --flavor-neutral-regular-6: #31363c; --flavor-neutral-regular-7: #494d54; --flavor-neutral-regular-8: #676c73; --flavor-neutral-regular-9: #9399a0; --flavor-neutral-regular-10: #a9aeb5; --flavor-neutral-regular-11: #c3c8cd; --flavor-neutral-regular-12: #e9ebee; --flavor-neutral-bold-1: #090a0b; --flavor-neutral-bold-2: #0f1112; --flavor-neutral-bold-3: #15171a; --flavor-neutral-bold-4: #1a1e24; --flavor-neutral-bold-5: #232931; --flavor-neutral-bold-6: #2f363f; --flavor-neutral-bold-7: #464e58; --flavor-neutral-bold-8: #656d77; --flavor-neutral-bold-9: #9199a4; --flavor-neutral-bold-10: #a6afba; --flavor-neutral-bold-11: #c1c8d1; --flavor-neutral-bold-12: #e8ebf1; --flavor-red-muted-1: #0e0908; --flavor-red-muted-2: #170e0d; --flavor-red-muted-3: #201312; --flavor-red-muted-4: #301512; --flavor-red-muted-5: #441a16; --flavor-red-muted-6: #552420; --flavor-red-muted-7: #703c37; --flavor-red-muted-8: #925b54; --flavor-red-muted-9: #c28780; --flavor-red-muted-10: #d89d96; --flavor-red-muted-11: #ebbab3; --flavor-red-muted-12: #ffe4e0; --flavor-red-regular-1: #130706; --flavor-red-regular-2: #1d0a08; --flavor-red-regular-3: #2a0d0a; --flavor-red-regular-4: #410002; --flavor-red-regular-5: #540004; --flavor-red-regular-6: #6a0006; --flavor-red-regular-7: #920a11; --flavor-red-regular-8: #b83833; --flavor-red-regular-9: #ed695e; --flavor-red-regular-10: #ff8579; --flavor-red-regular-11: #ffb0a6; --flavor-red-regular-12: #ffe4e0; --flavor-red-bold-1: #170403; --flavor-red-bold-2: #230504; --flavor-red-bold-3: #330202; --flavor-red-bold-4: #410002; --flavor-red-bold-5: #540004; --flavor-red-bold-6: #6a0006; --flavor-red-bold-7: #94000c; --flavor-red-bold-8: #cb0015; --flavor-red-bold-9: #ff544c; --flavor-red-bold-10: #ff8579; --flavor-red-bold-11: #ffb0a6; --flavor-red-bold-12: #ffe4e0; --flavor-scarlet-muted-1: #0e0907; --flavor-scarlet-muted-2: #160e0c; --flavor-scarlet-muted-3: #201410; --flavor-scarlet-muted-4: #2f170d; --flavor-scarlet-muted-5: #431c0d; --flavor-scarlet-muted-6: #532716; --flavor-scarlet-muted-7: #6e3f2d; --flavor-scarlet-muted-8: #905d4b; --flavor-scarlet-muted-9: #bf8a76; --flavor-scarlet-muted-10: #d5a08c; --flavor-scarlet-muted-11: #e8bcac; --flavor-scarlet-muted-12: #fee5dc; --flavor-scarlet-regular-1: #120704; --flavor-scarlet-regular-2: #1c0b06; --flavor-scarlet-regular-3: #290e05; --flavor-scarlet-regular-4: #390e00; --flavor-scarlet-regular-5: #4a1500; --flavor-scarlet-regular-6: #5e1d00; --flavor-scarlet-regular-7: #842c00; --flavor-scarlet-regular-8: #b44106; --flavor-scarlet-regular-9: #e87142; --flavor-scarlet-regular-10: #fe895d; --flavor-scarlet-regular-11: #ffb296; --flavor-scarlet-regular-12: #ffe5db; --flavor-scarlet-bold-1: #160501; --flavor-scarlet-bold-2: #220701; --flavor-scarlet-bold-3: #2d0a00; --flavor-scarlet-bold-4: #390e00; --flavor-scarlet-bold-5: #4a1500; --flavor-scarlet-bold-6: #5e1d00; --flavor-scarlet-bold-7: #842c00; --flavor-scarlet-bold-8: #b54000; --flavor-scarlet-bold-9: #fc5c00; --flavor-scarlet-bold-10: #ff885b; --flavor-scarlet-bold-11: #ffb296; --flavor-scarlet-bold-12: #ffe5db; --flavor-orange-muted-1: #0d0907; --flavor-orange-muted-2: #150f0b; --flavor-orange-muted-3: #1f150e; --flavor-orange-muted-4: #2d190a; --flavor-orange-muted-5: #3f2006; --flavor-orange-muted-6: #4f2b0f; --flavor-orange-muted-7: #694327; --flavor-orange-muted-8: #8a6145; --flavor-orange-muted-9: #b98e70; --flavor-orange-muted-10: #cfa487; --flavor-orange-muted-11: #e3bfa7; --flavor-orange-muted-12: #fbe7da; --flavor-orange-regular-1: #110803; --flavor-orange-regular-2: #1b0d04; --flavor-orange-regular-3: #261102; --flavor-orange-regular-4: #321500; --flavor-orange-regular-5: #421e00; --flavor-orange-regular-6: #542800; --flavor-orange-regular-7: #773a00; --flavor-orange-regular-8: #a45300; --flavor-orange-regular-9: #dd7b2b; --flavor-orange-regular-10: #f3934b; --flavor-orange-regular-11: #ffb481; --flavor-orange-regular-12: #ffe6d5; --flavor-orange-bold-1: #140600; --flavor-orange-bold-2: #1e0a00; --flavor-orange-bold-3: #281000; --flavor-orange-bold-4: #321500; --flavor-orange-bold-5: #421e00; --flavor-orange-bold-6: #542800; --flavor-orange-bold-7: #773a00; --flavor-orange-bold-8: #a45300; --flavor-orange-bold-9: #e47600; --flavor-orange-bold-10: #ff8b26; --flavor-orange-bold-11: #ffb481; --flavor-orange-bold-12: #ffe6d5; --flavor-tangerine-muted-1: #0c0a06; --flavor-tangerine-muted-2: #14100a; --flavor-tangerine-muted-3: #1d160d; --flavor-tangerine-muted-4: #291b06; --flavor-tangerine-muted-5: #3a2400; --flavor-tangerine-muted-6: #492f03; --flavor-tangerine-muted-7: #63471f; --flavor-tangerine-muted-8: #83663e; --flavor-tangerine-muted-9: #b19369; --flavor-tangerine-muted-10: #c6a980; --flavor-tangerine-muted-11: #dcc3a2; --flavor-tangerine-muted-12: #f7e9d7; --flavor-tangerine-regular-1: #0f0902; --flavor-tangerine-regular-2: #180e02; --flavor-tangerine-regular-3: #221400; --flavor-tangerine-regular-4: #2b1a00; --flavor-tangerine-regular-5: #3a2400; --flavor-tangerine-regular-6: #4a2f00; --flavor-tangerine-regular-7: #694500; --flavor-tangerine-regular-8: #916100; --flavor-tangerine-regular-9: #cb8900; --flavor-tangerine-regular-10: #e29f2e; --flavor-tangerine-regular-11: #f4bc6c; --flavor-tangerine-regular-12: #ffe7c8; --flavor-tangerine-bold-1: #110800; --flavor-tangerine-bold-2: #1a0e00; --flavor-tangerine-bold-3: #221400; --flavor-tangerine-bold-4: #2b1a00; --flavor-tangerine-bold-5: #3a2400; --flavor-tangerine-bold-6: #4a2f00; --flavor-tangerine-bold-7: #694500; --flavor-tangerine-bold-8: #916100; --flavor-tangerine-bold-9: #cb8900; --flavor-tangerine-bold-10: #e79d00; --flavor-tangerine-bold-11: #ffb848; --flavor-tangerine-bold-12: #ffe7c8; --flavor-yellow-muted-1: #0b0a06; --flavor-yellow-muted-2: #12100a; --flavor-yellow-muted-3: #1a170d; --flavor-yellow-muted-4: #241e06; --flavor-yellow-muted-5: #322800; --flavor-yellow-muted-6: #403503; --flavor-yellow-muted-7: #584d1f; --flavor-yellow-muted-8: #786c3e; --flavor-yellow-muted-9: #a5986a; --flavor-yellow-muted-10: #baae81; --flavor-yellow-muted-11: #d1c8a2; --flavor-yellow-muted-12: #f1ebd7; --flavor-yellow-regular-1: #0d0a03; --flavor-yellow-regular-2: #141003; --flavor-yellow-regular-3: #1d1700; --flavor-yellow-regular-4: #251d00; --flavor-yellow-regular-5: #322800; --flavor-yellow-regular-6: #403400; --flavor-yellow-regular-7: #5c4c00; --flavor-yellow-regular-8: #806a00; --flavor-yellow-regular-9: #b39600; --flavor-yellow-regular-10: #caac30; --flavor-yellow-regular-11: #dec76d; --flavor-yellow-regular-12: #f8ecbe; --flavor-yellow-bold-1: #0e0a00; --flavor-yellow-bold-2: #151000; --flavor-yellow-bold-3: #1d1700; --flavor-yellow-bold-4: #251d00; --flavor-yellow-bold-5: #322800; --flavor-yellow-bold-6: #403400; --flavor-yellow-bold-7: #5c4c00; --flavor-yellow-bold-8: #806a00; --flavor-yellow-bold-9: #b39600; --flavor-yellow-bold-10: #cdac00; --flavor-yellow-bold-11: #eac500; --flavor-yellow-bold-12: #ffeba1; --flavor-lime-muted-1: #090b07; --flavor-lime-muted-2: #0f110b; --flavor-lime-muted-3: #16190f; --flavor-lime-muted-4: #1b210b; --flavor-lime-muted-5: #242d07; --flavor-lime-muted-6: #303a10; --flavor-lime-muted-7: #475329; --flavor-lime-muted-8: #657247; --flavor-lime-muted-9: #919f72; --flavor-lime-muted-10: #a7b589; --flavor-lime-muted-11: #c1cda9; --flavor-lime-muted-12: #e8eeda; --flavor-lime-regular-1: #090b04; --flavor-lime-regular-2: #0e1205; --flavor-lime-regular-3: #141a03; --flavor-lime-regular-4: #1a2200; --flavor-lime-regular-5: #232e00; --flavor-lime-regular-6: #2f3b00; --flavor-lime-regular-7: #445500; --flavor-lime-regular-8: #607600; --flavor-lime-regular-9: #8aa62f; --flavor-lime-regular-10: #9fbb4f; --flavor-lime-regular-11: #bbd37e; --flavor-lime-regular-12: #e4f2c5; --flavor-lime-bold-1: #080c01; --flavor-lime-bold-2: #0d1300; --flavor-lime-bold-3: #131a00; --flavor-lime-bold-4: #1a2200; --flavor-lime-bold-5: #232e00; --flavor-lime-bold-6: #2f3b00; --flavor-lime-bold-7: #445500; --flavor-lime-bold-8: #607600; --flavor-lime-bold-9: #88a700; --flavor-lime-bold-10: #9bbf00; --flavor-lime-bold-11: #b4d93b; --flavor-lime-bold-12: #e0f6ad; --flavor-green-muted-1: #080b08; --flavor-green-muted-2: #0d120e; --flavor-green-muted-3: #111a13; --flavor-green-muted-4: #102314; --flavor-green-muted-5: #113119; --flavor-green-muted-6: #1a3e23; --flavor-green-muted-7: #33573b; --flavor-green-muted-8: #517658; --flavor-green-muted-9: #7da484; --flavor-green-muted-10: #93b99a; --flavor-green-muted-11: #b2d1b7; --flavor-green-muted-12: #dff1e2; --flavor-green-regular-1: #050c06; --flavor-green-regular-2: #07140a; --flavor-green-regular-3: #071c0c; --flavor-green-regular-4: #00260c; --flavor-green-regular-5: #003312; --flavor-green-regular-6: #00421a; --flavor-green-regular-7: #005e28; --flavor-green-regular-8: #11813c; --flavor-green-regular-9: #4eb068; --flavor-green-regular-10: #69c680; --flavor-green-regular-11: #93dca2; --flavor-green-regular-12: #d0f7d7; --flavor-green-bold-1: #020e04; --flavor-green-bold-2: #011606; --flavor-green-bold-3: #001e08; --flavor-green-bold-4: #00260c; --flavor-green-bold-5: #003312; --flavor-green-bold-6: #00421a; --flavor-green-bold-7: #005e28; --flavor-green-bold-8: #00823a; --flavor-green-bold-9: #00b754; --flavor-green-bold-10: #00d061; --flavor-green-bold-11: #64e688; --flavor-green-bold-12: #befeca; --flavor-teal-muted-1: #070b0b; --flavor-teal-muted-2: #0b1212; --flavor-teal-muted-3: #0e191a; --flavor-teal-muted-4: #082324; --flavor-teal-muted-5: #003032; --flavor-teal-muted-6: #043e40; --flavor-teal-muted-7: #235659; --flavor-teal-muted-8: #447578; --flavor-teal-muted-9: #70a3a5; --flavor-teal-muted-10: #87b8bb; --flavor-teal-muted-11: #a8d0d2; --flavor-teal-muted-12: #dbf0f1; --flavor-teal-regular-1: #030c0d; --flavor-teal-regular-2: #031415; --flavor-teal-regular-3: #001c1d; --flavor-teal-regular-4: #002425; --flavor-teal-regular-5: #003032; --flavor-teal-regular-6: #003e41; --flavor-teal-regular-7: #00585c; --flavor-teal-regular-8: #007b80; --flavor-teal-regular-9: #00adb4; --flavor-teal-regular-10: #37c4cb; --flavor-teal-regular-11: #77dadf; --flavor-teal-regular-12: #c5f6f8; --flavor-teal-bold-1: #000d0e; --flavor-teal-bold-2: #001416; --flavor-teal-bold-3: #001c1d; --flavor-teal-bold-4: #002425; --flavor-teal-bold-5: #003032; --flavor-teal-bold-6: #003e41; --flavor-teal-bold-7: #00585c; --flavor-teal-bold-8: #007b80; --flavor-teal-bold-9: #00adb4; --flavor-teal-bold-10: #00c6ce; --flavor-teal-bold-11: #00e2eb; --flavor-teal-bold-12: #affbff; --flavor-cyan-muted-1: #070b0d; --flavor-cyan-muted-2: #0b1215; --flavor-cyan-muted-3: #0e191e; --flavor-cyan-muted-4: #07212c; --flavor-cyan-muted-5: #002e3e; --flavor-cyan-muted-6: #023b4f; --flavor-cyan-muted-7: #225468; --flavor-cyan-muted-8: #427389; --flavor-cyan-muted-9: #6ea0b7; --flavor-cyan-muted-10: #86b6cc; --flavor-cyan-muted-11: #a7cee1; --flavor-cyan-muted-12: #daeff9; --flavor-cyan-regular-1: #030c11; --flavor-cyan-regular-2: #03131a; --flavor-cyan-regular-3: #001a25; --flavor-cyan-regular-4: #00222f; --flavor-cyan-regular-5: #002e3e; --flavor-cyan-regular-6: #003b4f; --flavor-cyan-regular-7: #005570; --flavor-cyan-regular-8: #00779a; --flavor-cyan-regular-9: #00a7d8; --flavor-cyan-regular-10: #31bef0; --flavor-cyan-regular-11: #74d5ff; --flavor-cyan-regular-12: #d3f1ff; --flavor-cyan-bold-1: #000c13; --flavor-cyan-bold-2: #00131c; --flavor-cyan-bold-3: #001a25; --flavor-cyan-bold-4: #00222f; --flavor-cyan-bold-5: #002e3e; --flavor-cyan-bold-6: #003b4f; --flavor-cyan-bold-7: #005570; --flavor-cyan-bold-8: #00779a; --flavor-cyan-bold-9: #00a7d8; --flavor-cyan-bold-10: #00bff6; --flavor-cyan-bold-11: #74d5ff; --flavor-cyan-bold-12: #d3f1ff; --flavor-blue-muted-1: #080a0e; --flavor-blue-muted-2: #0c1117; --flavor-blue-muted-3: #111821; --flavor-blue-muted-4: #101f31; --flavor-blue-muted-5: #112947; --flavor-blue-muted-6: #1b3658; --flavor-blue-muted-7: #324e73; --flavor-blue-muted-8: #506e94; --flavor-blue-muted-9: #7b9bc3; --flavor-blue-muted-10: #92b1d8; --flavor-blue-muted-11: #b0caeb; --flavor-blue-muted-12: #dfedff; --flavor-blue-regular-1: #050a13; --flavor-blue-regular-2: #07111e; --flavor-blue-regular-3: #07172c; --flavor-blue-regular-4: #001d41; --flavor-blue-regular-5: #002855; --flavor-blue-regular-6: #00346b; --flavor-blue-regular-7: #004b96; --flavor-blue-regular-8: #1e6bc2; --flavor-blue-regular-9: #509af5; --flavor-blue-regular-10: #73b1ff; --flavor-blue-regular-11: #a2caff; --flavor-blue-regular-12: #dfedff; --flavor-blue-bold-1: #020a18; --flavor-blue-bold-2: #021026; --flavor-blue-bold-3: #001635; --flavor-blue-bold-4: #001d41; --flavor-blue-bold-5: #002855; --flavor-blue-bold-6: #00346b; --flavor-blue-bold-7: #004b96; --flavor-blue-bold-8: #0069cd; --flavor-blue-bold-9: #4499ff; --flavor-blue-bold-10: #73b1ff; --flavor-blue-bold-11: #a2caff; --flavor-blue-bold-12: #dfedff; --flavor-violet-muted-1: #090a0e; --flavor-violet-muted-2: #0f1017; --flavor-violet-muted-3: #151621; --flavor-violet-muted-4: #1a1b32; --flavor-violet-muted-5: #232448; --flavor-violet-muted-6: #2f3059; --flavor-violet-muted-7: #454874; --flavor-violet-muted-8: #636795; --flavor-violet-muted-9: #8f94c5; --flavor-violet-muted-10: #a5aada; --flavor-violet-muted-11: #bfc4ec; --flavor-violet-muted-12: #e7eaff; --flavor-violet-regular-1: #080913; --flavor-violet-regular-2: #0e0f1e; --flavor-violet-regular-3: #13142c; --flavor-violet-regular-4: #181349; --flavor-violet-regular-5: #22116c; --flavor-violet-regular-6: #2d1d83; --flavor-violet-regular-7: #413aa0; --flavor-violet-regular-8: #5d5bc5; --flavor-violet-regular-9: #878af8; --flavor-violet-regular-10: #9ea4ff; --flavor-violet-regular-11: #bcc2ff; --flavor-violet-regular-12: #e7eaff; --flavor-violet-bold-1: #080819; --flavor-violet-bold-2: #0d0d26; --flavor-violet-bold-3: #121039; --flavor-violet-bold-4: #1a005e; --flavor-violet-bold-5: #230078; --flavor-violet-bold-6: #2f0096; --flavor-violet-bold-7: #4400d0; --flavor-violet-bold-8: #5c40f8; --flavor-violet-bold-9: #8688ff; --flavor-violet-bold-10: #9ea4ff; --flavor-violet-bold-11: #bcc2ff; --flavor-violet-bold-12: #e7eaff; --flavor-purple-muted-1: #0b090e; --flavor-purple-muted-2: #120f16; --flavor-purple-muted-3: #19151f; --flavor-purple-muted-4: #23182f; --flavor-purple-muted-5: #311f43; --flavor-purple-muted-6: #3e2a54; --flavor-purple-muted-7: #57426e; --flavor-purple-muted-8: #76618f; --flavor-purple-muted-9: #a38dbe; --flavor-purple-muted-10: #b8a3d3; --flavor-purple-muted-11: #d0bee6; --flavor-purple-muted-12: #f0e6fd; --flavor-purple-regular-1: #0c0812; --flavor-purple-regular-2: #140c1c; --flavor-purple-regular-3: #1c1029; --flavor-purple-regular-4: #290b42; --flavor-purple-regular-5: #3a0060; --flavor-purple-regular-6: #4a0677; --flavor-purple-regular-7: #632a93; --flavor-purple-regular-8: #834cb7; --flavor-purple-regular-9: #b07ae9; --flavor-purple-regular-10: #c592fe; --flavor-purple-regular-11: #d7b6ff; --flavor-purple-regular-12: #f1e6ff; --flavor-purple-bold-1: #0e0616; --flavor-purple-bold-2: #160923; --flavor-purple-bold-3: #200933; --flavor-purple-bold-4: #2c004a; --flavor-purple-bold-5: #3a0060; --flavor-purple-bold-6: #4b0079; --flavor-purple-bold-7: #6a00a9; --flavor-purple-bold-8: #9117e1; --flavor-purple-bold-9: #b86dff; --flavor-purple-bold-10: #c691ff; --flavor-purple-bold-11: #d7b6ff; --flavor-purple-bold-12: #f1e6ff; --flavor-magenta-muted-1: #0d080b; --flavor-magenta-muted-2: #160e12; --flavor-magenta-muted-3: #1f131a; --flavor-magenta-muted-4: #2d1523; --flavor-magenta-muted-5: #401931; --flavor-magenta-muted-6: #50233e; --flavor-magenta-muted-7: #6a3b57; --flavor-magenta-muted-8: #8c5976; --flavor-magenta-muted-9: #bb85a3; --flavor-magenta-muted-10: #d19cb9; --flavor-magenta-muted-11: #e5b8d0; --flavor-magenta-muted-12: #fce3f0; --flavor-magenta-regular-1: #11060c; --flavor-magenta-regular-2: #1b0a14; --flavor-magenta-regular-3: #270c1c; --flavor-magenta-regular-4: #3b0028; --flavor-magenta-regular-5: #4d0036; --flavor-magenta-regular-6: #620045; --flavor-magenta-regular-7: #870c62; --flavor-magenta-regular-8: #ab3782; --flavor-magenta-regular-9: #df67b0; --flavor-magenta-regular-10: #f480c5; --flavor-magenta-regular-11: #ffa7d9; --flavor-magenta-regular-12: #ffe2f1; --flavor-magenta-bold-1: #15040e; --flavor-magenta-bold-2: #200516; --flavor-magenta-bold-3: #2e021f; --flavor-magenta-bold-4: #3b0028; --flavor-magenta-bold-5: #4d0036; --flavor-magenta-bold-6: #620045; --flavor-magenta-bold-7: #890063; --flavor-magenta-bold-8: #bc0089; --flavor-magenta-bold-9: #ff2cbd; --flavor-magenta-bold-10: #ff74c9; --flavor-magenta-bold-11: #ffa7d9; --flavor-magenta-bold-12: #ffe2f1; } :root { --flavor-transparent: transparent; --flavorL-neutral-muted-1: #fbfcfc; --flavorL-neutral-muted-2: #f6f7f7; --flavorL-neutral-muted-3: #ecedee; --flavorL-neutral-muted-4: #e0e1e3; --flavorL-neutral-muted-5: #d2d4d7; --flavorL-neutral-muted-6: #c3c6c9; --flavorL-neutral-muted-7: #b2b4b8; --flavorL-neutral-muted-8: #9c9fa2; --flavorL-neutral-muted-9: #7e8083; --flavorL-neutral-muted-10: #6a6c6f; --flavorL-neutral-muted-11: #4b4d4f; --flavorL-neutral-muted-12: #212223; --flavorL-neutral-regular-1: #fbfcfd; --flavorL-neutral-regular-2: #f6f7f8; --flavorL-neutral-regular-3: #ebedef; --flavorL-neutral-regular-4: #dee2e6; --flavorL-neutral-regular-5: #d0d5db; --flavorL-neutral-regular-6: #c1c6ce; --flavorL-neutral-regular-7: #afb5bc; --flavorL-neutral-regular-8: #9a9fa6; --flavorL-neutral-regular-9: #7b8187; --flavorL-neutral-regular-10: #676c73; --flavorL-neutral-regular-11: #4a4d52; --flavorL-neutral-regular-12: #202224; --flavorL-neutral-bold-1: #fafcfe; --flavorL-neutral-bold-2: #f5f7f9; --flavorL-neutral-bold-3: #eaedf1; --flavorL-neutral-bold-4: #dce2e9; --flavorL-neutral-bold-5: #cdd5e0; --flavorL-neutral-bold-6: #bec7d2; --flavorL-neutral-bold-7: #acb5c1; --flavorL-neutral-bold-8: #979fab; --flavorL-neutral-bold-9: #79818c; --flavorL-neutral-bold-10: #656d77; --flavorL-neutral-bold-11: #484e55; --flavorL-neutral-bold-12: #1f2226; --flavorL-red-muted-1: #fffbfa; --flavorL-red-muted-2: #fff4f2; --flavorL-red-muted-3: #fce8e5; --flavorL-red-muted-4: #fed7d2; --flavorL-red-muted-5: #fdc4bd; --flavorL-red-muted-6: #f2b4ac; --flavorL-red-muted-7: #e0a39b; --flavorL-red-muted-8: #c98d86; --flavorL-red-muted-9: #a86f68; --flavorL-red-muted-10: #915c55; --flavorL-red-muted-11: #69413c; --flavorL-red-muted-12: #2f1c19; --flavorL-red-regular-1: #fffbfa; --flavorL-red-regular-2: #fff4f2; --flavorL-red-regular-3: #ffe6e3; --flavorL-red-regular-4: #ffd6d1; --flavorL-red-regular-5: #ffc3bc; --flavorL-red-regular-6: #ffada3; --flavorL-red-regular-7: #ff9085; --flavorL-red-regular-8: #f46f64; --flavorL-red-regular-9: #d04f47; --flavorL-red-regular-10: #b53c35; --flavorL-red-regular-11: #852823; --flavorL-red-regular-12: #3d110e; --flavorL-red-bold-1: #fffbfa; --flavorL-red-bold-2: #fff4f2; --flavorL-red-bold-3: #ffe6e3; --flavorL-red-bold-4: #ffd6d1; --flavorL-red-bold-5: #ffc3bc; --flavorL-red-bold-6: #ffada3; --flavorL-red-bold-7: #ff9085; --flavorL-red-bold-8: #ff645a; --flavorL-red-bold-9: #f0001b; --flavorL-red-bold-10: #cb0015; --flavorL-red-bold-11: #94000c; --flavorL-red-bold-12: #470003; --flavorL-scarlet-muted-1: #fffbf9; --flavorL-scarlet-muted-2: #fff4f0; --flavorL-scarlet-muted-3: #fae8e2; --flavorL-scarlet-muted-4: #fcd9cc; --flavorL-scarlet-muted-5: #fbc7b4; --flavorL-scarlet-muted-6: #efb7a2; --flavorL-scarlet-muted-7: #dda591; --flavorL-scarlet-muted-8: #c6907c; --flavorL-scarlet-muted-9: #a6725f; --flavorL-scarlet-muted-10: #8e5e4c; --flavorL-scarlet-muted-11: #674335; --flavorL-scarlet-muted-12: #2e1d16; --flavorL-scarlet-regular-1: #fffbf9; --flavorL-scarlet-regular-2: #fff4f0; --flavorL-scarlet-regular-3: #ffe7de; --flavorL-scarlet-regular-4: #ffd7c9; --flavorL-scarlet-regular-5: #ffc5b0; --flavorL-scarlet-regular-6: #ffb092; --flavorL-scarlet-regular-7: #ff936b; --flavorL-scarlet-regular-8: #ef7749; --flavorL-scarlet-regular-9: #cc5727; --flavorL-scarlet-regular-10: #b14412; --flavorL-scarlet-regular-11: #822e06; --flavorL-scarlet-regular-12: #3b1405; --flavorL-scarlet-bold-1: #fffbf9; --flavorL-scarlet-bold-2: #fff4f0; --flavorL-scarlet-bold-3: #ffe7de; --flavorL-scarlet-bold-4: #ffd7c9; --flavorL-scarlet-bold-5: #ffc5b0; --flavorL-scarlet-bold-6: #ffb092; --flavorL-scarlet-bold-7: #ff936b; --flavorL-scarlet-bold-8: #ff6826; --flavorL-scarlet-bold-9: #d64d00; --flavorL-scarlet-bold-10: #b54000; --flavorL-scarlet-bold-11: #842c00; --flavorL-scarlet-bold-12: #3e1000; --flavorL-orange-muted-1: #fffbf8; --flavorL-orange-muted-2: #fef5ee; --flavorL-orange-muted-3: #f8eae0; --flavorL-orange-muted-4: #f8dbc8; --flavorL-orange-muted-5: #f5caaf; --flavorL-orange-muted-6: #e9bb9c; --flavorL-orange-muted-7: #d7a98b; --flavorL-orange-muted-8: #c09476; --flavorL-orange-muted-9: #a07659; --flavorL-orange-muted-10: #896247; --flavorL-orange-muted-11: #644531; --flavorL-orange-muted-12: #2c1e14; --flavorL-orange-regular-1: #fffbf8; --flavorL-orange-regular-2: #fff5ee; --flavorL-orange-regular-3: #ffe8d9; --flavorL-orange-regular-4: #ffd9c0; --flavorL-orange-regular-5: #ffc7a1; --flavorL-orange-regular-6: #ffb27d; --flavorL-orange-regular-7: #fc984c; --flavorL-orange-regular-8: #e48233; --flavorL-orange-regular-9: #c16300; --flavorL-orange-regular-10: #a35300; --flavorL-orange-regular-11: #773a00; --flavorL-orange-regular-12: #371800; --flavorL-orange-bold-1: #fffbf8; --flavorL-orange-bold-2: #fff5ee; --flavorL-orange-bold-3: #ffe8d9; --flavorL-orange-bold-4: #ffd9c0; --flavorL-orange-bold-5: #ffc7a1; --flavorL-orange-bold-6: #ffb27d; --flavorL-orange-bold-7: #ff9645; --flavorL-orange-bold-8: #ed7b00; --flavorL-orange-bold-9: #c16300; --flavorL-orange-bold-10: #a35300; --flavorL-orange-bold-11: #773a00; --flavorL-orange-bold-12: #371800; --flavorL-tangerine-muted-1: #fffbf6; --flavorL-tangerine-muted-2: #fcf6ed; --flavorL-tangerine-muted-3: #f5ebde; --flavorL-tangerine-muted-4: #f2dec4; --flavorL-tangerine-muted-5: #eccfa8; --flavorL-tangerine-muted-6: #e0c095; --flavorL-tangerine-muted-7: #ceaf84; --flavorL-tangerine-muted-8: #b7996f; --flavorL-tangerine-muted-9: #987b52; --flavorL-tangerine-muted-10: #826640; --flavorL-tangerine-muted-11: #5e492b; --flavorL-tangerine-muted-12: #2a2012; --flavorL-tangerine-regular-1: #fffbf6; --flavorL-tangerine-regular-2: #fff5e8; --flavorL-tangerine-regular-3: #ffe9cc; --flavorL-tangerine-regular-4: #ffdbaa; --flavorL-tangerine-regular-5: #ffca7f; --flavorL-tangerine-regular-6: #feb644; --flavorL-tangerine-regular-7: #eba42c; --flavorL-tangerine-regular-8: #d38f00; --flavorL-tangerine-regular-9: #ac7300; --flavorL-tangerine-regular-10: #916100; --flavorL-tangerine-regular-11: #694500; --flavorL-tangerine-regular-12: #301d00; --flavorL-tangerine-bold-1: #fffbf6; --flavorL-tangerine-bold-2: #fff5e8; --flavorL-tangerine-bold-3: #ffe9cc; --flavorL-tangerine-bold-4: #ffdbaa; --flavorL-tangerine-bold-5: #ffca7f; --flavorL-tangerine-bold-6: #ffb63f; --flavorL-tangerine-bold-7: #efa300; --flavorL-tangerine-bold-8: #d38f00; --flavorL-tangerine-bold-9: #ac7300; --flavorL-tangerine-bold-10: #916100; --flavorL-tangerine-bold-11: #694500; --flavorL-tangerine-bold-12: #301d00; --flavorL-yellow-muted-1: #fefcf5; --flavorL-yellow-muted-2: #f9f7ed; --flavorL-yellow-muted-3: #f1eddf; --flavorL-yellow-muted-4: #e9e2c5; --flavorL-yellow-muted-5: #e0d5a9; --flavorL-yellow-muted-6: #d3c696; --flavorL-yellow-muted-7: #c1b485; --flavorL-yellow-muted-8: #ab9e70; --flavorL-yellow-muted-9: #8c8052; --flavorL-yellow-muted-10: #776c41; --flavorL-yellow-muted-11: #564d2c; --flavorL-yellow-muted-12: #262212; --flavorL-yellow-regular-1: #fffcf0; --flavorL-yellow-regular-2: #fdf7e1; --flavorL-yellow-regular-3: #f6edcd; --flavorL-yellow-regular-4: #f3e19f; --flavorL-yellow-regular-5: #efd368; --flavorL-yellow-regular-6: #e3c446; --flavorL-yellow-regular-7: #d1b22e; --flavorL-yellow-regular-8: #bb9c00; --flavorL-yellow-regular-9: #977e00; --flavorL-yellow-regular-10: #806a00; --flavorL-yellow-regular-11: #5c4c00; --flavorL-yellow-regular-12: #292100; --flavorL-yellow-bold-1: #fffcf0; --flavorL-yellow-bold-2: #fff7d9; --flavorL-yellow-bold-3: #fbedb8; --flavorL-yellow-bold-4: #fee06c; --flavorL-yellow-bold-5: #f9d100; --flavorL-yellow-bold-6: #e8c300; --flavorL-yellow-bold-7: #d4b200; --flavorL-yellow-bold-8: #bb9c00; --flavorL-yellow-bold-9: #977e00; --flavorL-yellow-bold-10: #806a00; --flavorL-yellow-bold-11: #5c4c00; --flavorL-yellow-bold-12: #292100; --flavorL-lime-muted-1: #fbfdf6; --flavorL-lime-muted-2: #f5f8ef; --flavorL-lime-muted-3: #eaefe1; --flavorL-lime-muted-4: #dde6c9; --flavorL-lime-muted-5: #cddbb0; --flavorL-lime-muted-6: #becd9e; --flavorL-lime-muted-7: #adbb8d; --flavorL-lime-muted-8: #97a578; --flavorL-lime-muted-9: #79875b; --flavorL-lime-muted-10: #667248; --flavorL-lime-muted-11: #485232; --flavorL-lime-muted-12: #1f2415; --flavorL-lime-regular-1: #f9feef; --flavorL-lime-regular-2: #f3fae5; --flavorL-lime-regular-3: #e8f2d2; --flavorL-lime-regular-4: #d7ebaa; --flavorL-lime-regular-5: #c6e27e; --flavorL-lime-regular-6: #b6d462; --flavorL-lime-regular-7: #a5c250; --flavorL-lime-regular-8: #90ac37; --flavorL-lime-regular-9: #728d02; --flavorL-lime-regular-10: #607600; --flavorL-lime-regular-11: #445500; --flavorL-lime-regular-12: #1d2600; --flavorL-lime-bold-1: #f9ffec; --flavorL-lime-bold-2: #f1fcda; --flavorL-lime-bold-3: #e5f5c1; --flavorL-lime-bold-4: #d2f083; --flavorL-lime-bold-5: #bee810; --flavorL-lime-bold-6: #b1d800; --flavorL-lime-bold-7: #a1c500; --flavorL-lime-bold-8: #8dae00; --flavorL-lime-bold-9: #728d00; --flavorL-lime-bold-10: #607600; --flavorL-lime-bold-11: #445500; --flavorL-lime-bold-12: #1d2600; --flavorL-green-muted-1: #f8fef9; --flavorL-green-muted-2: #f1f9f2; --flavorL-green-muted-3: #e4f1e6; --flavorL-green-muted-4: #d0e9d4; --flavorL-green-muted-5: #bbdfc1; --flavorL-green-muted-6: #a9d2b0; --flavorL-green-muted-7: #98c09f; --flavorL-green-muted-8: #83aa8a; --flavorL-green-muted-9: #658b6c; --flavorL-green-muted-10: #527659; --flavorL-green-muted-11: #39553f; --flavorL-green-muted-12: #18251b; --flavorL-green-regular-1: #f5fff6; --flavorL-green-regular-2: #eafded; --flavorL-green-regular-3: #daf5de; --flavorL-green-regular-4: #baf2c4; --flavorL-green-regular-5: #95eca8; --flavorL-green-regular-6: #7edf94; --flavorL-green-regular-7: #6ccd83; --flavorL-green-regular-8: #54b66e; --flavorL-green-regular-9: #319751; --flavorL-green-regular-10: #1b803f; --flavorL-green-regular-11: #0d5d2a; --flavorL-green-regular-12: #072912; --flavorL-green-bold-1: #f5fff6; --flavorL-green-bold-2: #e5ffe9; --flavorL-green-bold-3: #cefad5; --flavorL-green-bold-4: #9dfbb1; --flavorL-green-bold-5: #59f889; --flavorL-green-bold-6: #15ec71; --flavorL-green-bold-7: #00d865; --flavorL-green-bold-8: #00be58; --flavorL-green-bold-9: #009a46; --flavorL-green-bold-10: #00823a; --flavorL-green-bold-11: #005e28; --flavorL-green-bold-12: #002a0e; --flavorL-teal-muted-1: #f6fdfe; --flavorL-teal-muted-2: #eff9fa; --flavorL-teal-muted-3: #e1f0f1; --flavorL-teal-muted-4: #c9e8ea; --flavorL-teal-muted-5: #b0dee1; --flavorL-teal-muted-6: #9dd1d3; --flavorL-teal-muted-7: #8cbfc2; --flavorL-teal-muted-8: #76a9ac; --flavorL-teal-muted-9: #588a8d; --flavorL-teal-muted-10: #467578; --flavorL-teal-muted-11: #305456; --flavorL-teal-muted-12: #142526; --flavorL-teal-regular-1: #f3ffff; --flavorL-teal-regular-2: #e5fcfd; --flavorL-teal-regular-3: #d2f5f6; --flavorL-teal-regular-4: #a8f0f4; --flavorL-teal-regular-5: #72eaf0; --flavorL-teal-regular-6: #4edde4; --flavorL-teal-regular-7: #35cbd2; --flavorL-teal-regular-8: #00b4bb; --flavorL-teal-regular-9: #009298; --flavorL-teal-regular-10: #007b80; --flavorL-teal-regular-11: #00585c; --flavorL-teal-regular-12: #00282a; --flavorL-teal-bold-1: #f3ffff; --flavorL-teal-bold-2: #e0feff; --flavorL-teal-bold-3: #c0f9fc; --flavorL-teal-bold-4: #79f8ff; --flavorL-teal-bold-5: #01f1fa; --flavorL-teal-bold-6: #00e0e9; --flavorL-teal-bold-7: #00cdd5; --flavorL-teal-bold-8: #00b4bb; --flavorL-teal-bold-9: #009298; --flavorL-teal-bold-10: #007b80; --flavorL-teal-bold-11: #00585c; --flavorL-teal-bold-12: #00282a; --flavorL-cyan-muted-1: #f8fdff; --flavorL-cyan-muted-2: #eff9fe; --flavorL-cyan-muted-3: #e0f0f7; --flavorL-cyan-muted-4: #c8e7f5; --flavorL-cyan-muted-5: #aedcf2; --flavorL-cyan-muted-6: #9bcee6; --flavorL-cyan-muted-7: #8abdd4; --flavorL-cyan-muted-8: #74a7bd; --flavorL-cyan-muted-9: #56889e; --flavorL-cyan-muted-10: #447387; --flavorL-cyan-muted-11: #2e5262; --flavorL-cyan-muted-12: #13242c; --flavorL-cyan-regular-1: #f8fdff; --flavorL-cyan-regular-2: #edf9ff; --flavorL-cyan-regular-3: #d6f2ff; --flavorL-cyan-regular-4: #bbe9ff; --flavorL-cyan-regular-5: #9ae0ff; --flavorL-cyan-regular-6: #6ed4ff; --flavorL-cyan-regular-7: #2fc5fa; --flavorL-cyan-regular-8: #00aee1; --flavorL-cyan-regular-9: #008db7; --flavorL-cyan-regular-10: #00779a; --flavorL-cyan-regular-11: #005570; --flavorL-cyan-regular-12: #002634; --flavorL-cyan-bold-1: #f8fdff; --flavorL-cyan-bold-2: #edf9ff; --flavorL-cyan-bold-3: #d6f2ff; --flavorL-cyan-bold-4: #bbe9ff; --flavorL-cyan-bold-5: #9ae0ff; --flavorL-cyan-bold-6: #6ed4ff; --flavorL-cyan-bold-7: #00c5ff; --flavorL-cyan-bold-8: #00aee1; --flavorL-cyan-bold-9: #008db7; --flavorL-cyan-bold-10: #00779a; --flavorL-cyan-bold-11: #005570; --flavorL-cyan-bold-12: #002634; --flavorL-blue-muted-1: #fafcff; --flavorL-blue-muted-2: #f2f7ff; --flavorL-blue-muted-3: #e4eefb; --flavorL-blue-muted-4: #cfe3fd; --flavorL-blue-muted-5: #b9d7fe; --flavorL-blue-muted-6: #a8c9f3; --flavorL-blue-muted-7: #97b7e1; --flavorL-blue-muted-8: #81a1ca; --flavorL-blue-muted-9: #6482aa; --flavorL-blue-muted-10: #516e92; --flavorL-blue-muted-11: #394e6b; --flavorL-blue-muted-12: #182230; --flavorL-blue-regular-1: #fafcff; --flavorL-blue-regular-2: #f2f7ff; --flavorL-blue-regular-3: #e1eeff; --flavorL-blue-regular-4: #cee3ff; --flavorL-blue-regular-5: #b8d7ff; --flavorL-blue-regular-6: #9fc9ff; --flavorL-blue-regular-7: #7fb7ff; --flavorL-blue-regular-8: #56a0fc; --flavorL-blue-regular-9: #3680da; --flavorL-blue-regular-10: #236bbf; --flavorL-blue-regular-11: #144d8d; --flavorL-blue-regular-12: #092240; --flavorL-blue-bold-1: #fafcff; --flavorL-blue-bold-2: #f2f7ff; --flavorL-blue-bold-3: #e1eeff; --flavorL-blue-bold-4: #cee3ff; --flavorL-blue-bold-5: #b8d7ff; --flavorL-blue-bold-6: #9fc9ff; --flavorL-blue-bold-7: #7fb7ff; --flavorL-blue-bold-8: #53a0ff; --flavorL-blue-bold-9: #007df2; --flavorL-blue-bold-10: #0069cd; --flavorL-blue-bold-11: #004b96; --flavorL-blue-bold-12: #002148; --flavorL-violet-muted-1: #fbfbff; --flavorL-violet-muted-2: #f5f6ff; --flavorL-violet-muted-3: #eaecfc; --flavorL-violet-muted-4: #dbdffe; --flavorL-violet-muted-5: #cbd0ff; --flavorL-violet-muted-6: #bcc1f4; --flavorL-violet-muted-7: #abb0e2; --flavorL-violet-muted-8: #959acb; --flavorL-violet-muted-9: #777cab; --flavorL-violet-muted-10: #646793; --flavorL-violet-muted-11: #474a6b; --flavorL-violet-muted-12: #1f2030; --flavorL-violet-regular-1: #fbfbff; --flavorL-violet-regular-2: #f5f6ff; --flavorL-violet-regular-3: #e9ebff; --flavorL-violet-regular-4: #dbdfff; --flavorL-violet-regular-5: #cbd0ff; --flavorL-violet-regular-6: #bac0ff; --flavorL-violet-regular-7: #a5abff; --flavorL-violet-regular-8: #8d90ff; --flavorL-violet-regular-9: #7071dd; --flavorL-violet-regular-10: #5d5dc1; --flavorL-violet-regular-11: #42418f; --flavorL-violet-regular-12: #1c1c41; --flavorL-violet-bold-1: #fbfbff; --flavorL-violet-bold-2: #f5f6ff; --flavorL-violet-bold-3: #e9ebff; --flavorL-violet-bold-4: #dbdfff; --flavorL-violet-bold-5: #cbd0ff; --flavorL-violet-bold-6: #bac0ff; --flavorL-violet-bold-7: #a5abff; --flavorL-violet-bold-8: #8d90ff; --flavorL-violet-bold-9: #6d64ff; --flavorL-violet-bold-10: #5c44f3; --flavorL-violet-bold-11: #412eb5; --flavorL-violet-bold-12: #1b1553; --flavorL-purple-muted-1: #fdfbff; --flavorL-purple-muted-2: #f9f4ff; --flavorL-purple-muted-3: #f0e9f9; --flavorL-purple-muted-4: #e8dafa; --flavorL-purple-muted-5: #decaf8; --flavorL-purple-muted-6: #d1baed; --flavorL-purple-muted-7: #bfa9db; --flavorL-purple-muted-8: #a993c4; --flavorL-purple-muted-9: #8a75a4; --flavorL-purple-muted-10: #75618d; --flavorL-purple-muted-11: #544567; --flavorL-purple-muted-12: #251e2e; --flavorL-purple-regular-1: #fdfbff; --flavorL-purple-regular-2: #f9f4ff; --flavorL-purple-regular-3: #f2e8ff; --flavorL-purple-regular-4: #e9d9ff; --flavorL-purple-regular-5: #e0c8ff; --flavorL-purple-regular-6: #d6b4ff; --flavorL-purple-regular-7: #ca9bff; --flavorL-purple-regular-8: #b780f0; --flavorL-purple-regular-9: #9862ce; --flavorL-purple-regular-10: #824eb4; --flavorL-purple-regular-11: #5e3684; --flavorL-purple-regular-12: #29173c; --flavorL-purple-bold-1: #fdfbff; --flavorL-purple-bold-2: #f9f4ff; --flavorL-purple-bold-3: #f2e8ff; --flavorL-purple-bold-4: #e9d9ff; --flavorL-purple-bold-5: #e0c8ff; --flavorL-purple-bold-6: #d6b4ff; --flavorL-purple-bold-7: #ca9bff; --flavorL-purple-bold-8: #bc78ff; --flavorL-purple-bold-9: #a63bfa; --flavorL-purple-bold-10: #9022dd; --flavorL-purple-bold-11: #6911a4; --flavorL-purple-bold-12: #2f0a4b; --flavorL-magenta-muted-1: #fffafd; --flavorL-magenta-muted-2: #fff3f9; --flavorL-magenta-muted-3: #f9e7f0; --flavorL-magenta-muted-4: #f9d6e8; --flavorL-magenta-muted-5: #f6c3df; --flavorL-magenta-muted-6: #ebb2d1; --flavorL-magenta-muted-7: #d8a1bf; --flavorL-magenta-muted-8: #c28ba9; --flavorL-magenta-muted-9: #a16e8b; --flavorL-magenta-muted-10: #8a5a76; --flavorL-magenta-muted-11: #654055; --flavorL-magenta-muted-12: #2d1b25; --flavorL-magenta-regular-1: #fffafd; --flavorL-magenta-regular-2: #fff3f9; --flavorL-magenta-regular-3: #ffe4f2; --flavorL-magenta-regular-4: #ffd2ea; --flavorL-magenta-regular-5: #ffbee1; --flavorL-magenta-regular-6: #ffa5d8; --flavorL-magenta-regular-7: #fe83cd; --flavorL-magenta-regular-8: #e66db6; --flavorL-magenta-regular-9: #c34e97; --flavorL-magenta-regular-10: #a93b81; --flavorL-magenta-regular-11: #7c275d; --flavorL-magenta-regular-12: #381129; --flavorL-magenta-bold-1: #fffafd; --flavorL-magenta-bold-2: #fff3f9; --flavorL-magenta-bold-3: #ffe4f2; --flavorL-magenta-bold-4: #ffd2ea; --flavorL-magenta-bold-5: #ffbee1; --flavorL-magenta-bold-6: #ffa5d8; --flavorL-magenta-bold-7: #ff83cd; --flavorL-magenta-bold-8: #ff48c0; --flavorL-magenta-bold-9: #de00a2; --flavorL-magenta-bold-10: #bc0089; --flavorL-magenta-bold-11: #890063; --flavorL-magenta-bold-12: #41002d; --flavorD-neutral-muted-1: #0a0a0a; --flavorD-neutral-muted-2: #101011; --flavorD-neutral-muted-3: #171718; --flavorD-neutral-muted-4: #1d1e20; --flavorD-neutral-muted-5: #27292b; --flavorD-neutral-muted-6: #343638; --flavorD-neutral-muted-7: #4b4d50; --flavorD-neutral-muted-8: #6a6c6f; --flavorD-neutral-muted-9: #96989c; --flavorD-neutral-muted-10: #acaeb1; --flavorD-neutral-muted-11: #c5c7ca; --flavorD-neutral-muted-12: #eaebed; --flavorD-neutral-regular-1: #0a0a0b; --flavorD-neutral-regular-2: #101112; --flavorD-neutral-regular-3: #161719; --flavorD-neutral-regular-4: #1c1e21; --flavorD-neutral-regular-5: #25292e; --flavorD-neutral-regular-6: #31363c; --flavorD-neutral-regular-7: #494d54; --flavorD-neutral-regular-8: #676c73; --flavorD-neutral-regular-9: #9399a0; --flavorD-neutral-regular-10: #a9aeb5; --flavorD-neutral-regular-11: #c3c8cd; --flavorD-neutral-regular-12: #e9ebee; --flavorD-neutral-bold-1: #090a0b; --flavorD-neutral-bold-2: #0f1112; --flavorD-neutral-bold-3: #15171a; --flavorD-neutral-bold-4: #1a1e24; --flavorD-neutral-bold-5: #232931; --flavorD-neutral-bold-6: #2f363f; --flavorD-neutral-bold-7: #464e58; --flavorD-neutral-bold-8: #656d77; --flavorD-neutral-bold-9: #9199a4; --flavorD-neutral-bold-10: #a6afba; --flavorD-neutral-bold-11: #c1c8d1; --flavorD-neutral-bold-12: #e8ebf1; --flavorD-red-muted-1: #0e0908; --flavorD-red-muted-2: #170e0d; --flavorD-red-muted-3: #201312; --flavorD-red-muted-4: #301512; --flavorD-red-muted-5: #441a16; --flavorD-red-muted-6: #552420; --flavorD-red-muted-7: #703c37; --flavorD-red-muted-8: #925b54; --flavorD-red-muted-9: #c28780; --flavorD-red-muted-10: #d89d96; --flavorD-red-muted-11: #ebbab3; --flavorD-red-muted-12: #ffe4e0; --flavorD-red-regular-1: #130706; --flavorD-red-regular-2: #1d0a08; --flavorD-red-regular-3: #2a0d0a; --flavorD-red-regular-4: #410002; --flavorD-red-regular-5: #540004; --flavorD-red-regular-6: #6a0006; --flavorD-red-regular-7: #920a11; --flavorD-red-regular-8: #b83833; --flavorD-red-regular-9: #ed695e; --flavorD-red-regular-10: #ff8579; --flavorD-red-regular-11: #ffb0a6; --flavorD-red-regular-12: #ffe4e0; --flavorD-red-bold-1: #170403; --flavorD-red-bold-2: #230504; --flavorD-red-bold-3: #330202; --flavorD-red-bold-4: #410002; --flavorD-red-bold-5: #540004; --flavorD-red-bold-6: #6a0006; --flavorD-red-bold-7: #94000c; --flavorD-red-bold-8: #cb0015; --flavorD-red-bold-9: #ff544c; --flavorD-red-bold-10: #ff8579; --flavorD-red-bold-11: #ffb0a6; --flavorD-red-bold-12: #ffe4e0; --flavorD-scarlet-muted-1: #0e0907; --flavorD-scarlet-muted-2: #160e0c; --flavorD-scarlet-muted-3: #201410; --flavorD-scarlet-muted-4: #2f170d; --flavorD-scarlet-muted-5: #431c0d; --flavorD-scarlet-muted-6: #532716; --flavorD-scarlet-muted-7: #6e3f2d; --flavorD-scarlet-muted-8: #905d4b; --flavorD-scarlet-muted-9: #bf8a76; --flavorD-scarlet-muted-10: #d5a08c; --flavorD-scarlet-muted-11: #e8bcac; --flavorD-scarlet-muted-12: #fee5dc; --flavorD-scarlet-regular-1: #120704; --flavorD-scarlet-regular-2: #1c0b06; --flavorD-scarlet-regular-3: #290e05; --flavorD-scarlet-regular-4: #390e00; --flavorD-scarlet-regular-5: #4a1500; --flavorD-scarlet-regular-6: #5e1d00; --flavorD-scarlet-regular-7: #842c00; --flavorD-scarlet-regular-8: #b44106; --flavorD-scarlet-regular-9: #e87142; --flavorD-scarlet-regular-10: #fe895d; --flavorD-scarlet-regular-11: #ffb296; --flavorD-scarlet-regular-12: #ffe5db; --flavorD-scarlet-bold-1: #160501; --flavorD-scarlet-bold-2: #220701; --flavorD-scarlet-bold-3: #2d0a00; --flavorD-scarlet-bold-4: #390e00; --flavorD-scarlet-bold-5: #4a1500; --flavorD-scarlet-bold-6: #5e1d00; --flavorD-scarlet-bold-7: #842c00; --flavorD-scarlet-bold-8: #b54000; --flavorD-scarlet-bold-9: #fc5c00; --flavorD-scarlet-bold-10: #ff885b; --flavorD-scarlet-bold-11: #ffb296; --flavorD-scarlet-bold-12: #ffe5db; --flavorD-orange-muted-1: #0d0907; --flavorD-orange-muted-2: #150f0b; --flavorD-orange-muted-3: #1f150e; --flavorD-orange-muted-4: #2d190a; --flavorD-orange-muted-5: #3f2006; --flavorD-orange-muted-6: #4f2b0f; --flavorD-orange-muted-7: #694327; --flavorD-orange-muted-8: #8a6145; --flavorD-orange-muted-9: #b98e70; --flavorD-orange-muted-10: #cfa487; --flavorD-orange-muted-11: #e3bfa7; --flavorD-orange-muted-12: #fbe7da; --flavorD-orange-regular-1: #110803; --flavorD-orange-regular-2: #1b0d04; --flavorD-orange-regular-3: #261102; --flavorD-orange-regular-4: #321500; --flavorD-orange-regular-5: #421e00; --flavorD-orange-regular-6: #542800; --flavorD-orange-regular-7: #773a00; --flavorD-orange-regular-8: #a45300; --flavorD-orange-regular-9: #dd7b2b; --flavorD-orange-regular-10: #f3934b; --flavorD-orange-regular-11: #ffb481; --flavorD-orange-regular-12: #ffe6d5; --flavorD-orange-bold-1: #140600; --flavorD-orange-bold-2: #1e0a00; --flavorD-orange-bold-3: #281000; --flavorD-orange-bold-4: #321500; --flavorD-orange-bold-5: #421e00; --flavorD-orange-bold-6: #542800; --flavorD-orange-bold-7: #773a00; --flavorD-orange-bold-8: #a45300; --flavorD-orange-bold-9: #e47600; --flavorD-orange-bold-10: #ff8b26; --flavorD-orange-bold-11: #ffb481; --flavorD-orange-bold-12: #ffe6d5; --flavorD-tangerine-muted-1: #0c0a06; --flavorD-tangerine-muted-2: #14100a; --flavorD-tangerine-muted-3: #1d160d; --flavorD-tangerine-muted-4: #291b06; --flavorD-tangerine-muted-5: #3a2400; --flavorD-tangerine-muted-6: #492f03; --flavorD-tangerine-muted-7: #63471f; --flavorD-tangerine-muted-8: #83663e; --flavorD-tangerine-muted-9: #b19369; --flavorD-tangerine-muted-10: #c6a980; --flavorD-tangerine-muted-11: #dcc3a2; --flavorD-tangerine-muted-12: #f7e9d7; --flavorD-tangerine-regular-1: #0f0902; --flavorD-tangerine-regular-2: #180e02; --flavorD-tangerine-regular-3: #221400; --flavorD-tangerine-regular-4: #2b1a00; --flavorD-tangerine-regular-5: #3a2400; --flavorD-tangerine-regular-6: #4a2f00; --flavorD-tangerine-regular-7: #694500; --flavorD-tangerine-regular-8: #916100; --flavorD-tangerine-regular-9: #cb8900; --flavorD-tangerine-regular-10: #e29f2e; --flavorD-tangerine-regular-11: #f4bc6c; --flavorD-tangerine-regular-12: #ffe7c8; --flavorD-tangerine-bold-1: #110800; --flavorD-tangerine-bold-2: #1a0e00; --flavorD-tangerine-bold-3: #221400; --flavorD-tangerine-bold-4: #2b1a00; --flavorD-tangerine-bold-5: #3a2400; --flavorD-tangerine-bold-6: #4a2f00; --flavorD-tangerine-bold-7: #694500; --flavorD-tangerine-bold-8: #916100; --flavorD-tangerine-bold-9: #cb8900; --flavorD-tangerine-bold-10: #e79d00; --flavorD-tangerine-bold-11: #ffb848; --flavorD-tangerine-bold-12: #ffe7c8; --flavorD-yellow-muted-1: #0b0a06; --flavorD-yellow-muted-2: #12100a; --flavorD-yellow-muted-3: #1a170d; --flavorD-yellow-muted-4: #241e06; --flavorD-yellow-muted-5: #322800; --flavorD-yellow-muted-6: #403503; --flavorD-yellow-muted-7: #584d1f; --flavorD-yellow-muted-8: #786c3e; --flavorD-yellow-muted-9: #a5986a; --flavorD-yellow-muted-10: #baae81; --flavorD-yellow-muted-11: #d1c8a2; --flavorD-yellow-muted-12: #f1ebd7; --flavorD-yellow-regular-1: #0d0a03; --flavorD-yellow-regular-2: #141003; --flavorD-yellow-regular-3: #1d1700; --flavorD-yellow-regular-4: #251d00; --flavorD-yellow-regular-5: #322800; --flavorD-yellow-regular-6: #403400; --flavorD-yellow-regular-7: #5c4c00; --flavorD-yellow-regular-8: #806a00; --flavorD-yellow-regular-9: #b39600; --flavorD-yellow-regular-10: #caac30; --flavorD-yellow-regular-11: #dec76d; --flavorD-yellow-regular-12: #f8ecbe; --flavorD-yellow-bold-1: #0e0a00; --flavorD-yellow-bold-2: #151000; --flavorD-yellow-bold-3: #1d1700; --flavorD-yellow-bold-4: #251d00; --flavorD-yellow-bold-5: #322800; --flavorD-yellow-bold-6: #403400; --flavorD-yellow-bold-7: #5c4c00; --flavorD-yellow-bold-8: #806a00; --flavorD-yellow-bold-9: #b39600; --flavorD-yellow-bold-10: #cdac00; --flavorD-yellow-bold-11: #eac500; --flavorD-yellow-bold-12: #ffeba1; --flavorD-lime-muted-1: #090b07; --flavorD-lime-muted-2: #0f110b; --flavorD-lime-muted-3: #16190f; --flavorD-lime-muted-4: #1b210b; --flavorD-lime-muted-5: #242d07; --flavorD-lime-muted-6: #303a10; --flavorD-lime-muted-7: #475329; --flavorD-lime-muted-8: #657247; --flavorD-lime-muted-9: #919f72; --flavorD-lime-muted-10: #a7b589; --flavorD-lime-muted-11: #c1cda9; --flavorD-lime-muted-12: #e8eeda; --flavorD-lime-regular-1: #090b04; --flavorD-lime-regular-2: #0e1205; --flavorD-lime-regular-3: #141a03; --flavorD-lime-regular-4: #1a2200; --flavorD-lime-regular-5: #232e00; --flavorD-lime-regular-6: #2f3b00; --flavorD-lime-regular-7: #445500; --flavorD-lime-regular-8: #607600; --flavorD-lime-regular-9: #8aa62f; --flavorD-lime-regular-10: #9fbb4f; --flavorD-lime-regular-11: #bbd37e; --flavorD-lime-regular-12: #e4f2c5; --flavorD-lime-bold-1: #080c01; --flavorD-lime-bold-2: #0d1300; --flavorD-lime-bold-3: #131a00; --flavorD-lime-bold-4: #1a2200; --flavorD-lime-bold-5: #232e00; --flavorD-lime-bold-6: #2f3b00; --flavorD-lime-bold-7: #445500; --flavorD-lime-bold-8: #607600; --flavorD-lime-bold-9: #88a700; --flavorD-lime-bold-10: #9bbf00; --flavorD-lime-bold-11: #b4d93b; --flavorD-lime-bold-12: #e0f6ad; --flavorD-green-muted-1: #080b08; --flavorD-green-muted-2: #0d120e; --flavorD-green-muted-3: #111a13; --flavorD-green-muted-4: #102314; --flavorD-green-muted-5: #113119; --flavorD-green-muted-6: #1a3e23; --flavorD-green-muted-7: #33573b; --flavorD-green-muted-8: #517658; --flavorD-green-muted-9: #7da484; --flavorD-green-muted-10: #93b99a; --flavorD-green-muted-11: #b2d1b7; --flavorD-green-muted-12: #dff1e2; --flavorD-green-regular-1: #050c06; --flavorD-green-regular-2: #07140a; --flavorD-green-regular-3: #071c0c; --flavorD-green-regular-4: #00260c; --flavorD-green-regular-5: #003312; --flavorD-green-regular-6: #00421a; --flavorD-green-regular-7: #005e28; --flavorD-green-regular-8: #11813c; --flavorD-green-regular-9: #4eb068; --flavorD-green-regular-10: #69c680; --flavorD-green-regular-11: #93dca2; --flavorD-green-regular-12: #d0f7d7; --flavorD-green-bold-1: #020e04; --flavorD-green-bold-2: #011606; --flavorD-green-bold-3: #001e08; --flavorD-green-bold-4: #00260c; --flavorD-green-bold-5: #003312; --flavorD-green-bold-6: #00421a; --flavorD-green-bold-7: #005e28; --flavorD-green-bold-8: #00823a; --flavorD-green-bold-9: #00b754; --flavorD-green-bold-10: #00d061; --flavorD-green-bold-11: #64e688; --flavorD-green-bold-12: #befeca; --flavorD-teal-muted-1: #070b0b; --flavorD-teal-muted-2: #0b1212; --flavorD-teal-muted-3: #0e191a; --flavorD-teal-muted-4: #082324; --flavorD-teal-muted-5: #003032; --flavorD-teal-muted-6: #043e40; --flavorD-teal-muted-7: #235659; --flavorD-teal-muted-8: #447578; --flavorD-teal-muted-9: #70a3a5; --flavorD-teal-muted-10: #87b8bb; --flavorD-teal-muted-11: #a8d0d2; --flavorD-teal-muted-12: #dbf0f1; --flavorD-teal-regular-1: #030c0d; --flavorD-teal-regular-2: #031415; --flavorD-teal-regular-3: #001c1d; --flavorD-teal-regular-4: #002425; --flavorD-teal-regular-5: #003032; --flavorD-teal-regular-6: #003e41; --flavorD-teal-regular-7: #00585c; --flavorD-teal-regular-8: #007b80; --flavorD-teal-regular-9: #00adb4; --flavorD-teal-regular-10: #37c4cb; --flavorD-teal-regular-11: #77dadf; --flavorD-teal-regular-12: #c5f6f8; --flavorD-teal-bold-1: #000d0e; --flavorD-teal-bold-2: #001416; --flavorD-teal-bold-3: #001c1d; --flavorD-teal-bold-4: #002425; --flavorD-teal-bold-5: #003032; --flavorD-teal-bold-6: #003e41; --flavorD-teal-bold-7: #00585c; --flavorD-teal-bold-8: #007b80; --flavorD-teal-bold-9: #00adb4; --flavorD-teal-bold-10: #00c6ce; --flavorD-teal-bold-11: #00e2eb; --flavorD-teal-bold-12: #affbff; --flavorD-cyan-muted-1: #070b0d; --flavorD-cyan-muted-2: #0b1215; --flavorD-cyan-muted-3: #0e191e; --flavorD-cyan-muted-4: #07212c; --flavorD-cyan-muted-5: #002e3e; --flavorD-cyan-muted-6: #023b4f; --flavorD-cyan-muted-7: #225468; --flavorD-cyan-muted-8: #427389; --flavorD-cyan-muted-9: #6ea0b7; --flavorD-cyan-muted-10: #86b6cc; --flavorD-cyan-muted-11: #a7cee1; --flavorD-cyan-muted-12: #daeff9; --flavorD-cyan-regular-1: #030c11; --flavorD-cyan-regular-2: #03131a; --flavorD-cyan-regular-3: #001a25; --flavorD-cyan-regular-4: #00222f; --flavorD-cyan-regular-5: #002e3e; --flavorD-cyan-regular-6: #003b4f; --flavorD-cyan-regular-7: #005570; --flavorD-cyan-regular-8: #00779a; --flavorD-cyan-regular-9: #00a7d8; --flavorD-cyan-regular-10: #31bef0; --flavorD-cyan-regular-11: #74d5ff; --flavorD-cyan-regular-12: #d3f1ff; --flavorD-cyan-bold-1: #000c13; --flavorD-cyan-bold-2: #00131c; --flavorD-cyan-bold-3: #001a25; --flavorD-cyan-bold-4: #00222f; --flavorD-cyan-bold-5: #002e3e; --flavorD-cyan-bold-6: #003b4f; --flavorD-cyan-bold-7: #005570; --flavorD-cyan-bold-8: #00779a; --flavorD-cyan-bold-9: #00a7d8; --flavorD-cyan-bold-10: #00bff6; --flavorD-cyan-bold-11: #74d5ff; --flavorD-cyan-bold-12: #d3f1ff; --flavorD-blue-muted-1: #080a0e; --flavorD-blue-muted-2: #0c1117; --flavorD-blue-muted-3: #111821; --flavorD-blue-muted-4: #101f31; --flavorD-blue-muted-5: #112947; --flavorD-blue-muted-6: #1b3658; --flavorD-blue-muted-7: #324e73; --flavorD-blue-muted-8: #506e94; --flavorD-blue-muted-9: #7b9bc3; --flavorD-blue-muted-10: #92b1d8; --flavorD-blue-muted-11: #b0caeb; --flavorD-blue-muted-12: #dfedff; --flavorD-blue-regular-1: #050a13; --flavorD-blue-regular-2: #07111e; --flavorD-blue-regular-3: #07172c; --flavorD-blue-regular-4: #001d41; --flavorD-blue-regular-5: #002855; --flavorD-blue-regular-6: #00346b; --flavorD-blue-regular-7: #004b96; --flavorD-blue-regular-8: #1e6bc2; --flavorD-blue-regular-9: #509af5; --flavorD-blue-regular-10: #73b1ff; --flavorD-blue-regular-11: #a2caff; --flavorD-blue-regular-12: #dfedff; --flavorD-blue-bold-1: #020a18; --flavorD-blue-bold-2: #021026; --flavorD-blue-bold-3: #001635; --flavorD-blue-bold-4: #001d41; --flavorD-blue-bold-5: #002855; --flavorD-blue-bold-6: #00346b; --flavorD-blue-bold-7: #004b96; --flavorD-blue-bold-8: #0069cd; --flavorD-blue-bold-9: #4499ff; --flavorD-blue-bold-10: #73b1ff; --flavorD-blue-bold-11: #a2caff; --flavorD-blue-bold-12: #dfedff; --flavorD-violet-muted-1: #090a0e; --flavorD-violet-muted-2: #0f1017; --flavorD-violet-muted-3: #151621; --flavorD-violet-muted-4: #1a1b32; --flavorD-violet-muted-5: #232448; --flavorD-violet-muted-6: #2f3059; --flavorD-violet-muted-7: #454874; --flavorD-violet-muted-8: #636795; --flavorD-violet-muted-9: #8f94c5; --flavorD-violet-muted-10: #a5aada; --flavorD-violet-muted-11: #bfc4ec; --flavorD-violet-muted-12: #e7eaff; --flavorD-violet-regular-1: #080913; --flavorD-violet-regular-2: #0e0f1e; --flavorD-violet-regular-3: #13142c; --flavorD-violet-regular-4: #181349; --flavorD-violet-regular-5: #22116c; --flavorD-violet-regular-6: #2d1d83; --flavorD-violet-regular-7: #413aa0; --flavorD-violet-regular-8: #5d5bc5; --flavorD-violet-regular-9: #878af8; --flavorD-violet-regular-10: #9ea4ff; --flavorD-violet-regular-11: #bcc2ff; --flavorD-violet-regular-12: #e7eaff; --flavorD-violet-bold-1: #080819; --flavorD-violet-bold-2: #0d0d26; --flavorD-violet-bold-3: #121039; --flavorD-violet-bold-4: #1a005e; --flavorD-violet-bold-5: #230078; --flavorD-violet-bold-6: #2f0096; --flavorD-violet-bold-7: #4400d0; --flavorD-violet-bold-8: #5c40f8; --flavorD-violet-bold-9: #8688ff; --flavorD-violet-bold-10: #9ea4ff; --flavorD-violet-bold-11: #bcc2ff; --flavorD-violet-bold-12: #e7eaff; --flavorD-purple-muted-1: #0b090e; --flavorD-purple-muted-2: #120f16; --flavorD-purple-muted-3: #19151f; --flavorD-purple-muted-4: #23182f; --flavorD-purple-muted-5: #311f43; --flavorD-purple-muted-6: #3e2a54; --flavorD-purple-muted-7: #57426e; --flavorD-purple-muted-8: #76618f; --flavorD-purple-muted-9: #a38dbe; --flavorD-purple-muted-10: #b8a3d3; --flavorD-purple-muted-11: #d0bee6; --flavorD-purple-muted-12: #f0e6fd; --flavorD-purple-regular-1: #0c0812; --flavorD-purple-regular-2: #140c1c; --flavorD-purple-regular-3: #1c1029; --flavorD-purple-regular-4: #290b42; --flavorD-purple-regular-5: #3a0060; --flavorD-purple-regular-6: #4a0677; --flavorD-purple-regular-7: #632a93; --flavorD-purple-regular-8: #834cb7; --flavorD-purple-regular-9: #b07ae9; --flavorD-purple-regular-10: #c592fe; --flavorD-purple-regular-11: #d7b6ff; --flavorD-purple-regular-12: #f1e6ff; --flavorD-purple-bold-1: #0e0616; --flavorD-purple-bold-2: #160923; --flavorD-purple-bold-3: #200933; --flavorD-purple-bold-4: #2c004a; --flavorD-purple-bold-5: #3a0060; --flavorD-purple-bold-6: #4b0079; --flavorD-purple-bold-7: #6a00a9; --flavorD-purple-bold-8: #9117e1; --flavorD-purple-bold-9: #b86dff; --flavorD-purple-bold-10: #c691ff; --flavorD-purple-bold-11: #d7b6ff; --flavorD-purple-bold-12: #f1e6ff; --flavorD-magenta-muted-1: #0d080b; --flavorD-magenta-muted-2: #160e12; --flavorD-magenta-muted-3: #1f131a; --flavorD-magenta-muted-4: #2d1523; --flavorD-magenta-muted-5: #401931; --flavorD-magenta-muted-6: #50233e; --flavorD-magenta-muted-7: #6a3b57; --flavorD-magenta-muted-8: #8c5976; --flavorD-magenta-muted-9: #bb85a3; --flavorD-magenta-muted-10: #d19cb9; --flavorD-magenta-muted-11: #e5b8d0; --flavorD-magenta-muted-12: #fce3f0; --flavorD-magenta-regular-1: #11060c; --flavorD-magenta-regular-2: #1b0a14; --flavorD-magenta-regular-3: #270c1c; --flavorD-magenta-regular-4: #3b0028; --flavorD-magenta-regular-5: #4d0036; --flavorD-magenta-regular-6: #620045; --flavorD-magenta-regular-7: #870c62; --flavorD-magenta-regular-8: #ab3782; --flavorD-magenta-regular-9: #df67b0; --flavorD-magenta-regular-10: #f480c5; --flavorD-magenta-regular-11: #ffa7d9; --flavorD-magenta-regular-12: #ffe2f1; --flavorD-magenta-bold-1: #15040e; --flavorD-magenta-bold-2: #200516; --flavorD-magenta-bold-3: #2e021f; --flavorD-magenta-bold-4: #3b0028; --flavorD-magenta-bold-5: #4d0036; --flavorD-magenta-bold-6: #620045; --flavorD-magenta-bold-7: #890063; --flavorD-magenta-bold-8: #bc0089; --flavorD-magenta-bold-9: #ff2cbd; --flavorD-magenta-bold-10: #ff74c9; --flavorD-magenta-bold-11: #ffa7d9; --flavorD-magenta-bold-12: #ffe2f1; } :root { --ramp-1: var(--flavor-neutral-regular-1); --ramp-2: var(--flavor-neutral-regular-2); --ramp-3: var(--flavor-neutral-regular-3); --ramp-4: var(--flavor-neutral-regular-4); --ramp-5: var(--flavor-neutral-regular-5); --ramp-6: var(--flavor-neutral-regular-6); --ramp-7: var(--flavor-neutral-regular-7); --ramp-8: var(--flavor-neutral-regular-8); --ramp-9: var(--flavor-neutral-regular-9); --ramp-10: var(--flavor-neutral-regular-10); --ramp-11: var(--flavor-neutral-regular-11); --ramp-12: var(--flavor-neutral-regular-12); --rampD-1: var(--flavorD-neutral-regular-1); --rampD-2: var(--flavorD-neutral-regular-2); --rampD-3: var(--flavorD-neutral-regular-3); --rampD-4: var(--flavorD-neutral-regular-4); --rampD-5: var(--flavorD-neutral-regular-5); --rampD-6: var(--flavorD-neutral-regular-6); --rampD-7: var(--flavorD-neutral-regular-7); --rampD-8: var(--flavorD-neutral-regular-8); --rampD-9: var(--flavorD-neutral-regular-9); --rampD-10: var(--flavorD-neutral-regular-10); --rampD-11: var(--flavorD-neutral-regular-11); --rampD-12: var(--flavorD-neutral-regular-12); --neutral-1: var(--flavor-neutral-regular-1); --neutral-2: var(--flavor-neutral-regular-2); --neutral-3: var(--flavor-neutral-regular-3); --neutral-4: var(--flavor-neutral-regular-4); --neutral-5: var(--flavor-neutral-regular-5); --neutral-6: var(--flavor-neutral-regular-6); --neutral-7: var(--flavor-neutral-regular-7); --neutral-8: var(--flavor-neutral-regular-8); --neutral-9: var(--flavor-neutral-regular-9); --neutral-10: var(--flavor-neutral-regular-10); --neutral-11: var(--flavor-neutral-regular-11); --neutral-12: var(--flavor-neutral-regular-12); } :root[data-hue="neutral"][data-sat="muted"] { --ramp-1: var(--flavor-neutral-muted-1); --ramp-2: var(--flavor-neutral-muted-2); --ramp-3: var(--flavor-neutral-muted-3); --ramp-4: var(--flavor-neutral-muted-4); --ramp-5: var(--flavor-neutral-muted-5); --ramp-6: var(--flavor-neutral-muted-6); --ramp-7: var(--flavor-neutral-muted-7); --ramp-8: var(--flavor-neutral-muted-8); --ramp-9: var(--flavor-neutral-muted-9); --ramp-10: var(--flavor-neutral-muted-10); --ramp-11: var(--flavor-neutral-muted-11); --ramp-12: var(--flavor-neutral-muted-12); --rampD-1: var(--flavorD-neutral-muted-1); --rampD-2: var(--flavorD-neutral-muted-2); --rampD-3: var(--flavorD-neutral-muted-3); --rampD-4: var(--flavorD-neutral-muted-4); --rampD-5: var(--flavorD-neutral-muted-5); --rampD-6: var(--flavorD-neutral-muted-6); --rampD-7: var(--flavorD-neutral-muted-7); --rampD-8: var(--flavorD-neutral-muted-8); --rampD-9: var(--flavorD-neutral-muted-9); --rampD-10: var(--flavorD-neutral-muted-10); --rampD-11: var(--flavorD-neutral-muted-11); --rampD-12: var(--flavorD-neutral-muted-12); } :root[data-hue="neutral"][data-sat="regular"] { --ramp-1: var(--flavor-neutral-regular-1); --ramp-2: var(--flavor-neutral-regular-2); --ramp-3: var(--flavor-neutral-regular-3); --ramp-4: var(--flavor-neutral-regular-4); --ramp-5: var(--flavor-neutral-regular-5); --ramp-6: var(--flavor-neutral-regular-6); --ramp-7: var(--flavor-neutral-regular-7); --ramp-8: var(--flavor-neutral-regular-8); --ramp-9: var(--flavor-neutral-regular-9); --ramp-10: var(--flavor-neutral-regular-10); --ramp-11: var(--flavor-neutral-regular-11); --ramp-12: var(--flavor-neutral-regular-12); --rampD-1: var(--flavorD-neutral-regular-1); --rampD-2: var(--flavorD-neutral-regular-2); --rampD-3: var(--flavorD-neutral-regular-3); --rampD-4: var(--flavorD-neutral-regular-4); --rampD-5: var(--flavorD-neutral-regular-5); --rampD-6: var(--flavorD-neutral-regular-6); --rampD-7: var(--flavorD-neutral-regular-7); --rampD-8: var(--flavorD-neutral-regular-8); --rampD-9: var(--flavorD-neutral-regular-9); --rampD-10: var(--flavorD-neutral-regular-10); --rampD-11: var(--flavorD-neutral-regular-11); --rampD-12: var(--flavorD-neutral-regular-12); } :root[data-hue="neutral"][data-sat="bold"] { --ramp-1: var(--flavor-neutral-bold-1); --ramp-2: var(--flavor-neutral-bold-2); --ramp-3: var(--flavor-neutral-bold-3); --ramp-4: var(--flavor-neutral-bold-4); --ramp-5: var(--flavor-neutral-bold-5); --ramp-6: var(--flavor-neutral-bold-6); --ramp-7: var(--flavor-neutral-bold-7); --ramp-8: var(--flavor-neutral-bold-8); --ramp-9: var(--flavor-neutral-bold-9); --ramp-10: var(--flavor-neutral-bold-10); --ramp-11: var(--flavor-neutral-bold-11); --ramp-12: var(--flavor-neutral-bold-12); --rampD-1: var(--flavorD-neutral-bold-1); --rampD-2: var(--flavorD-neutral-bold-2); --rampD-3: var(--flavorD-neutral-bold-3); --rampD-4: var(--flavorD-neutral-bold-4); --rampD-5: var(--flavorD-neutral-bold-5); --rampD-6: var(--flavorD-neutral-bold-6); --rampD-7: var(--flavorD-neutral-bold-7); --rampD-8: var(--flavorD-neutral-bold-8); --rampD-9: var(--flavorD-neutral-bold-9); --rampD-10: var(--flavorD-neutral-bold-10); --rampD-11: var(--flavorD-neutral-bold-11); --rampD-12: var(--flavorD-neutral-bold-12); } :root[data-hue="red"][data-sat="muted"] { --ramp-1: var(--flavor-red-muted-1); --ramp-2: var(--flavor-red-muted-2); --ramp-3: var(--flavor-red-muted-3); --ramp-4: var(--flavor-red-muted-4); --ramp-5: var(--flavor-red-muted-5); --ramp-6: var(--flavor-red-muted-6); --ramp-7: var(--flavor-red-muted-7); --ramp-8: var(--flavor-red-muted-8); --ramp-9: var(--flavor-red-muted-9); --ramp-10: var(--flavor-red-muted-10); --ramp-11: var(--flavor-red-muted-11); --ramp-12: var(--flavor-red-muted-12); --rampD-1: var(--flavorD-red-muted-1); --rampD-2: var(--flavorD-red-muted-2); --rampD-3: var(--flavorD-red-muted-3); --rampD-4: var(--flavorD-red-muted-4); --rampD-5: var(--flavorD-red-muted-5); --rampD-6: var(--flavorD-red-muted-6); --rampD-7: var(--flavorD-red-muted-7); --rampD-8: var(--flavorD-red-muted-8); --rampD-9: var(--flavorD-red-muted-9); --rampD-10: var(--flavorD-red-muted-10); --rampD-11: var(--flavorD-red-muted-11); --rampD-12: var(--flavorD-red-muted-12); } :root[data-hue="red"][data-sat="regular"] { --ramp-1: var(--flavor-red-regular-1); --ramp-2: var(--flavor-red-regular-2); --ramp-3: var(--flavor-red-regular-3); --ramp-4: var(--flavor-red-regular-4); --ramp-5: var(--flavor-red-regular-5); --ramp-6: var(--flavor-red-regular-6); --ramp-7: var(--flavor-red-regular-7); --ramp-8: var(--flavor-red-regular-8); --ramp-9: var(--flavor-red-regular-9); --ramp-10: var(--flavor-red-regular-10); --ramp-11: var(--flavor-red-regular-11); --ramp-12: var(--flavor-red-regular-12); --rampD-1: var(--flavorD-red-regular-1); --rampD-2: var(--flavorD-red-regular-2); --rampD-3: var(--flavorD-red-regular-3); --rampD-4: var(--flavorD-red-regular-4); --rampD-5: var(--flavorD-red-regular-5); --rampD-6: var(--flavorD-red-regular-6); --rampD-7: var(--flavorD-red-regular-7); --rampD-8: var(--flavorD-red-regular-8); --rampD-9: var(--flavorD-red-regular-9); --rampD-10: var(--flavorD-red-regular-10); --rampD-11: var(--flavorD-red-regular-11); --rampD-12: var(--flavorD-red-regular-12); } :root[data-hue="red"][data-sat="bold"] { --ramp-1: var(--flavor-red-bold-1); --ramp-2: var(--flavor-red-bold-2); --ramp-3: var(--flavor-red-bold-3); --ramp-4: var(--flavor-red-bold-4); --ramp-5: var(--flavor-red-bold-5); --ramp-6: var(--flavor-red-bold-6); --ramp-7: var(--flavor-red-bold-7); --ramp-8: var(--flavor-red-bold-8); --ramp-9: var(--flavor-red-bold-9); --ramp-10: var(--flavor-red-bold-10); --ramp-11: var(--flavor-red-bold-11); --ramp-12: var(--flavor-red-bold-12); --rampD-1: var(--flavorD-red-bold-1); --rampD-2: var(--flavorD-red-bold-2); --rampD-3: var(--flavorD-red-bold-3); --rampD-4: var(--flavorD-red-bold-4); --rampD-5: var(--flavorD-red-bold-5); --rampD-6: var(--flavorD-red-bold-6); --rampD-7: var(--flavorD-red-bold-7); --rampD-8: var(--flavorD-red-bold-8); --rampD-9: var(--flavorD-red-bold-9); --rampD-10: var(--flavorD-red-bold-10); --rampD-11: var(--flavorD-red-bold-11); --rampD-12: var(--flavorD-red-bold-12); } :root[data-hue="scarlet"][data-sat="muted"] { --ramp-1: var(--flavor-scarlet-muted-1); --ramp-2: var(--flavor-scarlet-muted-2); --ramp-3: var(--flavor-scarlet-muted-3); --ramp-4: var(--flavor-scarlet-muted-4); --ramp-5: var(--flavor-scarlet-muted-5); --ramp-6: var(--flavor-scarlet-muted-6); --ramp-7: var(--flavor-scarlet-muted-7); --ramp-8: var(--flavor-scarlet-muted-8); --ramp-9: var(--flavor-scarlet-muted-9); --ramp-10: var(--flavor-scarlet-muted-10); --ramp-11: var(--flavor-scarlet-muted-11); --ramp-12: var(--flavor-scarlet-muted-12); --rampD-1: var(--flavorD-scarlet-muted-1); --rampD-2: var(--flavorD-scarlet-muted-2); --rampD-3: var(--flavorD-scarlet-muted-3); --rampD-4: var(--flavorD-scarlet-muted-4); --rampD-5: var(--flavorD-scarlet-muted-5); --rampD-6: var(--flavorD-scarlet-muted-6); --rampD-7: var(--flavorD-scarlet-muted-7); --rampD-8: var(--flavorD-scarlet-muted-8); --rampD-9: var(--flavorD-scarlet-muted-9); --rampD-10: var(--flavorD-scarlet-muted-10); --rampD-11: var(--flavorD-scarlet-muted-11); --rampD-12: var(--flavorD-scarlet-muted-12); } :root[data-hue="scarlet"][data-sat="regular"] { --ramp-1: var(--flavor-scarlet-regular-1); --ramp-2: var(--flavor-scarlet-regular-2); --ramp-3: var(--flavor-scarlet-regular-3); --ramp-4: var(--flavor-scarlet-regular-4); --ramp-5: var(--flavor-scarlet-regular-5); --ramp-6: var(--flavor-scarlet-regular-6); --ramp-7: var(--flavor-scarlet-regular-7); --ramp-8: var(--flavor-scarlet-regular-8); --ramp-9: var(--flavor-scarlet-regular-9); --ramp-10: var(--flavor-scarlet-regular-10); --ramp-11: var(--flavor-scarlet-regular-11); --ramp-12: var(--flavor-scarlet-regular-12); --rampD-1: var(--flavorD-scarlet-regular-1); --rampD-2: var(--flavorD-scarlet-regular-2); --rampD-3: var(--flavorD-scarlet-regular-3); --rampD-4: var(--flavorD-scarlet-regular-4); --rampD-5: var(--flavorD-scarlet-regular-5); --rampD-6: var(--flavorD-scarlet-regular-6); --rampD-7: var(--flavorD-scarlet-regular-7); --rampD-8: var(--flavorD-scarlet-regular-8); --rampD-9: var(--flavorD-scarlet-regular-9); --rampD-10: var(--flavorD-scarlet-regular-10); --rampD-11: var(--flavorD-scarlet-regular-11); --rampD-12: var(--flavorD-scarlet-regular-12); } :root[data-hue="scarlet"][data-sat="bold"] { --ramp-1: var(--flavor-scarlet-bold-1); --ramp-2: var(--flavor-scarlet-bold-2); --ramp-3: var(--flavor-scarlet-bold-3); --ramp-4: var(--flavor-scarlet-bold-4); --ramp-5: var(--flavor-scarlet-bold-5); --ramp-6: var(--flavor-scarlet-bold-6); --ramp-7: var(--flavor-scarlet-bold-7); --ramp-8: var(--flavor-scarlet-bold-8); --ramp-9: var(--flavor-scarlet-bold-9); --ramp-10: var(--flavor-scarlet-bold-10); --ramp-11: var(--flavor-scarlet-bold-11); --ramp-12: var(--flavor-scarlet-bold-12); --rampD-1: var(--flavorD-scarlet-bold-1); --rampD-2: var(--flavorD-scarlet-bold-2); --rampD-3: var(--flavorD-scarlet-bold-3); --rampD-4: var(--flavorD-scarlet-bold-4); --rampD-5: var(--flavorD-scarlet-bold-5); --rampD-6: var(--flavorD-scarlet-bold-6); --rampD-7: var(--flavorD-scarlet-bold-7); --rampD-8: var(--flavorD-scarlet-bold-8); --rampD-9: var(--flavorD-scarlet-bold-9); --rampD-10: var(--flavorD-scarlet-bold-10); --rampD-11: var(--flavorD-scarlet-bold-11); --rampD-12: var(--flavorD-scarlet-bold-12); } :root[data-hue="orange"][data-sat="muted"] { --ramp-1: var(--flavor-orange-muted-1); --ramp-2: var(--flavor-orange-muted-2); --ramp-3: var(--flavor-orange-muted-3); --ramp-4: var(--flavor-orange-muted-4); --ramp-5: var(--flavor-orange-muted-5); --ramp-6: var(--flavor-orange-muted-6); --ramp-7: var(--flavor-orange-muted-7); --ramp-8: var(--flavor-orange-muted-8); --ramp-9: var(--flavor-orange-muted-9); --ramp-10: var(--flavor-orange-muted-10); --ramp-11: var(--flavor-orange-muted-11); --ramp-12: var(--flavor-orange-muted-12); --rampD-1: var(--flavorD-orange-muted-1); --rampD-2: var(--flavorD-orange-muted-2); --rampD-3: var(--flavorD-orange-muted-3); --rampD-4: var(--flavorD-orange-muted-4); --rampD-5: var(--flavorD-orange-muted-5); --rampD-6: var(--flavorD-orange-muted-6); --rampD-7: var(--flavorD-orange-muted-7); --rampD-8: var(--flavorD-orange-muted-8); --rampD-9: var(--flavorD-orange-muted-9); --rampD-10: var(--flavorD-orange-muted-10); --rampD-11: var(--flavorD-orange-muted-11); --rampD-12: var(--flavorD-orange-muted-12); } :root[data-hue="orange"][data-sat="regular"] { --ramp-1: var(--flavor-orange-regular-1); --ramp-2: var(--flavor-orange-regular-2); --ramp-3: var(--flavor-orange-regular-3); --ramp-4: var(--flavor-orange-regular-4); --ramp-5: var(--flavor-orange-regular-5); --ramp-6: var(--flavor-orange-regular-6); --ramp-7: var(--flavor-orange-regular-7); --ramp-8: var(--flavor-orange-regular-8); --ramp-9: var(--flavor-orange-regular-9); --ramp-10: var(--flavor-orange-regular-10); --ramp-11: var(--flavor-orange-regular-11); --ramp-12: var(--flavor-orange-regular-12); --rampD-1: var(--flavorD-orange-regular-1); --rampD-2: var(--flavorD-orange-regular-2); --rampD-3: var(--flavorD-orange-regular-3); --rampD-4: var(--flavorD-orange-regular-4); --rampD-5: var(--flavorD-orange-regular-5); --rampD-6: var(--flavorD-orange-regular-6); --rampD-7: var(--flavorD-orange-regular-7); --rampD-8: var(--flavorD-orange-regular-8); --rampD-9: var(--flavorD-orange-regular-9); --rampD-10: var(--flavorD-orange-regular-10); --rampD-11: var(--flavorD-orange-regular-11); --rampD-12: var(--flavorD-orange-regular-12); } :root[data-hue="orange"][data-sat="bold"] { --ramp-1: var(--flavor-orange-bold-1); --ramp-2: var(--flavor-orange-bold-2); --ramp-3: var(--flavor-orange-bold-3); --ramp-4: var(--flavor-orange-bold-4); --ramp-5: var(--flavor-orange-bold-5); --ramp-6: var(--flavor-orange-bold-6); --ramp-7: var(--flavor-orange-bold-7); --ramp-8: var(--flavor-orange-bold-8); --ramp-9: var(--flavor-orange-bold-9); --ramp-10: var(--flavor-orange-bold-10); --ramp-11: var(--flavor-orange-bold-11); --ramp-12: var(--flavor-orange-bold-12); --rampD-1: var(--flavorD-orange-bold-1); --rampD-2: var(--flavorD-orange-bold-2); --rampD-3: var(--flavorD-orange-bold-3); --rampD-4: var(--flavorD-orange-bold-4); --rampD-5: var(--flavorD-orange-bold-5); --rampD-6: var(--flavorD-orange-bold-6); --rampD-7: var(--flavorD-orange-bold-7); --rampD-8: var(--flavorD-orange-bold-8); --rampD-9: var(--flavorD-orange-bold-9); --rampD-10: var(--flavorD-orange-bold-10); --rampD-11: var(--flavorD-orange-bold-11); --rampD-12: var(--flavorD-orange-bold-12); } :root[data-hue="tangerine"][data-sat="muted"] { --ramp-1: var(--flavor-tangerine-muted-1); --ramp-2: var(--flavor-tangerine-muted-2); --ramp-3: var(--flavor-tangerine-muted-3); --ramp-4: var(--flavor-tangerine-muted-4); --ramp-5: var(--flavor-tangerine-muted-5); --ramp-6: var(--flavor-tangerine-muted-6); --ramp-7: var(--flavor-tangerine-muted-7); --ramp-8: var(--flavor-tangerine-muted-8); --ramp-9: var(--flavor-tangerine-muted-9); --ramp-10: var(--flavor-tangerine-muted-10); --ramp-11: var(--flavor-tangerine-muted-11); --ramp-12: var(--flavor-tangerine-muted-12); --rampD-1: var(--flavorD-tangerine-muted-1); --rampD-2: var(--flavorD-tangerine-muted-2); --rampD-3: var(--flavorD-tangerine-muted-3); --rampD-4: var(--flavorD-tangerine-muted-4); --rampD-5: var(--flavorD-tangerine-muted-5); --rampD-6: var(--flavorD-tangerine-muted-6); --rampD-7: var(--flavorD-tangerine-muted-7); --rampD-8: var(--flavorD-tangerine-muted-8); --rampD-9: var(--flavorD-tangerine-muted-9); --rampD-10: var(--flavorD-tangerine-muted-10); --rampD-11: var(--flavorD-tangerine-muted-11); --rampD-12: var(--flavorD-tangerine-muted-12); } :root[data-hue="tangerine"][data-sat="regular"] { --ramp-1: var(--flavor-tangerine-regular-1); --ramp-2: var(--flavor-tangerine-regular-2); --ramp-3: var(--flavor-tangerine-regular-3); --ramp-4: var(--flavor-tangerine-regular-4); --ramp-5: var(--flavor-tangerine-regular-5); --ramp-6: var(--flavor-tangerine-regular-6); --ramp-7: var(--flavor-tangerine-regular-7); --ramp-8: var(--flavor-tangerine-regular-8); --ramp-9: var(--flavor-tangerine-regular-9); --ramp-10: var(--flavor-tangerine-regular-10); --ramp-11: var(--flavor-tangerine-regular-11); --ramp-12: var(--flavor-tangerine-regular-12); --rampD-1: var(--flavorD-tangerine-regular-1); --rampD-2: var(--flavorD-tangerine-regular-2); --rampD-3: var(--flavorD-tangerine-regular-3); --rampD-4: var(--flavorD-tangerine-regular-4); --rampD-5: var(--flavorD-tangerine-regular-5); --rampD-6: var(--flavorD-tangerine-regular-6); --rampD-7: var(--flavorD-tangerine-regular-7); --rampD-8: var(--flavorD-tangerine-regular-8); --rampD-9: var(--flavorD-tangerine-regular-9); --rampD-10: var(--flavorD-tangerine-regular-10); --rampD-11: var(--flavorD-tangerine-regular-11); --rampD-12: var(--flavorD-tangerine-regular-12); } :root[data-hue="tangerine"][data-sat="bold"] { --ramp-1: var(--flavor-tangerine-bold-1); --ramp-2: var(--flavor-tangerine-bold-2); --ramp-3: var(--flavor-tangerine-bold-3); --ramp-4: var(--flavor-tangerine-bold-4); --ramp-5: var(--flavor-tangerine-bold-5); --ramp-6: var(--flavor-tangerine-bold-6); --ramp-7: var(--flavor-tangerine-bold-7); --ramp-8: var(--flavor-tangerine-bold-8); --ramp-9: var(--flavor-tangerine-bold-9); --ramp-10: var(--flavor-tangerine-bold-10); --ramp-11: var(--flavor-tangerine-bold-11); --ramp-12: var(--flavor-tangerine-bold-12); --rampD-1: var(--flavorD-tangerine-bold-1); --rampD-2: var(--flavorD-tangerine-bold-2); --rampD-3: var(--flavorD-tangerine-bold-3); --rampD-4: var(--flavorD-tangerine-bold-4); --rampD-5: var(--flavorD-tangerine-bold-5); --rampD-6: var(--flavorD-tangerine-bold-6); --rampD-7: var(--flavorD-tangerine-bold-7); --rampD-8: var(--flavorD-tangerine-bold-8); --rampD-9: var(--flavorD-tangerine-bold-9); --rampD-10: var(--flavorD-tangerine-bold-10); --rampD-11: var(--flavorD-tangerine-bold-11); --rampD-12: var(--flavorD-tangerine-bold-12); } :root[data-hue="yellow"][data-sat="muted"] { --ramp-1: var(--flavor-yellow-muted-1); --ramp-2: var(--flavor-yellow-muted-2); --ramp-3: var(--flavor-yellow-muted-3); --ramp-4: var(--flavor-yellow-muted-4); --ramp-5: var(--flavor-yellow-muted-5); --ramp-6: var(--flavor-yellow-muted-6); --ramp-7: var(--flavor-yellow-muted-7); --ramp-8: var(--flavor-yellow-muted-8); --ramp-9: var(--flavor-yellow-muted-9); --ramp-10: var(--flavor-yellow-muted-10); --ramp-11: var(--flavor-yellow-muted-11); --ramp-12: var(--flavor-yellow-muted-12); --rampD-1: var(--flavorD-yellow-muted-1); --rampD-2: var(--flavorD-yellow-muted-2); --rampD-3: var(--flavorD-yellow-muted-3); --rampD-4: var(--flavorD-yellow-muted-4); --rampD-5: var(--flavorD-yellow-muted-5); --rampD-6: var(--flavorD-yellow-muted-6); --rampD-7: var(--flavorD-yellow-muted-7); --rampD-8: var(--flavorD-yellow-muted-8); --rampD-9: var(--flavorD-yellow-muted-9); --rampD-10: var(--flavorD-yellow-muted-10); --rampD-11: var(--flavorD-yellow-muted-11); --rampD-12: var(--flavorD-yellow-muted-12); } :root[data-hue="yellow"][data-sat="regular"] { --ramp-1: var(--flavor-yellow-regular-1); --ramp-2: var(--flavor-yellow-regular-2); --ramp-3: var(--flavor-yellow-regular-3); --ramp-4: var(--flavor-yellow-regular-4); --ramp-5: var(--flavor-yellow-regular-5); --ramp-6: var(--flavor-yellow-regular-6); --ramp-7: var(--flavor-yellow-regular-7); --ramp-8: var(--flavor-yellow-regular-8); --ramp-9: var(--flavor-yellow-regular-9); --ramp-10: var(--flavor-yellow-regular-10); --ramp-11: var(--flavor-yellow-regular-11); --ramp-12: var(--flavor-yellow-regular-12); --rampD-1: var(--flavorD-yellow-regular-1); --rampD-2: var(--flavorD-yellow-regular-2); --rampD-3: var(--flavorD-yellow-regular-3); --rampD-4: var(--flavorD-yellow-regular-4); --rampD-5: var(--flavorD-yellow-regular-5); --rampD-6: var(--flavorD-yellow-regular-6); --rampD-7: var(--flavorD-yellow-regular-7); --rampD-8: var(--flavorD-yellow-regular-8); --rampD-9: var(--flavorD-yellow-regular-9); --rampD-10: var(--flavorD-yellow-regular-10); --rampD-11: var(--flavorD-yellow-regular-11); --rampD-12: var(--flavorD-yellow-regular-12); } :root[data-hue="yellow"][data-sat="bold"] { --ramp-1: var(--flavor-yellow-bold-1); --ramp-2: var(--flavor-yellow-bold-2); --ramp-3: var(--flavor-yellow-bold-3); --ramp-4: var(--flavor-yellow-bold-4); --ramp-5: var(--flavor-yellow-bold-5); --ramp-6: var(--flavor-yellow-bold-6); --ramp-7: var(--flavor-yellow-bold-7); --ramp-8: var(--flavor-yellow-bold-8); --ramp-9: var(--flavor-yellow-bold-9); --ramp-10: var(--flavor-yellow-bold-10); --ramp-11: var(--flavor-yellow-bold-11); --ramp-12: var(--flavor-yellow-bold-12); --rampD-1: var(--flavorD-yellow-bold-1); --rampD-2: var(--flavorD-yellow-bold-2); --rampD-3: var(--flavorD-yellow-bold-3); --rampD-4: var(--flavorD-yellow-bold-4); --rampD-5: var(--flavorD-yellow-bold-5); --rampD-6: var(--flavorD-yellow-bold-6); --rampD-7: var(--flavorD-yellow-bold-7); --rampD-8: var(--flavorD-yellow-bold-8); --rampD-9: var(--flavorD-yellow-bold-9); --rampD-10: var(--flavorD-yellow-bold-10); --rampD-11: var(--flavorD-yellow-bold-11); --rampD-12: var(--flavorD-yellow-bold-12); } :root[data-hue="lime"][data-sat="muted"] { --ramp-1: var(--flavor-lime-muted-1); --ramp-2: var(--flavor-lime-muted-2); --ramp-3: var(--flavor-lime-muted-3); --ramp-4: var(--flavor-lime-muted-4); --ramp-5: var(--flavor-lime-muted-5); --ramp-6: var(--flavor-lime-muted-6); --ramp-7: var(--flavor-lime-muted-7); --ramp-8: var(--flavor-lime-muted-8); --ramp-9: var(--flavor-lime-muted-9); --ramp-10: var(--flavor-lime-muted-10); --ramp-11: var(--flavor-lime-muted-11); --ramp-12: var(--flavor-lime-muted-12); --rampD-1: var(--flavorD-lime-muted-1); --rampD-2: var(--flavorD-lime-muted-2); --rampD-3: var(--flavorD-lime-muted-3); --rampD-4: var(--flavorD-lime-muted-4); --rampD-5: var(--flavorD-lime-muted-5); --rampD-6: var(--flavorD-lime-muted-6); --rampD-7: var(--flavorD-lime-muted-7); --rampD-8: var(--flavorD-lime-muted-8); --rampD-9: var(--flavorD-lime-muted-9); --rampD-10: var(--flavorD-lime-muted-10); --rampD-11: var(--flavorD-lime-muted-11); --rampD-12: var(--flavorD-lime-muted-12); } :root[data-hue="lime"][data-sat="regular"] { --ramp-1: var(--flavor-lime-regular-1); --ramp-2: var(--flavor-lime-regular-2); --ramp-3: var(--flavor-lime-regular-3); --ramp-4: var(--flavor-lime-regular-4); --ramp-5: var(--flavor-lime-regular-5); --ramp-6: var(--flavor-lime-regular-6); --ramp-7: var(--flavor-lime-regular-7); --ramp-8: var(--flavor-lime-regular-8); --ramp-9: var(--flavor-lime-regular-9); --ramp-10: var(--flavor-lime-regular-10); --ramp-11: var(--flavor-lime-regular-11); --ramp-12: var(--flavor-lime-regular-12); --rampD-1: var(--flavorD-lime-regular-1); --rampD-2: var(--flavorD-lime-regular-2); --rampD-3: var(--flavorD-lime-regular-3); --rampD-4: var(--flavorD-lime-regular-4); --rampD-5: var(--flavorD-lime-regular-5); --rampD-6: var(--flavorD-lime-regular-6); --rampD-7: var(--flavorD-lime-regular-7); --rampD-8: var(--flavorD-lime-regular-8); --rampD-9: var(--flavorD-lime-regular-9); --rampD-10: var(--flavorD-lime-regular-10); --rampD-11: var(--flavorD-lime-regular-11); --rampD-12: var(--flavorD-lime-regular-12); } :root[data-hue="lime"][data-sat="bold"] { --ramp-1: var(--flavor-lime-bold-1); --ramp-2: var(--flavor-lime-bold-2); --ramp-3: var(--flavor-lime-bold-3); --ramp-4: var(--flavor-lime-bold-4); --ramp-5: var(--flavor-lime-bold-5); --ramp-6: var(--flavor-lime-bold-6); --ramp-7: var(--flavor-lime-bold-7); --ramp-8: var(--flavor-lime-bold-8); --ramp-9: var(--flavor-lime-bold-9); --ramp-10: var(--flavor-lime-bold-10); --ramp-11: var(--flavor-lime-bold-11); --ramp-12: var(--flavor-lime-bold-12); --rampD-1: var(--flavorD-lime-bold-1); --rampD-2: var(--flavorD-lime-bold-2); --rampD-3: var(--flavorD-lime-bold-3); --rampD-4: var(--flavorD-lime-bold-4); --rampD-5: var(--flavorD-lime-bold-5); --rampD-6: var(--flavorD-lime-bold-6); --rampD-7: var(--flavorD-lime-bold-7); --rampD-8: var(--flavorD-lime-bold-8); --rampD-9: var(--flavorD-lime-bold-9); --rampD-10: var(--flavorD-lime-bold-10); --rampD-11: var(--flavorD-lime-bold-11); --rampD-12: var(--flavorD-lime-bold-12); } :root[data-hue="green"][data-sat="muted"] { --ramp-1: var(--flavor-green-muted-1); --ramp-2: var(--flavor-green-muted-2); --ramp-3: var(--flavor-green-muted-3); --ramp-4: var(--flavor-green-muted-4); --ramp-5: var(--flavor-green-muted-5); --ramp-6: var(--flavor-green-muted-6); --ramp-7: var(--flavor-green-muted-7); --ramp-8: var(--flavor-green-muted-8); --ramp-9: var(--flavor-green-muted-9); --ramp-10: var(--flavor-green-muted-10); --ramp-11: var(--flavor-green-muted-11); --ramp-12: var(--flavor-green-muted-12); --rampD-1: var(--flavorD-green-muted-1); --rampD-2: var(--flavorD-green-muted-2); --rampD-3: var(--flavorD-green-muted-3); --rampD-4: var(--flavorD-green-muted-4); --rampD-5: var(--flavorD-green-muted-5); --rampD-6: var(--flavorD-green-muted-6); --rampD-7: var(--flavorD-green-muted-7); --rampD-8: var(--flavorD-green-muted-8); --rampD-9: var(--flavorD-green-muted-9); --rampD-10: var(--flavorD-green-muted-10); --rampD-11: var(--flavorD-green-muted-11); --rampD-12: var(--flavorD-green-muted-12); } :root[data-hue="green"][data-sat="regular"] { --ramp-1: var(--flavor-green-regular-1); --ramp-2: var(--flavor-green-regular-2); --ramp-3: var(--flavor-green-regular-3); --ramp-4: var(--flavor-green-regular-4); --ramp-5: var(--flavor-green-regular-5); --ramp-6: var(--flavor-green-regular-6); --ramp-7: var(--flavor-green-regular-7); --ramp-8: var(--flavor-green-regular-8); --ramp-9: var(--flavor-green-regular-9); --ramp-10: var(--flavor-green-regular-10); --ramp-11: var(--flavor-green-regular-11); --ramp-12: var(--flavor-green-regular-12); --rampD-1: var(--flavorD-green-regular-1); --rampD-2: var(--flavorD-green-regular-2); --rampD-3: var(--flavorD-green-regular-3); --rampD-4: var(--flavorD-green-regular-4); --rampD-5: var(--flavorD-green-regular-5); --rampD-6: var(--flavorD-green-regular-6); --rampD-7: var(--flavorD-green-regular-7); --rampD-8: var(--flavorD-green-regular-8); --rampD-9: var(--flavorD-green-regular-9); --rampD-10: var(--flavorD-green-regular-10); --rampD-11: var(--flavorD-green-regular-11); --rampD-12: var(--flavorD-green-regular-12); } :root[data-hue="green"][data-sat="bold"] { --ramp-1: var(--flavor-green-bold-1); --ramp-2: var(--flavor-green-bold-2); --ramp-3: var(--flavor-green-bold-3); --ramp-4: var(--flavor-green-bold-4); --ramp-5: var(--flavor-green-bold-5); --ramp-6: var(--flavor-green-bold-6); --ramp-7: var(--flavor-green-bold-7); --ramp-8: var(--flavor-green-bold-8); --ramp-9: var(--flavor-green-bold-9); --ramp-10: var(--flavor-green-bold-10); --ramp-11: var(--flavor-green-bold-11); --ramp-12: var(--flavor-green-bold-12); --rampD-1: var(--flavorD-green-bold-1); --rampD-2: var(--flavorD-green-bold-2); --rampD-3: var(--flavorD-green-bold-3); --rampD-4: var(--flavorD-green-bold-4); --rampD-5: var(--flavorD-green-bold-5); --rampD-6: var(--flavorD-green-bold-6); --rampD-7: var(--flavorD-green-bold-7); --rampD-8: var(--flavorD-green-bold-8); --rampD-9: var(--flavorD-green-bold-9); --rampD-10: var(--flavorD-green-bold-10); --rampD-11: var(--flavorD-green-bold-11); --rampD-12: var(--flavorD-green-bold-12); } :root[data-hue="teal"][data-sat="muted"] { --ramp-1: var(--flavor-teal-muted-1); --ramp-2: var(--flavor-teal-muted-2); --ramp-3: var(--flavor-teal-muted-3); --ramp-4: var(--flavor-teal-muted-4); --ramp-5: var(--flavor-teal-muted-5); --ramp-6: var(--flavor-teal-muted-6); --ramp-7: var(--flavor-teal-muted-7); --ramp-8: var(--flavor-teal-muted-8); --ramp-9: var(--flavor-teal-muted-9); --ramp-10: var(--flavor-teal-muted-10); --ramp-11: var(--flavor-teal-muted-11); --ramp-12: var(--flavor-teal-muted-12); --rampD-1: var(--flavorD-teal-muted-1); --rampD-2: var(--flavorD-teal-muted-2); --rampD-3: var(--flavorD-teal-muted-3); --rampD-4: var(--flavorD-teal-muted-4); --rampD-5: var(--flavorD-teal-muted-5); --rampD-6: var(--flavorD-teal-muted-6); --rampD-7: var(--flavorD-teal-muted-7); --rampD-8: var(--flavorD-teal-muted-8); --rampD-9: var(--flavorD-teal-muted-9); --rampD-10: var(--flavorD-teal-muted-10); --rampD-11: var(--flavorD-teal-muted-11); --rampD-12: var(--flavorD-teal-muted-12); } :root[data-hue="teal"][data-sat="regular"] { --ramp-1: var(--flavor-teal-regular-1); --ramp-2: var(--flavor-teal-regular-2); --ramp-3: var(--flavor-teal-regular-3); --ramp-4: var(--flavor-teal-regular-4); --ramp-5: var(--flavor-teal-regular-5); --ramp-6: var(--flavor-teal-regular-6); --ramp-7: var(--flavor-teal-regular-7); --ramp-8: var(--flavor-teal-regular-8); --ramp-9: var(--flavor-teal-regular-9); --ramp-10: var(--flavor-teal-regular-10); --ramp-11: var(--flavor-teal-regular-11); --ramp-12: var(--flavor-teal-regular-12); --rampD-1: var(--flavorD-teal-regular-1); --rampD-2: var(--flavorD-teal-regular-2); --rampD-3: var(--flavorD-teal-regular-3); --rampD-4: var(--flavorD-teal-regular-4); --rampD-5: var(--flavorD-teal-regular-5); --rampD-6: var(--flavorD-teal-regular-6); --rampD-7: var(--flavorD-teal-regular-7); --rampD-8: var(--flavorD-teal-regular-8); --rampD-9: var(--flavorD-teal-regular-9); --rampD-10: var(--flavorD-teal-regular-10); --rampD-11: var(--flavorD-teal-regular-11); --rampD-12: var(--flavorD-teal-regular-12); } :root[data-hue="teal"][data-sat="bold"] { --ramp-1: var(--flavor-teal-bold-1); --ramp-2: var(--flavor-teal-bold-2); --ramp-3: var(--flavor-teal-bold-3); --ramp-4: var(--flavor-teal-bold-4); --ramp-5: var(--flavor-teal-bold-5); --ramp-6: var(--flavor-teal-bold-6); --ramp-7: var(--flavor-teal-bold-7); --ramp-8: var(--flavor-teal-bold-8); --ramp-9: var(--flavor-teal-bold-9); --ramp-10: var(--flavor-teal-bold-10); --ramp-11: var(--flavor-teal-bold-11); --ramp-12: var(--flavor-teal-bold-12); --rampD-1: var(--flavorD-teal-bold-1); --rampD-2: var(--flavorD-teal-bold-2); --rampD-3: var(--flavorD-teal-bold-3); --rampD-4: var(--flavorD-teal-bold-4); --rampD-5: var(--flavorD-teal-bold-5); --rampD-6: var(--flavorD-teal-bold-6); --rampD-7: var(--flavorD-teal-bold-7); --rampD-8: var(--flavorD-teal-bold-8); --rampD-9: var(--flavorD-teal-bold-9); --rampD-10: var(--flavorD-teal-bold-10); --rampD-11: var(--flavorD-teal-bold-11); --rampD-12: var(--flavorD-teal-bold-12); } :root[data-hue="cyan"][data-sat="muted"] { --ramp-1: var(--flavor-cyan-muted-1); --ramp-2: var(--flavor-cyan-muted-2); --ramp-3: var(--flavor-cyan-muted-3); --ramp-4: var(--flavor-cyan-muted-4); --ramp-5: var(--flavor-cyan-muted-5); --ramp-6: var(--flavor-cyan-muted-6); --ramp-7: var(--flavor-cyan-muted-7); --ramp-8: var(--flavor-cyan-muted-8); --ramp-9: var(--flavor-cyan-muted-9); --ramp-10: var(--flavor-cyan-muted-10); --ramp-11: var(--flavor-cyan-muted-11); --ramp-12: var(--flavor-cyan-muted-12); --rampD-1: var(--flavorD-cyan-muted-1); --rampD-2: var(--flavorD-cyan-muted-2); --rampD-3: var(--flavorD-cyan-muted-3); --rampD-4: var(--flavorD-cyan-muted-4); --rampD-5: var(--flavorD-cyan-muted-5); --rampD-6: var(--flavorD-cyan-muted-6); --rampD-7: var(--flavorD-cyan-muted-7); --rampD-8: var(--flavorD-cyan-muted-8); --rampD-9: var(--flavorD-cyan-muted-9); --rampD-10: var(--flavorD-cyan-muted-10); --rampD-11: var(--flavorD-cyan-muted-11); --rampD-12: var(--flavorD-cyan-muted-12); } :root[data-hue="cyan"][data-sat="regular"] { --ramp-1: var(--flavor-cyan-regular-1); --ramp-2: var(--flavor-cyan-regular-2); --ramp-3: var(--flavor-cyan-regular-3); --ramp-4: var(--flavor-cyan-regular-4); --ramp-5: var(--flavor-cyan-regular-5); --ramp-6: var(--flavor-cyan-regular-6); --ramp-7: var(--flavor-cyan-regular-7); --ramp-8: var(--flavor-cyan-regular-8); --ramp-9: var(--flavor-cyan-regular-9); --ramp-10: var(--flavor-cyan-regular-10); --ramp-11: var(--flavor-cyan-regular-11); --ramp-12: var(--flavor-cyan-regular-12); --rampD-1: var(--flavorD-cyan-regular-1); --rampD-2: var(--flavorD-cyan-regular-2); --rampD-3: var(--flavorD-cyan-regular-3); --rampD-4: var(--flavorD-cyan-regular-4); --rampD-5: var(--flavorD-cyan-regular-5); --rampD-6: var(--flavorD-cyan-regular-6); --rampD-7: var(--flavorD-cyan-regular-7); --rampD-8: var(--flavorD-cyan-regular-8); --rampD-9: var(--flavorD-cyan-regular-9); --rampD-10: var(--flavorD-cyan-regular-10); --rampD-11: var(--flavorD-cyan-regular-11); --rampD-12: var(--flavorD-cyan-regular-12); } :root[data-hue="cyan"][data-sat="bold"] { --ramp-1: var(--flavor-cyan-bold-1); --ramp-2: var(--flavor-cyan-bold-2); --ramp-3: var(--flavor-cyan-bold-3); --ramp-4: var(--flavor-cyan-bold-4); --ramp-5: var(--flavor-cyan-bold-5); --ramp-6: var(--flavor-cyan-bold-6); --ramp-7: var(--flavor-cyan-bold-7); --ramp-8: var(--flavor-cyan-bold-8); --ramp-9: var(--flavor-cyan-bold-9); --ramp-10: var(--flavor-cyan-bold-10); --ramp-11: var(--flavor-cyan-bold-11); --ramp-12: var(--flavor-cyan-bold-12); --rampD-1: var(--flavorD-cyan-bold-1); --rampD-2: var(--flavorD-cyan-bold-2); --rampD-3: var(--flavorD-cyan-bold-3); --rampD-4: var(--flavorD-cyan-bold-4); --rampD-5: var(--flavorD-cyan-bold-5); --rampD-6: var(--flavorD-cyan-bold-6); --rampD-7: var(--flavorD-cyan-bold-7); --rampD-8: var(--flavorD-cyan-bold-8); --rampD-9: var(--flavorD-cyan-bold-9); --rampD-10: var(--flavorD-cyan-bold-10); --rampD-11: var(--flavorD-cyan-bold-11); --rampD-12: var(--flavorD-cyan-bold-12); } :root[data-hue="blue"][data-sat="muted"] { --ramp-1: var(--flavor-blue-muted-1); --ramp-2: var(--flavor-blue-muted-2); --ramp-3: var(--flavor-blue-muted-3); --ramp-4: var(--flavor-blue-muted-4); --ramp-5: var(--flavor-blue-muted-5); --ramp-6: var(--flavor-blue-muted-6); --ramp-7: var(--flavor-blue-muted-7); --ramp-8: var(--flavor-blue-muted-8); --ramp-9: var(--flavor-blue-muted-9); --ramp-10: var(--flavor-blue-muted-10); --ramp-11: var(--flavor-blue-muted-11); --ramp-12: var(--flavor-blue-muted-12); --rampD-1: var(--flavorD-blue-muted-1); --rampD-2: var(--flavorD-blue-muted-2); --rampD-3: var(--flavorD-blue-muted-3); --rampD-4: var(--flavorD-blue-muted-4); --rampD-5: var(--flavorD-blue-muted-5); --rampD-6: var(--flavorD-blue-muted-6); --rampD-7: var(--flavorD-blue-muted-7); --rampD-8: var(--flavorD-blue-muted-8); --rampD-9: var(--flavorD-blue-muted-9); --rampD-10: var(--flavorD-blue-muted-10); --rampD-11: var(--flavorD-blue-muted-11); --rampD-12: var(--flavorD-blue-muted-12); } :root[data-hue="blue"][data-sat="regular"] { --ramp-1: var(--flavor-blue-regular-1); --ramp-2: var(--flavor-blue-regular-2); --ramp-3: var(--flavor-blue-regular-3); --ramp-4: var(--flavor-blue-regular-4); --ramp-5: var(--flavor-blue-regular-5); --ramp-6: var(--flavor-blue-regular-6); --ramp-7: var(--flavor-blue-regular-7); --ramp-8: var(--flavor-blue-regular-8); --ramp-9: var(--flavor-blue-regular-9); --ramp-10: var(--flavor-blue-regular-10); --ramp-11: var(--flavor-blue-regular-11); --ramp-12: var(--flavor-blue-regular-12); --rampD-1: var(--flavorD-blue-regular-1); --rampD-2: var(--flavorD-blue-regular-2); --rampD-3: var(--flavorD-blue-regular-3); --rampD-4: var(--flavorD-blue-regular-4); --rampD-5: var(--flavorD-blue-regular-5); --rampD-6: var(--flavorD-blue-regular-6); --rampD-7: var(--flavorD-blue-regular-7); --rampD-8: var(--flavorD-blue-regular-8); --rampD-9: var(--flavorD-blue-regular-9); --rampD-10: var(--flavorD-blue-regular-10); --rampD-11: var(--flavorD-blue-regular-11); --rampD-12: var(--flavorD-blue-regular-12); } :root[data-hue="blue"][data-sat="bold"] { --ramp-1: var(--flavor-blue-bold-1); --ramp-2: var(--flavor-blue-bold-2); --ramp-3: var(--flavor-blue-bold-3); --ramp-4: var(--flavor-blue-bold-4); --ramp-5: var(--flavor-blue-bold-5); --ramp-6: var(--flavor-blue-bold-6); --ramp-7: var(--flavor-blue-bold-7); --ramp-8: var(--flavor-blue-bold-8); --ramp-9: var(--flavor-blue-bold-9); --ramp-10: var(--flavor-blue-bold-10); --ramp-11: var(--flavor-blue-bold-11); --ramp-12: var(--flavor-blue-bold-12); --rampD-1: var(--flavorD-blue-bold-1); --rampD-2: var(--flavorD-blue-bold-2); --rampD-3: var(--flavorD-blue-bold-3); --rampD-4: var(--flavorD-blue-bold-4); --rampD-5: var(--flavorD-blue-bold-5); --rampD-6: var(--flavorD-blue-bold-6); --rampD-7: var(--flavorD-blue-bold-7); --rampD-8: var(--flavorD-blue-bold-8); --rampD-9: var(--flavorD-blue-bold-9); --rampD-10: var(--flavorD-blue-bold-10); --rampD-11: var(--flavorD-blue-bold-11); --rampD-12: var(--flavorD-blue-bold-12); } :root[data-hue="violet"][data-sat="muted"] { --ramp-1: var(--flavor-violet-muted-1); --ramp-2: var(--flavor-violet-muted-2); --ramp-3: var(--flavor-violet-muted-3); --ramp-4: var(--flavor-violet-muted-4); --ramp-5: var(--flavor-violet-muted-5); --ramp-6: var(--flavor-violet-muted-6); --ramp-7: var(--flavor-violet-muted-7); --ramp-8: var(--flavor-violet-muted-8); --ramp-9: var(--flavor-violet-muted-9); --ramp-10: var(--flavor-violet-muted-10); --ramp-11: var(--flavor-violet-muted-11); --ramp-12: var(--flavor-violet-muted-12); --rampD-1: var(--flavorD-violet-muted-1); --rampD-2: var(--flavorD-violet-muted-2); --rampD-3: var(--flavorD-violet-muted-3); --rampD-4: var(--flavorD-violet-muted-4); --rampD-5: var(--flavorD-violet-muted-5); --rampD-6: var(--flavorD-violet-muted-6); --rampD-7: var(--flavorD-violet-muted-7); --rampD-8: var(--flavorD-violet-muted-8); --rampD-9: var(--flavorD-violet-muted-9); --rampD-10: var(--flavorD-violet-muted-10); --rampD-11: var(--flavorD-violet-muted-11); --rampD-12: var(--flavorD-violet-muted-12); } :root[data-hue="violet"][data-sat="regular"] { --ramp-1: var(--flavor-violet-regular-1); --ramp-2: var(--flavor-violet-regular-2); --ramp-3: var(--flavor-violet-regular-3); --ramp-4: var(--flavor-violet-regular-4); --ramp-5: var(--flavor-violet-regular-5); --ramp-6: var(--flavor-violet-regular-6); --ramp-7: var(--flavor-violet-regular-7); --ramp-8: var(--flavor-violet-regular-8); --ramp-9: var(--flavor-violet-regular-9); --ramp-10: var(--flavor-violet-regular-10); --ramp-11: var(--flavor-violet-regular-11); --ramp-12: var(--flavor-violet-regular-12); --rampD-1: var(--flavorD-violet-regular-1); --rampD-2: var(--flavorD-violet-regular-2); --rampD-3: var(--flavorD-violet-regular-3); --rampD-4: var(--flavorD-violet-regular-4); --rampD-5: var(--flavorD-violet-regular-5); --rampD-6: var(--flavorD-violet-regular-6); --rampD-7: var(--flavorD-violet-regular-7); --rampD-8: var(--flavorD-violet-regular-8); --rampD-9: var(--flavorD-violet-regular-9); --rampD-10: var(--flavorD-violet-regular-10); --rampD-11: var(--flavorD-violet-regular-11); --rampD-12: var(--flavorD-violet-regular-12); } :root[data-hue="violet"][data-sat="bold"] { --ramp-1: var(--flavor-violet-bold-1); --ramp-2: var(--flavor-violet-bold-2); --ramp-3: var(--flavor-violet-bold-3); --ramp-4: var(--flavor-violet-bold-4); --ramp-5: var(--flavor-violet-bold-5); --ramp-6: var(--flavor-violet-bold-6); --ramp-7: var(--flavor-violet-bold-7); --ramp-8: var(--flavor-violet-bold-8); --ramp-9: var(--flavor-violet-bold-9); --ramp-10: var(--flavor-violet-bold-10); --ramp-11: var(--flavor-violet-bold-11); --ramp-12: var(--flavor-violet-bold-12); --rampD-1: var(--flavorD-violet-bold-1); --rampD-2: var(--flavorD-violet-bold-2); --rampD-3: var(--flavorD-violet-bold-3); --rampD-4: var(--flavorD-violet-bold-4); --rampD-5: var(--flavorD-violet-bold-5); --rampD-6: var(--flavorD-violet-bold-6); --rampD-7: var(--flavorD-violet-bold-7); --rampD-8: var(--flavorD-violet-bold-8); --rampD-9: var(--flavorD-violet-bold-9); --rampD-10: var(--flavorD-violet-bold-10); --rampD-11: var(--flavorD-violet-bold-11); --rampD-12: var(--flavorD-violet-bold-12); } :root[data-hue="purple"][data-sat="muted"] { --ramp-1: var(--flavor-purple-muted-1); --ramp-2: var(--flavor-purple-muted-2); --ramp-3: var(--flavor-purple-muted-3); --ramp-4: var(--flavor-purple-muted-4); --ramp-5: var(--flavor-purple-muted-5); --ramp-6: var(--flavor-purple-muted-6); --ramp-7: var(--flavor-purple-muted-7); --ramp-8: var(--flavor-purple-muted-8); --ramp-9: var(--flavor-purple-muted-9); --ramp-10: var(--flavor-purple-muted-10); --ramp-11: var(--flavor-purple-muted-11); --ramp-12: var(--flavor-purple-muted-12); --rampD-1: var(--flavorD-purple-muted-1); --rampD-2: var(--flavorD-purple-muted-2); --rampD-3: var(--flavorD-purple-muted-3); --rampD-4: var(--flavorD-purple-muted-4); --rampD-5: var(--flavorD-purple-muted-5); --rampD-6: var(--flavorD-purple-muted-6); --rampD-7: var(--flavorD-purple-muted-7); --rampD-8: var(--flavorD-purple-muted-8); --rampD-9: var(--flavorD-purple-muted-9); --rampD-10: var(--flavorD-purple-muted-10); --rampD-11: var(--flavorD-purple-muted-11); --rampD-12: var(--flavorD-purple-muted-12); } :root[data-hue="purple"][data-sat="regular"] { --ramp-1: var(--flavor-purple-regular-1); --ramp-2: var(--flavor-purple-regular-2); --ramp-3: var(--flavor-purple-regular-3); --ramp-4: var(--flavor-purple-regular-4); --ramp-5: var(--flavor-purple-regular-5); --ramp-6: var(--flavor-purple-regular-6); --ramp-7: var(--flavor-purple-regular-7); --ramp-8: var(--flavor-purple-regular-8); --ramp-9: var(--flavor-purple-regular-9); --ramp-10: var(--flavor-purple-regular-10); --ramp-11: var(--flavor-purple-regular-11); --ramp-12: var(--flavor-purple-regular-12); --rampD-1: var(--flavorD-purple-regular-1); --rampD-2: var(--flavorD-purple-regular-2); --rampD-3: var(--flavorD-purple-regular-3); --rampD-4: var(--flavorD-purple-regular-4); --rampD-5: var(--flavorD-purple-regular-5); --rampD-6: var(--flavorD-purple-regular-6); --rampD-7: var(--flavorD-purple-regular-7); --rampD-8: var(--flavorD-purple-regular-8); --rampD-9: var(--flavorD-purple-regular-9); --rampD-10: var(--flavorD-purple-regular-10); --rampD-11: var(--flavorD-purple-regular-11); --rampD-12: var(--flavorD-purple-regular-12); } :root[data-hue="purple"][data-sat="bold"] { --ramp-1: var(--flavor-purple-bold-1); --ramp-2: var(--flavor-purple-bold-2); --ramp-3: var(--flavor-purple-bold-3); --ramp-4: var(--flavor-purple-bold-4); --ramp-5: var(--flavor-purple-bold-5); --ramp-6: var(--flavor-purple-bold-6); --ramp-7: var(--flavor-purple-bold-7); --ramp-8: var(--flavor-purple-bold-8); --ramp-9: var(--flavor-purple-bold-9); --ramp-10: var(--flavor-purple-bold-10); --ramp-11: var(--flavor-purple-bold-11); --ramp-12: var(--flavor-purple-bold-12); --rampD-1: var(--flavorD-purple-bold-1); --rampD-2: var(--flavorD-purple-bold-2); --rampD-3: var(--flavorD-purple-bold-3); --rampD-4: var(--flavorD-purple-bold-4); --rampD-5: var(--flavorD-purple-bold-5); --rampD-6: var(--flavorD-purple-bold-6); --rampD-7: var(--flavorD-purple-bold-7); --rampD-8: var(--flavorD-purple-bold-8); --rampD-9: var(--flavorD-purple-bold-9); --rampD-10: var(--flavorD-purple-bold-10); --rampD-11: var(--flavorD-purple-bold-11); --rampD-12: var(--flavorD-purple-bold-12); } :root[data-hue="magenta"][data-sat="muted"] { --ramp-1: var(--flavor-magenta-muted-1); --ramp-2: var(--flavor-magenta-muted-2); --ramp-3: var(--flavor-magenta-muted-3); --ramp-4: var(--flavor-magenta-muted-4); --ramp-5: var(--flavor-magenta-muted-5); --ramp-6: var(--flavor-magenta-muted-6); --ramp-7: var(--flavor-magenta-muted-7); --ramp-8: var(--flavor-magenta-muted-8); --ramp-9: var(--flavor-magenta-muted-9); --ramp-10: var(--flavor-magenta-muted-10); --ramp-11: var(--flavor-magenta-muted-11); --ramp-12: var(--flavor-magenta-muted-12); --rampD-1: var(--flavorD-magenta-muted-1); --rampD-2: var(--flavorD-magenta-muted-2); --rampD-3: var(--flavorD-magenta-muted-3); --rampD-4: var(--flavorD-magenta-muted-4); --rampD-5: var(--flavorD-magenta-muted-5); --rampD-6: var(--flavorD-magenta-muted-6); --rampD-7: var(--flavorD-magenta-muted-7); --rampD-8: var(--flavorD-magenta-muted-8); --rampD-9: var(--flavorD-magenta-muted-9); --rampD-10: var(--flavorD-magenta-muted-10); --rampD-11: var(--flavorD-magenta-muted-11); --rampD-12: var(--flavorD-magenta-muted-12); } :root[data-hue="magenta"][data-sat="regular"] { --ramp-1: var(--flavor-magenta-regular-1); --ramp-2: var(--flavor-magenta-regular-2); --ramp-3: var(--flavor-magenta-regular-3); --ramp-4: var(--flavor-magenta-regular-4); --ramp-5: var(--flavor-magenta-regular-5); --ramp-6: var(--flavor-magenta-regular-6); --ramp-7: var(--flavor-magenta-regular-7); --ramp-8: var(--flavor-magenta-regular-8); --ramp-9: var(--flavor-magenta-regular-9); --ramp-10: var(--flavor-magenta-regular-10); --ramp-11: var(--flavor-magenta-regular-11); --ramp-12: var(--flavor-magenta-regular-12); --rampD-1: var(--flavorD-magenta-regular-1); --rampD-2: var(--flavorD-magenta-regular-2); --rampD-3: var(--flavorD-magenta-regular-3); --rampD-4: var(--flavorD-magenta-regular-4); --rampD-5: var(--flavorD-magenta-regular-5); --rampD-6: var(--flavorD-magenta-regular-6); --rampD-7: var(--flavorD-magenta-regular-7); --rampD-8: var(--flavorD-magenta-regular-8); --rampD-9: var(--flavorD-magenta-regular-9); --rampD-10: var(--flavorD-magenta-regular-10); --rampD-11: var(--flavorD-magenta-regular-11); --rampD-12: var(--flavorD-magenta-regular-12); } :root[data-hue="magenta"][data-sat="bold"] { --ramp-1: var(--flavor-magenta-bold-1); --ramp-2: var(--flavor-magenta-bold-2); --ramp-3: var(--flavor-magenta-bold-3); --ramp-4: var(--flavor-magenta-bold-4); --ramp-5: var(--flavor-magenta-bold-5); --ramp-6: var(--flavor-magenta-bold-6); --ramp-7: var(--flavor-magenta-bold-7); --ramp-8: var(--flavor-magenta-bold-8); --ramp-9: var(--flavor-magenta-bold-9); --ramp-10: var(--flavor-magenta-bold-10); --ramp-11: var(--flavor-magenta-bold-11); --ramp-12: var(--flavor-magenta-bold-12); --rampD-1: var(--flavorD-magenta-bold-1); --rampD-2: var(--flavorD-magenta-bold-2); --rampD-3: var(--flavorD-magenta-bold-3); --rampD-4: var(--flavorD-magenta-bold-4); --rampD-5: var(--flavorD-magenta-bold-5); --rampD-6: var(--flavorD-magenta-bold-6); --rampD-7: var(--flavorD-magenta-bold-7); --rampD-8: var(--flavorD-magenta-bold-8); --rampD-9: var(--flavorD-magenta-bold-9); --rampD-10: var(--flavorD-magenta-bold-10); --rampD-11: var(--flavorD-magenta-bold-11); --rampD-12: var(--flavorD-magenta-bold-12); } :root[data-sat="muted"], :root[data-sat="muted"][data-bg="primary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-2); --surface-2: var(--ramp-2); --surface-3: var(--ramp-1); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root, :root[data-bg="primary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-1); --surface-2: var(--ramp-1); --surface-3: var(--ramp-1); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-3); --accent-subtle-hover: var(--ramp-4); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-sat="bold"], :root[data-sat="bold"][data-bg="primary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-2); --surface-2: var(--ramp-2); --surface-3: var(--ramp-1); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="muted"], :root[data-contrast="aaa"][data-sat="muted"][data-bg="primary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-2); --surface-2: var(--ramp-2); --surface-3: var(--ramp-1); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-contrast="aaa"], :root[data-contrast="aaa"][data-bg="primary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-1); --surface-2: var(--ramp-1); --surface-3: var(--ramp-1); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-3); --accent-subtle-hover: var(--ramp-4); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="bold"], :root[data-contrast="aaa"][data-sat="bold"][data-bg="primary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-2); --surface-2: var(--ramp-2); --surface-3: var(--ramp-1); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-12); --text-tertiary: var(--ramp-12); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="muted"], :root[data-mode="dark"][data-sat="muted"][data-bg="primary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-3); --surface-2: var(--ramp-4); --surface-3: var(--ramp-5); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"], :root[data-mode="dark"][data-bg="primary"] { --surface-page: var(--ramp-1); --surface-1: var(--ramp-2); --surface-2: var(--ramp-3); --surface-3: var(--ramp-4); --surface-tint: var(--ramp-2); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-3); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="bold"], :root[data-mode="dark"][data-sat="bold"][data-bg="primary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-3); --surface-2: var(--ramp-4); --surface-3: var(--ramp-5); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-sat="muted"][data-bg="primary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-3); --surface-2: var(--ramp-4); --surface-3: var(--ramp-5); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"], :root[data-mode="dark"][data-contrast="aaa"][data-bg="primary"] { --surface-page: var(--ramp-1); --surface-1: var(--ramp-2); --surface-2: var(--ramp-3); --surface-3: var(--ramp-4); --surface-tint: var(--ramp-2); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-3); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-sat="bold"][data-bg="primary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-3); --surface-2: var(--ramp-4); --surface-3: var(--ramp-5); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-sat="muted"][data-bg="secondary"] { --surface-page: var(--ramp-4); --surface-1: var(--ramp-3); --surface-2: var(--ramp-3); --surface-3: var(--ramp-2); --surface-tint: var(--ramp-5); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-6); --border-default: var(--ramp-6); --border-strong: var(--ramp-10); --border-interactive: var(--ramp-10); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-10); --feedback-tonal: 0; } :root[data-bg="secondary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-2); --surface-2: var(--ramp-2); --surface-3: var(--ramp-2); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-sat="bold"][data-bg="secondary"] { --surface-page: var(--ramp-4); --surface-1: var(--ramp-3); --surface-2: var(--ramp-3); --surface-3: var(--ramp-2); --surface-tint: var(--ramp-5); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-6); --border-default: var(--ramp-6); --border-strong: var(--ramp-10); --border-interactive: var(--ramp-10); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-10); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="muted"][data-bg="secondary"] { --surface-page: var(--ramp-4); --surface-1: var(--ramp-3); --surface-2: var(--ramp-3); --surface-3: var(--ramp-2); --surface-tint: var(--ramp-5); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-12); --text-tertiary: var(--ramp-12); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-6); --border-default: var(--ramp-6); --border-strong: var(--ramp-10); --border-interactive: var(--ramp-10); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-10); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-bg="secondary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-2); --surface-2: var(--ramp-2); --surface-3: var(--ramp-2); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-12); --text-tertiary: var(--ramp-12); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-4); --accent-subtle-hover: var(--ramp-5); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="bold"][data-bg="secondary"] { --surface-page: var(--ramp-4); --surface-1: var(--ramp-3); --surface-2: var(--ramp-3); --surface-3: var(--ramp-2); --surface-tint: var(--ramp-5); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-12); --text-tertiary: var(--ramp-12); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-6); --border-default: var(--ramp-6); --border-strong: var(--ramp-10); --border-interactive: var(--ramp-10); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-10); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="muted"][data-bg="secondary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-4); --surface-2: var(--ramp-5); --surface-3: var(--ramp-6); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-6); --accent-subtle-hover: var(--ramp-7); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-bg="secondary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-3); --surface-2: var(--ramp-4); --surface-3: var(--ramp-5); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="bold"][data-bg="secondary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-4); --surface-2: var(--ramp-5); --surface-3: var(--ramp-6); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-10); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-6); --accent-subtle-hover: var(--ramp-7); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="muted"][data-bg="secondary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-4); --surface-2: var(--ramp-5); --surface-3: var(--ramp-6); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-6); --accent-subtle-hover: var(--ramp-7); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-bg="secondary"] { --surface-page: var(--ramp-2); --surface-1: var(--ramp-3); --surface-2: var(--ramp-4); --surface-3: var(--ramp-5); --surface-tint: var(--ramp-3); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-4); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-5); --accent-subtle-hover: var(--ramp-6); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="bold"][data-bg="secondary"] { --surface-page: var(--ramp-3); --surface-1: var(--ramp-4); --surface-2: var(--ramp-5); --surface-3: var(--ramp-6); --surface-tint: var(--ramp-4); --text-primary: var(--ramp-12); --text-secondary: var(--ramp-11); --text-tertiary: var(--ramp-11); --text-disabled: var(--ramp-7); --border-subtle: var(--ramp-5); --border-default: var(--ramp-6); --border-strong: var(--ramp-9); --border-interactive: var(--ramp-9); --accent-subtle: var(--ramp-6); --accent-subtle-hover: var(--ramp-7); --accent-border: var(--ramp-7); --focus-ring: var(--ramp-9); --feedback-tonal: 0; } :root[data-sat="muted"][data-bg="dark-primary"] { --surface-page: var(--rampD-2); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-3); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-4); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-bg="dark-primary"] { --surface-page: var(--rampD-1); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-2); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-3); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-sat="bold"][data-bg="dark-primary"] { --surface-page: var(--rampD-2); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-3); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-4); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="muted"][data-bg="dark-primary"] { --surface-page: var(--rampD-2); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-3); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-4); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-bg="dark-primary"] { --surface-page: var(--rampD-1); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-2); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-3); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="bold"][data-bg="dark-primary"] { --surface-page: var(--rampD-2); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-3); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-4); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="muted"][data-bg="dark-primary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-8); --border-interactive: var(--rampD-8); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-bg="dark-primary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-1); --surface-2: var(--rampD-2); --surface-3: var(--rampD-3); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-8); --border-interactive: var(--rampD-8); --accent-subtle: var(--rampD-3); --accent-subtle-hover: var(--rampD-4); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="bold"][data-bg="dark-primary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="muted"][data-bg="dark-primary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-8); --border-interactive: var(--rampD-8); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-bg="dark-primary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-1); --surface-2: var(--rampD-2); --surface-3: var(--rampD-3); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-8); --border-interactive: var(--rampD-8); --accent-subtle: var(--rampD-3); --accent-subtle-hover: var(--rampD-4); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="bold"][data-bg="dark-primary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-sat="muted"][data-bg="dark-secondary"] { --surface-page: var(--rampD-3); --surface-1: var(--rampD-4); --surface-2: var(--rampD-5); --surface-3: var(--rampD-6); --surface-tint: var(--rampD-4); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-5); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-6); --accent-subtle-hover: var(--rampD-7); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-bg="dark-secondary"] { --surface-page: var(--rampD-2); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-3); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-4); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-sat="bold"][data-bg="dark-secondary"] { --surface-page: var(--rampD-3); --surface-1: var(--rampD-4); --surface-2: var(--rampD-5); --surface-3: var(--rampD-6); --surface-tint: var(--rampD-4); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-5); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-6); --accent-subtle-hover: var(--rampD-7); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="muted"][data-bg="dark-secondary"] { --surface-page: var(--rampD-3); --surface-1: var(--rampD-4); --surface-2: var(--rampD-5); --surface-3: var(--rampD-6); --surface-tint: var(--rampD-4); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-5); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-6); --accent-subtle-hover: var(--rampD-7); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-bg="dark-secondary"] { --surface-page: var(--rampD-2); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-3); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-4); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-contrast="aaa"][data-sat="bold"][data-bg="dark-secondary"] { --surface-page: var(--rampD-3); --surface-1: var(--rampD-4); --surface-2: var(--rampD-5); --surface-3: var(--rampD-6); --surface-tint: var(--rampD-4); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-5); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-6); --accent-subtle-hover: var(--rampD-7); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="muted"][data-bg="dark-secondary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-bg="dark-secondary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-sat="bold"][data-bg="dark-secondary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="muted"][data-bg="dark-secondary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-bg="dark-secondary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-2); --surface-2: var(--rampD-3); --surface-3: var(--rampD-4); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-10); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-4); --accent-subtle-hover: var(--rampD-5); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-mode="dark"][data-contrast="aaa"][data-sat="bold"][data-bg="dark-secondary"] { --surface-page: var(--flavor-black); --surface-1: var(--rampD-3); --surface-2: var(--rampD-4); --surface-3: var(--rampD-5); --surface-tint: var(--rampD-1); --text-primary: var(--rampD-12); --text-secondary: var(--rampD-11); --text-tertiary: var(--rampD-11); --text-disabled: var(--rampD-7); --border-subtle: var(--rampD-2); --border-default: var(--rampD-6); --border-strong: var(--rampD-9); --border-interactive: var(--rampD-9); --accent-subtle: var(--rampD-5); --accent-subtle-hover: var(--rampD-6); --accent-border: var(--rampD-7); --focus-ring: var(--rampD-9); --feedback-tonal: 0; } :root[data-hue="neutral"][data-sat="muted"], :root[data-hue="neutral"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-muted-10); --accent-bg-hover: var(--flavor-neutral-muted-11); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-muted-11); --text-on-accent-subtle: var(--flavor-neutral-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="neutral"][data-sat="regular"], :root[data-hue="neutral"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-regular-10); --accent-bg-hover: var(--flavor-neutral-regular-11); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-regular-10); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="neutral"][data-sat="bold"], :root[data-hue="neutral"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-bold-10); --accent-bg-hover: var(--flavor-neutral-bold-11); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-bold-11); --text-on-accent-subtle: var(--flavor-neutral-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="red"][data-sat="muted"], :root[data-hue="red"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-red-muted-10); --accent-bg-hover: var(--flavor-red-muted-11); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-10); --text-on-accent-subtle: var(--flavor-red-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="red"][data-sat="regular"], :root[data-hue="red"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-red-regular-10); --accent-bg-hover: var(--flavor-red-regular-11); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-10); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="red"][data-sat="bold"], :root[data-hue="red"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-red-bold-10); --accent-bg-hover: var(--flavor-red-bold-11); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-10); --text-on-accent-subtle: var(--flavor-red-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="scarlet"][data-sat="muted"], :root[data-hue="scarlet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-muted-10); --accent-bg-hover: var(--flavor-scarlet-muted-11); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-10); --text-on-accent-subtle: var(--flavor-scarlet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="scarlet"][data-sat="regular"], :root[data-hue="scarlet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-regular-10); --accent-bg-hover: var(--flavor-scarlet-regular-11); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-10); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="scarlet"][data-sat="bold"], :root[data-hue="scarlet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-bold-10); --accent-bg-hover: var(--flavor-scarlet-bold-11); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-10); --text-on-accent-subtle: var(--flavor-scarlet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="orange"][data-sat="muted"], :root[data-hue="orange"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-orange-muted-10); --accent-bg-hover: var(--flavor-orange-muted-11); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-10); --text-on-accent-subtle: var(--flavor-orange-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="orange"][data-sat="regular"], :root[data-hue="orange"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-orange-regular-10); --accent-bg-hover: var(--flavor-orange-regular-11); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-10); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="orange"][data-sat="bold"], :root[data-hue="orange"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-orange-bold-10); --accent-bg-hover: var(--flavor-orange-bold-11); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-10); --text-on-accent-subtle: var(--flavor-orange-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="tangerine"][data-sat="muted"], :root[data-hue="tangerine"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-muted-10); --accent-bg-hover: var(--flavor-tangerine-muted-11); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-11); --text-on-accent-subtle: var(--flavor-tangerine-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="tangerine"][data-sat="regular"], :root[data-hue="tangerine"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-regular-10); --accent-bg-hover: var(--flavor-tangerine-regular-11); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-10); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="tangerine"][data-sat="bold"], :root[data-hue="tangerine"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-bold-10); --accent-bg-hover: var(--flavor-tangerine-bold-11); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-11); --text-on-accent-subtle: var(--flavor-tangerine-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="yellow"][data-sat="muted"], :root[data-hue="yellow"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-muted-10); --accent-bg-hover: var(--flavor-yellow-muted-11); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-11); --text-on-accent-subtle: var(--flavor-yellow-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="yellow"][data-sat="regular"], :root[data-hue="yellow"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-regular-10); --accent-bg-hover: var(--flavor-yellow-regular-11); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-10); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="yellow"][data-sat="bold"], :root[data-hue="yellow"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-bold-10); --accent-bg-hover: var(--flavor-yellow-bold-11); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-11); --text-on-accent-subtle: var(--flavor-yellow-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="lime"][data-sat="muted"], :root[data-hue="lime"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-lime-muted-10); --accent-bg-hover: var(--flavor-lime-muted-11); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-11); --text-on-accent-subtle: var(--flavor-lime-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="lime"][data-sat="regular"], :root[data-hue="lime"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-lime-regular-10); --accent-bg-hover: var(--flavor-lime-regular-11); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-10); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="lime"][data-sat="bold"], :root[data-hue="lime"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-lime-bold-10); --accent-bg-hover: var(--flavor-lime-bold-11); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-11); --text-on-accent-subtle: var(--flavor-lime-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="green"][data-sat="muted"], :root[data-hue="green"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-green-muted-10); --accent-bg-hover: var(--flavor-green-muted-11); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-11); --text-on-accent-subtle: var(--flavor-green-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="green"][data-sat="regular"], :root[data-hue="green"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-green-regular-10); --accent-bg-hover: var(--flavor-green-regular-11); --accent-bg-active: var(--flavor-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-10); --text-on-accent-subtle: var(--flavor-green-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="green"][data-sat="bold"], :root[data-hue="green"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-green-bold-10); --accent-bg-hover: var(--flavor-green-bold-11); --accent-bg-active: var(--flavor-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-11); --text-on-accent-subtle: var(--flavor-green-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="teal"][data-sat="muted"], :root[data-hue="teal"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-teal-muted-10); --accent-bg-hover: var(--flavor-teal-muted-11); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-11); --text-on-accent-subtle: var(--flavor-teal-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="teal"][data-sat="regular"], :root[data-hue="teal"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-teal-regular-10); --accent-bg-hover: var(--flavor-teal-regular-11); --accent-bg-active: var(--flavor-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-10); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="teal"][data-sat="bold"], :root[data-hue="teal"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-teal-bold-10); --accent-bg-hover: var(--flavor-teal-bold-11); --accent-bg-active: var(--flavor-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-11); --text-on-accent-subtle: var(--flavor-teal-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="cyan"][data-sat="muted"], :root[data-hue="cyan"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-muted-10); --accent-bg-hover: var(--flavor-cyan-muted-11); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-11); --text-on-accent-subtle: var(--flavor-cyan-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="cyan"][data-sat="regular"], :root[data-hue="cyan"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-regular-10); --accent-bg-hover: var(--flavor-cyan-regular-11); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-10); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="cyan"][data-sat="bold"], :root[data-hue="cyan"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-bold-10); --accent-bg-hover: var(--flavor-cyan-bold-11); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-11); --text-on-accent-subtle: var(--flavor-cyan-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="blue"][data-sat="muted"], :root[data-hue="blue"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="blue"][data-sat="regular"], :root[data-hue="blue"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-10); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="blue"][data-sat="bold"], :root[data-hue="blue"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-10); --text-on-accent-subtle: var(--flavor-blue-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="violet"][data-sat="muted"], :root[data-hue="violet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-violet-muted-10); --accent-bg-hover: var(--flavor-violet-muted-11); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-10); --text-on-accent-subtle: var(--flavor-violet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="violet"][data-sat="regular"], :root[data-hue="violet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-violet-regular-10); --accent-bg-hover: var(--flavor-violet-regular-11); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-10); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="violet"][data-sat="bold"], :root[data-hue="violet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-violet-bold-10); --accent-bg-hover: var(--flavor-violet-bold-11); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-10); --text-on-accent-subtle: var(--flavor-violet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="purple"][data-sat="muted"], :root[data-hue="purple"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-purple-muted-10); --accent-bg-hover: var(--flavor-purple-muted-11); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-10); --text-on-accent-subtle: var(--flavor-purple-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="purple"][data-sat="regular"], :root[data-hue="purple"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-purple-regular-10); --accent-bg-hover: var(--flavor-purple-regular-11); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-10); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="purple"][data-sat="bold"], :root[data-hue="purple"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-purple-bold-10); --accent-bg-hover: var(--flavor-purple-bold-11); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-10); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="magenta"][data-sat="muted"], :root[data-hue="magenta"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-10); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="magenta"][data-sat="regular"], :root[data-hue="magenta"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-10); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="magenta"][data-sat="bold"], :root[data-hue="magenta"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-10); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="brand"][data-sat="muted"], :root[data-hue="brand"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-10); --secondary-bg-hover: var(--flavor-orange-muted-11); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-10); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-hue="brand"][data-sat="regular"], :root[data-hue="brand"][data-sat="regular"][data-bg="primary"], :root:not([data-hue]), :root:not([data-hue])[data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-10); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-10); --secondary-bg-hover: var(--flavor-orange-regular-11); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-10); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-hue="brand"][data-sat="bold"], :root[data-hue="brand"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-10); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-10); --secondary-bg-hover: var(--flavor-orange-bold-11); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-10); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-hue="brand2"][data-sat="muted"], :root[data-hue="brand2"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-10); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-9); --secondary-bg: var(--flavor-cyan-muted-10); --secondary-bg-hover: var(--flavor-cyan-muted-11); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-9); --secondary-text: var(--flavor-cyan-muted-11); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-hue="brand2"][data-sat="regular"], :root[data-hue="brand2"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-10); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-10); --secondary-bg-hover: var(--flavor-cyan-regular-11); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-9); --secondary-text: var(--flavor-cyan-regular-10); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-hue="brand2"][data-sat="bold"], :root[data-hue="brand2"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-10); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-9); --secondary-bg: var(--flavor-cyan-bold-10); --secondary-bg-hover: var(--flavor-cyan-bold-11); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-9); --secondary-text: var(--flavor-cyan-bold-11); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-muted-11); --accent-bg-hover: var(--flavor-neutral-muted-12); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-muted-11); --text-on-accent-subtle: var(--flavor-neutral-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-regular-11); --accent-bg-hover: var(--flavor-neutral-regular-12); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-regular-11); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-bold-11); --accent-bg-hover: var(--flavor-neutral-bold-12); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-bold-11); --text-on-accent-subtle: var(--flavor-neutral-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-red-muted-11); --accent-bg-hover: var(--flavor-red-muted-12); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-11); --text-on-accent-subtle: var(--flavor-red-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-red-regular-11); --accent-bg-hover: var(--flavor-red-regular-12); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-11); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-red-bold-11); --accent-bg-hover: var(--flavor-red-bold-12); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-11); --text-on-accent-subtle: var(--flavor-red-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-muted-11); --accent-bg-hover: var(--flavor-scarlet-muted-12); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-11); --text-on-accent-subtle: var(--flavor-scarlet-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-regular-11); --accent-bg-hover: var(--flavor-scarlet-regular-12); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-11); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-bold-11); --accent-bg-hover: var(--flavor-scarlet-bold-12); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-11); --text-on-accent-subtle: var(--flavor-scarlet-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-orange-muted-11); --accent-bg-hover: var(--flavor-orange-muted-12); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-11); --text-on-accent-subtle: var(--flavor-orange-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-orange-regular-11); --accent-bg-hover: var(--flavor-orange-regular-12); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-11); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-orange-bold-11); --accent-bg-hover: var(--flavor-orange-bold-12); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-11); --text-on-accent-subtle: var(--flavor-orange-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-muted-11); --accent-bg-hover: var(--flavor-tangerine-muted-12); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-11); --text-on-accent-subtle: var(--flavor-tangerine-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-regular-11); --accent-bg-hover: var(--flavor-tangerine-regular-12); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-11); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-bold-11); --accent-bg-hover: var(--flavor-tangerine-bold-12); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-11); --text-on-accent-subtle: var(--flavor-tangerine-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-muted-11); --accent-bg-hover: var(--flavor-yellow-muted-12); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-11); --text-on-accent-subtle: var(--flavor-yellow-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-regular-11); --accent-bg-hover: var(--flavor-yellow-regular-12); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-11); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-bold-11); --accent-bg-hover: var(--flavor-yellow-bold-12); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-11); --text-on-accent-subtle: var(--flavor-yellow-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-lime-muted-11); --accent-bg-hover: var(--flavor-lime-muted-12); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-11); --text-on-accent-subtle: var(--flavor-lime-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-lime-regular-11); --accent-bg-hover: var(--flavor-lime-regular-12); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-11); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-lime-bold-11); --accent-bg-hover: var(--flavor-lime-bold-12); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-11); --text-on-accent-subtle: var(--flavor-lime-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-green-muted-11); --accent-bg-hover: var(--flavor-green-muted-12); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-11); --text-on-accent-subtle: var(--flavor-green-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-green-regular-11); --accent-bg-hover: var(--flavor-green-regular-12); --accent-bg-active: var(--flavor-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-11); --text-on-accent-subtle: var(--flavor-green-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-green-bold-11); --accent-bg-hover: var(--flavor-green-bold-12); --accent-bg-active: var(--flavor-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-12); --text-on-accent-subtle: var(--flavor-green-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-teal-muted-11); --accent-bg-hover: var(--flavor-teal-muted-12); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-11); --text-on-accent-subtle: var(--flavor-teal-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-teal-regular-11); --accent-bg-hover: var(--flavor-teal-regular-12); --accent-bg-active: var(--flavor-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-11); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-teal-bold-11); --accent-bg-hover: var(--flavor-teal-bold-12); --accent-bg-active: var(--flavor-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-11); --text-on-accent-subtle: var(--flavor-teal-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-muted-11); --accent-bg-hover: var(--flavor-cyan-muted-12); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-11); --text-on-accent-subtle: var(--flavor-cyan-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-regular-11); --accent-bg-hover: var(--flavor-cyan-regular-12); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-11); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-bold-11); --accent-bg-hover: var(--flavor-cyan-bold-12); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-11); --text-on-accent-subtle: var(--flavor-cyan-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-11); --accent-bg-hover: var(--flavor-blue-muted-12); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-11); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-11); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-violet-muted-11); --accent-bg-hover: var(--flavor-violet-muted-12); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-11); --text-on-accent-subtle: var(--flavor-violet-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-violet-regular-11); --accent-bg-hover: var(--flavor-violet-regular-12); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-11); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-violet-bold-11); --accent-bg-hover: var(--flavor-violet-bold-12); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-11); --text-on-accent-subtle: var(--flavor-violet-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-purple-muted-11); --accent-bg-hover: var(--flavor-purple-muted-12); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-11); --text-on-accent-subtle: var(--flavor-purple-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-purple-regular-11); --accent-bg-hover: var(--flavor-purple-regular-12); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-11); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-purple-bold-11); --accent-bg-hover: var(--flavor-purple-bold-12); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-11); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-11); --accent-bg-hover: var(--flavor-magenta-muted-12); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-11); --accent-bg-hover: var(--flavor-blue-muted-12); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-11); --secondary-bg-hover: var(--flavor-orange-muted-12); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-11); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="primary"], :root[data-contrast="aaa"]:not([data-hue]), :root[data-contrast="aaa"]:not([data-hue])[data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-11); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-11); --secondary-bg-hover: var(--flavor-orange-regular-12); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-11); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-11); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-11); --secondary-bg-hover: var(--flavor-orange-bold-12); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-11); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"], :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-11); --accent-bg-hover: var(--flavor-magenta-muted-12); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-9); --secondary-bg: var(--flavor-cyan-muted-11); --secondary-bg-hover: var(--flavor-cyan-muted-12); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-9); --secondary-text: var(--flavor-cyan-muted-11); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"], :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-11); --secondary-bg-hover: var(--flavor-cyan-regular-12); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-9); --secondary-text: var(--flavor-cyan-regular-11); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"], :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-9); --secondary-bg: var(--flavor-cyan-bold-11); --secondary-bg-hover: var(--flavor-cyan-bold-12); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-9); --secondary-text: var(--flavor-cyan-bold-11); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"], :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-muted-9); --accent-bg-hover: var(--flavor-neutral-muted-10); --accent-bg-active: var(--flavor-neutral-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-muted-9); --text-on-accent-subtle: var(--flavor-neutral-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"], :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-regular-9); --accent-bg-hover: var(--flavor-neutral-regular-10); --accent-bg-active: var(--flavor-neutral-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-regular-9); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"], :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-bold-9); --accent-bg-hover: var(--flavor-neutral-bold-10); --accent-bg-active: var(--flavor-neutral-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-bold-9); --text-on-accent-subtle: var(--flavor-neutral-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="red"][data-sat="muted"], :root[data-mode="dark"][data-hue="red"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-red-muted-9); --accent-bg-hover: var(--flavor-red-muted-10); --accent-bg-active: var(--flavor-red-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-muted-9); --text-on-accent-subtle: var(--flavor-red-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="red"][data-sat="regular"], :root[data-mode="dark"][data-hue="red"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-red-regular-9); --accent-bg-hover: var(--flavor-red-regular-10); --accent-bg-active: var(--flavor-red-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-regular-9); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="red"][data-sat="bold"], :root[data-mode="dark"][data-hue="red"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-red-bold-9); --accent-bg-hover: var(--flavor-red-bold-10); --accent-bg-active: var(--flavor-red-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-bold-9); --text-on-accent-subtle: var(--flavor-red-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"], :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-muted-9); --accent-bg-hover: var(--flavor-scarlet-muted-10); --accent-bg-active: var(--flavor-scarlet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-muted-9); --text-on-accent-subtle: var(--flavor-scarlet-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"], :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-regular-9); --accent-bg-hover: var(--flavor-scarlet-regular-10); --accent-bg-active: var(--flavor-scarlet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-regular-9); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"], :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-bold-9); --accent-bg-hover: var(--flavor-scarlet-bold-10); --accent-bg-active: var(--flavor-scarlet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-bold-9); --text-on-accent-subtle: var(--flavor-scarlet-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="muted"], :root[data-mode="dark"][data-hue="orange"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-orange-muted-9); --accent-bg-hover: var(--flavor-orange-muted-10); --accent-bg-active: var(--flavor-orange-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-muted-9); --text-on-accent-subtle: var(--flavor-orange-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="regular"], :root[data-mode="dark"][data-hue="orange"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-orange-regular-9); --accent-bg-hover: var(--flavor-orange-regular-10); --accent-bg-active: var(--flavor-orange-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-regular-9); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="bold"], :root[data-mode="dark"][data-hue="orange"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-orange-bold-9); --accent-bg-hover: var(--flavor-orange-bold-10); --accent-bg-active: var(--flavor-orange-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-bold-9); --text-on-accent-subtle: var(--flavor-orange-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"], :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-muted-9); --accent-bg-hover: var(--flavor-tangerine-muted-10); --accent-bg-active: var(--flavor-tangerine-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-muted-9); --text-on-accent-subtle: var(--flavor-tangerine-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"], :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-regular-9); --accent-bg-hover: var(--flavor-tangerine-regular-10); --accent-bg-active: var(--flavor-tangerine-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-regular-9); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"], :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-bold-9); --accent-bg-hover: var(--flavor-tangerine-bold-10); --accent-bg-active: var(--flavor-tangerine-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-bold-9); --text-on-accent-subtle: var(--flavor-tangerine-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"], :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-muted-9); --accent-bg-hover: var(--flavor-yellow-muted-10); --accent-bg-active: var(--flavor-yellow-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-muted-9); --text-on-accent-subtle: var(--flavor-yellow-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"], :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-regular-9); --accent-bg-hover: var(--flavor-yellow-regular-10); --accent-bg-active: var(--flavor-yellow-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-regular-9); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"], :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-bold-9); --accent-bg-hover: var(--flavor-yellow-bold-10); --accent-bg-active: var(--flavor-yellow-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-bold-9); --text-on-accent-subtle: var(--flavor-yellow-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="muted"], :root[data-mode="dark"][data-hue="lime"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-lime-muted-9); --accent-bg-hover: var(--flavor-lime-muted-10); --accent-bg-active: var(--flavor-lime-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-muted-9); --text-on-accent-subtle: var(--flavor-lime-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="regular"], :root[data-mode="dark"][data-hue="lime"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-lime-regular-9); --accent-bg-hover: var(--flavor-lime-regular-10); --accent-bg-active: var(--flavor-lime-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-regular-9); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="bold"], :root[data-mode="dark"][data-hue="lime"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-lime-bold-9); --accent-bg-hover: var(--flavor-lime-bold-10); --accent-bg-active: var(--flavor-lime-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-bold-9); --text-on-accent-subtle: var(--flavor-lime-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="green"][data-sat="muted"], :root[data-mode="dark"][data-hue="green"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-green-muted-9); --accent-bg-hover: var(--flavor-green-muted-10); --accent-bg-active: var(--flavor-green-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-muted-9); --text-on-accent-subtle: var(--flavor-green-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="green"][data-sat="regular"], :root[data-mode="dark"][data-hue="green"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-green-regular-9); --accent-bg-hover: var(--flavor-green-regular-10); --accent-bg-active: var(--flavor-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-regular-9); --text-on-accent-subtle: var(--flavor-green-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="green"][data-sat="bold"], :root[data-mode="dark"][data-hue="green"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-green-bold-9); --accent-bg-hover: var(--flavor-green-bold-10); --accent-bg-active: var(--flavor-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-bold-9); --text-on-accent-subtle: var(--flavor-green-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="muted"], :root[data-mode="dark"][data-hue="teal"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-teal-muted-9); --accent-bg-hover: var(--flavor-teal-muted-10); --accent-bg-active: var(--flavor-teal-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-muted-9); --text-on-accent-subtle: var(--flavor-teal-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="regular"], :root[data-mode="dark"][data-hue="teal"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-teal-regular-9); --accent-bg-hover: var(--flavor-teal-regular-10); --accent-bg-active: var(--flavor-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-regular-9); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="bold"], :root[data-mode="dark"][data-hue="teal"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-teal-bold-9); --accent-bg-hover: var(--flavor-teal-bold-10); --accent-bg-active: var(--flavor-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-bold-9); --text-on-accent-subtle: var(--flavor-teal-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"], :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-muted-9); --accent-bg-hover: var(--flavor-cyan-muted-10); --accent-bg-active: var(--flavor-cyan-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-muted-9); --text-on-accent-subtle: var(--flavor-cyan-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"], :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-regular-9); --accent-bg-hover: var(--flavor-cyan-regular-10); --accent-bg-active: var(--flavor-cyan-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-regular-9); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"], :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-bold-9); --accent-bg-hover: var(--flavor-cyan-bold-10); --accent-bg-active: var(--flavor-cyan-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-bold-9); --text-on-accent-subtle: var(--flavor-cyan-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="muted"], :root[data-mode="dark"][data-hue="blue"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-9); --accent-bg-hover: var(--flavor-blue-muted-10); --accent-bg-active: var(--flavor-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-9); --text-on-accent-subtle: var(--flavor-blue-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="regular"], :root[data-mode="dark"][data-hue="blue"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-9); --accent-bg-hover: var(--flavor-blue-regular-10); --accent-bg-active: var(--flavor-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-9); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="bold"], :root[data-mode="dark"][data-hue="blue"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-9); --accent-bg-hover: var(--flavor-blue-bold-10); --accent-bg-active: var(--flavor-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-9); --text-on-accent-subtle: var(--flavor-blue-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="muted"], :root[data-mode="dark"][data-hue="violet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-violet-muted-9); --accent-bg-hover: var(--flavor-violet-muted-10); --accent-bg-active: var(--flavor-violet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-muted-9); --text-on-accent-subtle: var(--flavor-violet-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="regular"], :root[data-mode="dark"][data-hue="violet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-violet-regular-9); --accent-bg-hover: var(--flavor-violet-regular-10); --accent-bg-active: var(--flavor-violet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-regular-9); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="bold"], :root[data-mode="dark"][data-hue="violet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-violet-bold-9); --accent-bg-hover: var(--flavor-violet-bold-10); --accent-bg-active: var(--flavor-violet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-bold-9); --text-on-accent-subtle: var(--flavor-violet-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="muted"], :root[data-mode="dark"][data-hue="purple"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-purple-muted-9); --accent-bg-hover: var(--flavor-purple-muted-10); --accent-bg-active: var(--flavor-purple-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-muted-9); --text-on-accent-subtle: var(--flavor-purple-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="regular"], :root[data-mode="dark"][data-hue="purple"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-purple-regular-9); --accent-bg-hover: var(--flavor-purple-regular-10); --accent-bg-active: var(--flavor-purple-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-regular-9); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="bold"], :root[data-mode="dark"][data-hue="purple"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-purple-bold-9); --accent-bg-hover: var(--flavor-purple-bold-10); --accent-bg-active: var(--flavor-purple-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-bold-9); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"], :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-9); --accent-bg-hover: var(--flavor-magenta-muted-10); --accent-bg-active: var(--flavor-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-9); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-9); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"], :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-9); --accent-bg-hover: var(--flavor-magenta-regular-10); --accent-bg-active: var(--flavor-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-9); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"], :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-9); --accent-bg-hover: var(--flavor-magenta-bold-10); --accent-bg-active: var(--flavor-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-9); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="muted"], :root[data-mode="dark"][data-hue="brand"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-9); --accent-bg-hover: var(--flavor-blue-muted-10); --accent-bg-active: var(--flavor-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-9); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-9); --secondary-bg-hover: var(--flavor-orange-muted-10); --secondary-bg-active: var(--flavor-orange-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-9); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="regular"], :root[data-mode="dark"][data-hue="brand"][data-sat="regular"][data-bg="primary"], :root[data-mode="dark"]:not([data-hue]), :root[data-mode="dark"]:not([data-hue])[data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-9); --accent-bg-hover: var(--flavor-blue-regular-10); --accent-bg-active: var(--flavor-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-9); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-9); --secondary-bg-hover: var(--flavor-orange-regular-10); --secondary-bg-active: var(--flavor-orange-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-9); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="bold"], :root[data-mode="dark"][data-hue="brand"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-9); --accent-bg-hover: var(--flavor-blue-bold-10); --accent-bg-active: var(--flavor-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-9); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-9); --secondary-bg-hover: var(--flavor-orange-bold-10); --secondary-bg-active: var(--flavor-orange-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-9); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"], :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-9); --accent-bg-hover: var(--flavor-magenta-muted-10); --accent-bg-active: var(--flavor-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-9); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-9); --secondary-bg: var(--flavor-cyan-muted-9); --secondary-bg-hover: var(--flavor-cyan-muted-10); --secondary-bg-active: var(--flavor-cyan-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-9); --secondary-text: var(--flavor-cyan-muted-9); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"], :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-9); --accent-bg-hover: var(--flavor-magenta-regular-10); --accent-bg-active: var(--flavor-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-9); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-9); --secondary-bg-hover: var(--flavor-cyan-regular-10); --secondary-bg-active: var(--flavor-cyan-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-8); --secondary-text: var(--flavor-cyan-regular-9); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"], :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-9); --accent-bg-hover: var(--flavor-magenta-bold-10); --accent-bg-active: var(--flavor-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-10); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-9); --secondary-bg: var(--flavor-cyan-bold-9); --secondary-bg-hover: var(--flavor-cyan-bold-10); --secondary-bg-active: var(--flavor-cyan-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-9); --secondary-text: var(--flavor-cyan-bold-9); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-muted-10); --accent-bg-hover: var(--flavor-neutral-muted-11); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-muted-11); --text-on-accent-subtle: var(--flavor-neutral-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-regular-10); --accent-bg-hover: var(--flavor-neutral-regular-11); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-regular-10); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-neutral-bold-10); --accent-bg-hover: var(--flavor-neutral-bold-11); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-bold-11); --text-on-accent-subtle: var(--flavor-neutral-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-red-muted-10); --accent-bg-hover: var(--flavor-red-muted-11); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-muted-11); --text-on-accent-subtle: var(--flavor-red-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-red-regular-10); --accent-bg-hover: var(--flavor-red-regular-11); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-regular-10); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-red-bold-10); --accent-bg-hover: var(--flavor-red-bold-11); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-bold-11); --text-on-accent-subtle: var(--flavor-red-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-muted-10); --accent-bg-hover: var(--flavor-scarlet-muted-11); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-muted-11); --text-on-accent-subtle: var(--flavor-scarlet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-regular-10); --accent-bg-hover: var(--flavor-scarlet-regular-11); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-regular-10); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-scarlet-bold-10); --accent-bg-hover: var(--flavor-scarlet-bold-11); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-bold-11); --text-on-accent-subtle: var(--flavor-scarlet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-orange-muted-10); --accent-bg-hover: var(--flavor-orange-muted-11); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-muted-11); --text-on-accent-subtle: var(--flavor-orange-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-orange-regular-10); --accent-bg-hover: var(--flavor-orange-regular-11); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-regular-10); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-orange-bold-10); --accent-bg-hover: var(--flavor-orange-bold-11); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-bold-11); --text-on-accent-subtle: var(--flavor-orange-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-muted-10); --accent-bg-hover: var(--flavor-tangerine-muted-11); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-muted-11); --text-on-accent-subtle: var(--flavor-tangerine-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-regular-10); --accent-bg-hover: var(--flavor-tangerine-regular-11); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-regular-10); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-tangerine-bold-10); --accent-bg-hover: var(--flavor-tangerine-bold-11); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-bold-11); --text-on-accent-subtle: var(--flavor-tangerine-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-muted-10); --accent-bg-hover: var(--flavor-yellow-muted-11); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-muted-11); --text-on-accent-subtle: var(--flavor-yellow-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-regular-10); --accent-bg-hover: var(--flavor-yellow-regular-11); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-regular-10); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-yellow-bold-10); --accent-bg-hover: var(--flavor-yellow-bold-11); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-bold-11); --text-on-accent-subtle: var(--flavor-yellow-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-lime-muted-10); --accent-bg-hover: var(--flavor-lime-muted-11); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-muted-11); --text-on-accent-subtle: var(--flavor-lime-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-lime-regular-10); --accent-bg-hover: var(--flavor-lime-regular-11); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-regular-10); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-lime-bold-10); --accent-bg-hover: var(--flavor-lime-bold-11); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-bold-11); --text-on-accent-subtle: var(--flavor-lime-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-green-muted-10); --accent-bg-hover: var(--flavor-green-muted-11); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-muted-11); --text-on-accent-subtle: var(--flavor-green-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-green-regular-9); --accent-bg-hover: var(--flavor-green-regular-10); --accent-bg-active: var(--flavor-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-regular-10); --text-on-accent-subtle: var(--flavor-green-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-green-bold-9); --accent-bg-hover: var(--flavor-green-bold-10); --accent-bg-active: var(--flavor-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-bold-11); --text-on-accent-subtle: var(--flavor-green-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-teal-muted-10); --accent-bg-hover: var(--flavor-teal-muted-11); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-muted-11); --text-on-accent-subtle: var(--flavor-teal-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-teal-regular-9); --accent-bg-hover: var(--flavor-teal-regular-10); --accent-bg-active: var(--flavor-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-regular-10); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-teal-bold-9); --accent-bg-hover: var(--flavor-teal-bold-10); --accent-bg-active: var(--flavor-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-bold-11); --text-on-accent-subtle: var(--flavor-teal-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-muted-10); --accent-bg-hover: var(--flavor-cyan-muted-11); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-muted-11); --text-on-accent-subtle: var(--flavor-cyan-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-regular-10); --accent-bg-hover: var(--flavor-cyan-regular-11); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-regular-10); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-cyan-bold-10); --accent-bg-hover: var(--flavor-cyan-bold-11); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-bold-11); --text-on-accent-subtle: var(--flavor-cyan-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-10); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-violet-muted-10); --accent-bg-hover: var(--flavor-violet-muted-11); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-muted-11); --text-on-accent-subtle: var(--flavor-violet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-violet-regular-10); --accent-bg-hover: var(--flavor-violet-regular-11); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-regular-10); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-violet-bold-10); --accent-bg-hover: var(--flavor-violet-bold-11); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-bold-11); --text-on-accent-subtle: var(--flavor-violet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-purple-muted-10); --accent-bg-hover: var(--flavor-purple-muted-11); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-muted-11); --text-on-accent-subtle: var(--flavor-purple-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-purple-regular-10); --accent-bg-hover: var(--flavor-purple-regular-11); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-regular-10); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-purple-bold-10); --accent-bg-hover: var(--flavor-purple-bold-11); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-bold-11); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-10); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-8); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-10); --secondary-bg-hover: var(--flavor-orange-muted-11); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-11); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="primary"], :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue]), :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue])[data-bg="primary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-10); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-10); --secondary-bg-hover: var(--flavor-orange-regular-11); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-10); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-10); --secondary-bg-hover: var(--flavor-orange-bold-11); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-11); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-9); --secondary-bg: var(--flavor-cyan-muted-10); --secondary-bg-hover: var(--flavor-cyan-muted-11); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-9); --secondary-text: var(--flavor-cyan-muted-11); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-10); --secondary-bg-hover: var(--flavor-cyan-regular-11); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-8); --secondary-text: var(--flavor-cyan-regular-10); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"], :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="primary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-9); --secondary-bg: var(--flavor-cyan-bold-10); --secondary-bg-hover: var(--flavor-cyan-bold-11); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-9); --secondary-text: var(--flavor-cyan-bold-11); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-hue="neutral"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-muted-10); --accent-bg-hover: var(--flavor-neutral-muted-11); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-muted-11); --text-on-accent-subtle: var(--flavor-neutral-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="neutral"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-regular-10); --accent-bg-hover: var(--flavor-neutral-regular-11); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-regular-11); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="neutral"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-bold-10); --accent-bg-hover: var(--flavor-neutral-bold-11); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-bold-11); --text-on-accent-subtle: var(--flavor-neutral-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="red"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-red-muted-10); --accent-bg-hover: var(--flavor-red-muted-11); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-11); --text-on-accent-subtle: var(--flavor-red-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="red"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-red-regular-10); --accent-bg-hover: var(--flavor-red-regular-11); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-10); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="red"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-red-bold-10); --accent-bg-hover: var(--flavor-red-bold-11); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-11); --text-on-accent-subtle: var(--flavor-red-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="scarlet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-muted-10); --accent-bg-hover: var(--flavor-scarlet-muted-11); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-11); --text-on-accent-subtle: var(--flavor-scarlet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="scarlet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-regular-10); --accent-bg-hover: var(--flavor-scarlet-regular-11); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-10); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="scarlet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-bold-10); --accent-bg-hover: var(--flavor-scarlet-bold-11); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-11); --text-on-accent-subtle: var(--flavor-scarlet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="orange"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-muted-10); --accent-bg-hover: var(--flavor-orange-muted-11); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-11); --text-on-accent-subtle: var(--flavor-orange-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="orange"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-regular-10); --accent-bg-hover: var(--flavor-orange-regular-11); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-10); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="orange"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-bold-10); --accent-bg-hover: var(--flavor-orange-bold-11); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-11); --text-on-accent-subtle: var(--flavor-orange-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="tangerine"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-muted-10); --accent-bg-hover: var(--flavor-tangerine-muted-11); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-11); --text-on-accent-subtle: var(--flavor-tangerine-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="tangerine"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-regular-10); --accent-bg-hover: var(--flavor-tangerine-regular-11); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-11); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="tangerine"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-bold-10); --accent-bg-hover: var(--flavor-tangerine-bold-11); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-11); --text-on-accent-subtle: var(--flavor-tangerine-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="yellow"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-muted-10); --accent-bg-hover: var(--flavor-yellow-muted-11); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-11); --text-on-accent-subtle: var(--flavor-yellow-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="yellow"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-regular-10); --accent-bg-hover: var(--flavor-yellow-regular-11); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-11); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="yellow"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-bold-10); --accent-bg-hover: var(--flavor-yellow-bold-11); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-11); --text-on-accent-subtle: var(--flavor-yellow-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="lime"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-muted-10); --accent-bg-hover: var(--flavor-lime-muted-11); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-11); --text-on-accent-subtle: var(--flavor-lime-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="lime"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-regular-10); --accent-bg-hover: var(--flavor-lime-regular-11); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-11); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="lime"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-bold-10); --accent-bg-hover: var(--flavor-lime-bold-11); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-11); --text-on-accent-subtle: var(--flavor-lime-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="green"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-green-muted-10); --accent-bg-hover: var(--flavor-green-muted-11); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-11); --text-on-accent-subtle: var(--flavor-green-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="green"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-green-regular-10); --accent-bg-hover: var(--flavor-green-regular-11); --accent-bg-active: var(--flavor-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-11); --text-on-accent-subtle: var(--flavor-green-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="green"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-green-bold-10); --accent-bg-hover: var(--flavor-green-bold-11); --accent-bg-active: var(--flavor-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-11); --text-on-accent-subtle: var(--flavor-green-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="teal"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-muted-10); --accent-bg-hover: var(--flavor-teal-muted-11); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-11); --text-on-accent-subtle: var(--flavor-teal-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="teal"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-regular-10); --accent-bg-hover: var(--flavor-teal-regular-11); --accent-bg-active: var(--flavor-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-11); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-10); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="teal"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-bold-10); --accent-bg-hover: var(--flavor-teal-bold-11); --accent-bg-active: var(--flavor-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-11); --text-on-accent-subtle: var(--flavor-teal-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="cyan"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-muted-10); --accent-bg-hover: var(--flavor-cyan-muted-11); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-11); --text-on-accent-subtle: var(--flavor-cyan-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="cyan"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-regular-10); --accent-bg-hover: var(--flavor-cyan-regular-11); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-11); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="cyan"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-bold-10); --accent-bg-hover: var(--flavor-cyan-bold-11); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-11); --text-on-accent-subtle: var(--flavor-cyan-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="blue"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="blue"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-10); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="blue"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="violet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-muted-10); --accent-bg-hover: var(--flavor-violet-muted-11); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-11); --text-on-accent-subtle: var(--flavor-violet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="violet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-regular-10); --accent-bg-hover: var(--flavor-violet-regular-11); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-10); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="violet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-bold-10); --accent-bg-hover: var(--flavor-violet-bold-11); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-11); --text-on-accent-subtle: var(--flavor-violet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="purple"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-muted-10); --accent-bg-hover: var(--flavor-purple-muted-11); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-11); --text-on-accent-subtle: var(--flavor-purple-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="purple"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-regular-10); --accent-bg-hover: var(--flavor-purple-regular-11); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-10); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="purple"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-bold-10); --accent-bg-hover: var(--flavor-purple-bold-11); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-10); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="magenta"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-hue="magenta"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-10); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-hue="magenta"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-hue="brand"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-10); --secondary-bg-hover: var(--flavor-orange-muted-11); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-11); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-hue="brand"][data-sat="regular"][data-bg="secondary"], :root:not([data-hue])[data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-10); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-10); --secondary-bg-hover: var(--flavor-orange-regular-11); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-10); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-hue="brand"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-10); --secondary-bg-hover: var(--flavor-orange-bold-11); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-11); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-hue="brand2"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-10); --secondary-bg: var(--flavor-cyan-muted-10); --secondary-bg-hover: var(--flavor-cyan-muted-11); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-10); --secondary-text: var(--flavor-cyan-muted-11); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-hue="brand2"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-10); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-10); --secondary-bg-hover: var(--flavor-cyan-regular-11); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-9); --secondary-text: var(--flavor-cyan-regular-11); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-hue="brand2"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-10); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-10); --secondary-bg: var(--flavor-cyan-bold-10); --secondary-bg-hover: var(--flavor-cyan-bold-11); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-10); --secondary-text: var(--flavor-cyan-bold-11); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-muted-11); --accent-bg-hover: var(--flavor-neutral-muted-12); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-muted-12); --text-on-accent-subtle: var(--flavor-neutral-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-regular-11); --accent-bg-hover: var(--flavor-neutral-regular-12); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-regular-11); --text-on-accent-subtle: var(--flavor-neutral-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-bold-11); --accent-bg-hover: var(--flavor-neutral-bold-12); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-bold-12); --text-on-accent-subtle: var(--flavor-neutral-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-red-muted-11); --accent-bg-hover: var(--flavor-red-muted-12); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-12); --text-on-accent-subtle: var(--flavor-red-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-red-regular-11); --accent-bg-hover: var(--flavor-red-regular-12); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-11); --text-on-accent-subtle: var(--flavor-red-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-red-bold-11); --accent-bg-hover: var(--flavor-red-bold-12); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-12); --text-on-accent-subtle: var(--flavor-red-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-muted-11); --accent-bg-hover: var(--flavor-scarlet-muted-12); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-12); --text-on-accent-subtle: var(--flavor-scarlet-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-regular-11); --accent-bg-hover: var(--flavor-scarlet-regular-12); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-11); --text-on-accent-subtle: var(--flavor-scarlet-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-bold-11); --accent-bg-hover: var(--flavor-scarlet-bold-12); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-12); --text-on-accent-subtle: var(--flavor-scarlet-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-muted-11); --accent-bg-hover: var(--flavor-orange-muted-12); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-12); --text-on-accent-subtle: var(--flavor-orange-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-regular-11); --accent-bg-hover: var(--flavor-orange-regular-12); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-11); --text-on-accent-subtle: var(--flavor-orange-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-bold-11); --accent-bg-hover: var(--flavor-orange-bold-12); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-12); --text-on-accent-subtle: var(--flavor-orange-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-muted-11); --accent-bg-hover: var(--flavor-tangerine-muted-12); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-12); --text-on-accent-subtle: var(--flavor-tangerine-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-regular-11); --accent-bg-hover: var(--flavor-tangerine-regular-12); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-11); --text-on-accent-subtle: var(--flavor-tangerine-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-bold-11); --accent-bg-hover: var(--flavor-tangerine-bold-12); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-12); --text-on-accent-subtle: var(--flavor-tangerine-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-muted-11); --accent-bg-hover: var(--flavor-yellow-muted-12); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-12); --text-on-accent-subtle: var(--flavor-yellow-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-regular-11); --accent-bg-hover: var(--flavor-yellow-regular-12); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-11); --text-on-accent-subtle: var(--flavor-yellow-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-bold-11); --accent-bg-hover: var(--flavor-yellow-bold-12); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-12); --text-on-accent-subtle: var(--flavor-yellow-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-muted-11); --accent-bg-hover: var(--flavor-lime-muted-12); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-12); --text-on-accent-subtle: var(--flavor-lime-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-regular-11); --accent-bg-hover: var(--flavor-lime-regular-12); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-11); --text-on-accent-subtle: var(--flavor-lime-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-bold-11); --accent-bg-hover: var(--flavor-lime-bold-12); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-12); --text-on-accent-subtle: var(--flavor-lime-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-green-muted-11); --accent-bg-hover: var(--flavor-green-muted-12); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-12); --text-on-accent-subtle: var(--flavor-green-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-green-regular-11); --accent-bg-hover: var(--flavor-green-regular-12); --accent-bg-active: var(--flavor-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-12); --text-on-accent-subtle: var(--flavor-green-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-green-bold-11); --accent-bg-hover: var(--flavor-green-bold-12); --accent-bg-active: var(--flavor-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-12); --text-on-accent-subtle: var(--flavor-green-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-muted-11); --accent-bg-hover: var(--flavor-teal-muted-12); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-12); --text-on-accent-subtle: var(--flavor-teal-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-regular-11); --accent-bg-hover: var(--flavor-teal-regular-12); --accent-bg-active: var(--flavor-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-11); --text-on-accent-subtle: var(--flavor-teal-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-bold-11); --accent-bg-hover: var(--flavor-teal-bold-12); --accent-bg-active: var(--flavor-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-12); --text-on-accent-subtle: var(--flavor-teal-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-muted-11); --accent-bg-hover: var(--flavor-cyan-muted-12); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-12); --text-on-accent-subtle: var(--flavor-cyan-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-regular-11); --accent-bg-hover: var(--flavor-cyan-regular-12); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-11); --text-on-accent-subtle: var(--flavor-cyan-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-bold-11); --accent-bg-hover: var(--flavor-cyan-bold-12); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-12); --text-on-accent-subtle: var(--flavor-cyan-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-11); --accent-bg-hover: var(--flavor-blue-muted-12); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-12); --text-on-accent-subtle: var(--flavor-blue-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-11); --text-on-accent-subtle: var(--flavor-blue-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-11); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-12); --text-on-accent-subtle: var(--flavor-blue-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-muted-11); --accent-bg-hover: var(--flavor-violet-muted-12); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-12); --text-on-accent-subtle: var(--flavor-violet-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-regular-11); --accent-bg-hover: var(--flavor-violet-regular-12); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-11); --text-on-accent-subtle: var(--flavor-violet-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-bold-11); --accent-bg-hover: var(--flavor-violet-bold-12); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-12); --text-on-accent-subtle: var(--flavor-violet-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-muted-11); --accent-bg-hover: var(--flavor-purple-muted-12); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-12); --text-on-accent-subtle: var(--flavor-purple-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-regular-11); --accent-bg-hover: var(--flavor-purple-regular-12); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-11); --text-on-accent-subtle: var(--flavor-purple-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-bold-11); --accent-bg-hover: var(--flavor-purple-bold-12); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-11); --text-on-accent-subtle: var(--flavor-purple-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-11); --accent-bg-hover: var(--flavor-magenta-muted-12); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-12); --text-on-accent-subtle: var(--flavor-magenta-muted-12); --secondary-bg: var(--flavor-neutral-muted-11); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-10); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-12); --secondary-bg: var(--flavor-neutral-regular-11); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-12); --text-on-accent-subtle: var(--flavor-magenta-bold-12); --secondary-bg: var(--flavor-neutral-bold-11); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-10); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-11); --accent-bg-hover: var(--flavor-blue-muted-12); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-12); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-11); --secondary-bg-hover: var(--flavor-orange-muted-12); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-12); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="secondary"], :root[data-contrast="aaa"]:not([data-hue])[data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-11); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-11); --secondary-bg-hover: var(--flavor-orange-regular-12); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-11); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-11); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-12); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-11); --secondary-bg-hover: var(--flavor-orange-bold-12); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-12); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-11); --accent-bg-hover: var(--flavor-magenta-muted-12); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-12); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-10); --secondary-bg: var(--flavor-cyan-muted-11); --secondary-bg-hover: var(--flavor-cyan-muted-12); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-10); --secondary-text: var(--flavor-cyan-muted-12); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-11); --secondary-bg-hover: var(--flavor-cyan-regular-12); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-9); --secondary-text: var(--flavor-cyan-regular-11); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-10); --secondary-bg: var(--flavor-cyan-bold-11); --secondary-bg-hover: var(--flavor-cyan-bold-12); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-10); --secondary-text: var(--flavor-cyan-bold-12); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-muted-9); --accent-bg-hover: var(--flavor-neutral-muted-10); --accent-bg-active: var(--flavor-neutral-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-muted-10); --text-on-accent-subtle: var(--flavor-neutral-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-regular-9); --accent-bg-hover: var(--flavor-neutral-regular-10); --accent-bg-active: var(--flavor-neutral-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-regular-9); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-bold-9); --accent-bg-hover: var(--flavor-neutral-bold-10); --accent-bg-active: var(--flavor-neutral-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-bold-10); --text-on-accent-subtle: var(--flavor-neutral-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="red"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-red-muted-9); --accent-bg-hover: var(--flavor-red-muted-10); --accent-bg-active: var(--flavor-red-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-muted-10); --text-on-accent-subtle: var(--flavor-red-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="red"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-red-regular-9); --accent-bg-hover: var(--flavor-red-regular-10); --accent-bg-active: var(--flavor-red-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-regular-9); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="red"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-red-bold-9); --accent-bg-hover: var(--flavor-red-bold-10); --accent-bg-active: var(--flavor-red-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-bold-10); --text-on-accent-subtle: var(--flavor-red-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-muted-9); --accent-bg-hover: var(--flavor-scarlet-muted-10); --accent-bg-active: var(--flavor-scarlet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-muted-10); --text-on-accent-subtle: var(--flavor-scarlet-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-regular-9); --accent-bg-hover: var(--flavor-scarlet-regular-10); --accent-bg-active: var(--flavor-scarlet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-regular-9); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-bold-9); --accent-bg-hover: var(--flavor-scarlet-bold-10); --accent-bg-active: var(--flavor-scarlet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-bold-10); --text-on-accent-subtle: var(--flavor-scarlet-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-muted-9); --accent-bg-hover: var(--flavor-orange-muted-10); --accent-bg-active: var(--flavor-orange-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-muted-10); --text-on-accent-subtle: var(--flavor-orange-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-regular-9); --accent-bg-hover: var(--flavor-orange-regular-10); --accent-bg-active: var(--flavor-orange-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-regular-9); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-bold-9); --accent-bg-hover: var(--flavor-orange-bold-10); --accent-bg-active: var(--flavor-orange-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-bold-10); --text-on-accent-subtle: var(--flavor-orange-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-muted-9); --accent-bg-hover: var(--flavor-tangerine-muted-10); --accent-bg-active: var(--flavor-tangerine-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-muted-10); --text-on-accent-subtle: var(--flavor-tangerine-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-regular-9); --accent-bg-hover: var(--flavor-tangerine-regular-10); --accent-bg-active: var(--flavor-tangerine-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-regular-9); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-bold-9); --accent-bg-hover: var(--flavor-tangerine-bold-10); --accent-bg-active: var(--flavor-tangerine-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-bold-10); --text-on-accent-subtle: var(--flavor-tangerine-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-muted-9); --accent-bg-hover: var(--flavor-yellow-muted-10); --accent-bg-active: var(--flavor-yellow-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-muted-10); --text-on-accent-subtle: var(--flavor-yellow-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-regular-9); --accent-bg-hover: var(--flavor-yellow-regular-10); --accent-bg-active: var(--flavor-yellow-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-regular-9); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-bold-9); --accent-bg-hover: var(--flavor-yellow-bold-10); --accent-bg-active: var(--flavor-yellow-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-bold-10); --text-on-accent-subtle: var(--flavor-yellow-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-muted-9); --accent-bg-hover: var(--flavor-lime-muted-10); --accent-bg-active: var(--flavor-lime-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-muted-10); --text-on-accent-subtle: var(--flavor-lime-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-regular-9); --accent-bg-hover: var(--flavor-lime-regular-10); --accent-bg-active: var(--flavor-lime-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-regular-9); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-bold-9); --accent-bg-hover: var(--flavor-lime-bold-10); --accent-bg-active: var(--flavor-lime-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-bold-10); --text-on-accent-subtle: var(--flavor-lime-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="green"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-green-muted-9); --accent-bg-hover: var(--flavor-green-muted-10); --accent-bg-active: var(--flavor-green-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-muted-10); --text-on-accent-subtle: var(--flavor-green-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="green"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-green-regular-9); --accent-bg-hover: var(--flavor-green-regular-10); --accent-bg-active: var(--flavor-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-regular-9); --text-on-accent-subtle: var(--flavor-green-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="green"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-green-bold-9); --accent-bg-hover: var(--flavor-green-bold-10); --accent-bg-active: var(--flavor-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-bold-10); --text-on-accent-subtle: var(--flavor-green-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-muted-9); --accent-bg-hover: var(--flavor-teal-muted-10); --accent-bg-active: var(--flavor-teal-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-muted-10); --text-on-accent-subtle: var(--flavor-teal-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-regular-9); --accent-bg-hover: var(--flavor-teal-regular-10); --accent-bg-active: var(--flavor-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-regular-9); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-bold-9); --accent-bg-hover: var(--flavor-teal-bold-10); --accent-bg-active: var(--flavor-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-bold-10); --text-on-accent-subtle: var(--flavor-teal-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-muted-9); --accent-bg-hover: var(--flavor-cyan-muted-10); --accent-bg-active: var(--flavor-cyan-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-muted-10); --text-on-accent-subtle: var(--flavor-cyan-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-regular-9); --accent-bg-hover: var(--flavor-cyan-regular-10); --accent-bg-active: var(--flavor-cyan-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-regular-9); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-bold-9); --accent-bg-hover: var(--flavor-cyan-bold-10); --accent-bg-active: var(--flavor-cyan-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-bold-10); --text-on-accent-subtle: var(--flavor-cyan-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-9); --accent-bg-hover: var(--flavor-blue-muted-10); --accent-bg-active: var(--flavor-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-10); --text-on-accent-subtle: var(--flavor-blue-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-9); --accent-bg-hover: var(--flavor-blue-regular-10); --accent-bg-active: var(--flavor-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-9); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-9); --accent-bg-hover: var(--flavor-blue-bold-10); --accent-bg-active: var(--flavor-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-10); --text-on-accent-subtle: var(--flavor-blue-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-muted-9); --accent-bg-hover: var(--flavor-violet-muted-10); --accent-bg-active: var(--flavor-violet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-muted-10); --text-on-accent-subtle: var(--flavor-violet-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-regular-9); --accent-bg-hover: var(--flavor-violet-regular-10); --accent-bg-active: var(--flavor-violet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-regular-9); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-bold-9); --accent-bg-hover: var(--flavor-violet-bold-10); --accent-bg-active: var(--flavor-violet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-bold-10); --text-on-accent-subtle: var(--flavor-violet-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-muted-9); --accent-bg-hover: var(--flavor-purple-muted-10); --accent-bg-active: var(--flavor-purple-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-muted-10); --text-on-accent-subtle: var(--flavor-purple-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-regular-9); --accent-bg-hover: var(--flavor-purple-regular-10); --accent-bg-active: var(--flavor-purple-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-regular-9); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-bold-9); --accent-bg-hover: var(--flavor-purple-bold-10); --accent-bg-active: var(--flavor-purple-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-bold-10); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-9); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-9); --accent-bg-hover: var(--flavor-magenta-muted-10); --accent-bg-active: var(--flavor-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-10); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --secondary-bg: var(--flavor-neutral-muted-9); --secondary-bg-hover: var(--flavor-neutral-muted-10); --secondary-bg-active: var(--flavor-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-10); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-9); --accent-bg-hover: var(--flavor-magenta-regular-10); --accent-bg-active: var(--flavor-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-9); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-9); --secondary-bg-hover: var(--flavor-neutral-regular-10); --secondary-bg-active: var(--flavor-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-9); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-9); --accent-bg-hover: var(--flavor-magenta-bold-10); --accent-bg-active: var(--flavor-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-10); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --secondary-bg: var(--flavor-neutral-bold-9); --secondary-bg-hover: var(--flavor-neutral-bold-10); --secondary-bg-active: var(--flavor-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-10); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-9); --accent-bg-hover: var(--flavor-blue-muted-10); --accent-bg-active: var(--flavor-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-10); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-9); --secondary-bg-hover: var(--flavor-orange-muted-10); --secondary-bg-active: var(--flavor-orange-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-10); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="regular"][data-bg="secondary"], :root[data-mode="dark"]:not([data-hue])[data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-9); --accent-bg-hover: var(--flavor-blue-regular-10); --accent-bg-active: var(--flavor-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-9); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-9); --secondary-bg-hover: var(--flavor-orange-regular-10); --secondary-bg-active: var(--flavor-orange-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-9); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-9); --accent-bg-hover: var(--flavor-blue-bold-10); --accent-bg-active: var(--flavor-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-10); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-9); --secondary-bg-hover: var(--flavor-orange-bold-10); --secondary-bg-active: var(--flavor-orange-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-10); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-9); --accent-bg-hover: var(--flavor-magenta-muted-10); --accent-bg-active: var(--flavor-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-10); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-9); --secondary-bg: var(--flavor-cyan-muted-9); --secondary-bg-hover: var(--flavor-cyan-muted-10); --secondary-bg-active: var(--flavor-cyan-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-9); --secondary-text: var(--flavor-cyan-muted-10); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-9); --accent-bg-hover: var(--flavor-magenta-regular-10); --accent-bg-active: var(--flavor-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-9); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-9); --secondary-bg-hover: var(--flavor-cyan-regular-10); --secondary-bg-active: var(--flavor-cyan-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-9); --secondary-text: var(--flavor-cyan-regular-9); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-9); --accent-bg-hover: var(--flavor-magenta-bold-10); --accent-bg-active: var(--flavor-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-10); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-9); --secondary-bg: var(--flavor-cyan-bold-9); --secondary-bg-hover: var(--flavor-cyan-bold-10); --secondary-bg-active: var(--flavor-cyan-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-9); --secondary-text: var(--flavor-cyan-bold-10); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-muted-10); --accent-bg-hover: var(--flavor-neutral-muted-11); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-muted-11); --text-on-accent-subtle: var(--flavor-neutral-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-regular-10); --accent-bg-hover: var(--flavor-neutral-regular-11); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-regular-11); --text-on-accent-subtle: var(--flavor-neutral-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-neutral-bold-10); --accent-bg-hover: var(--flavor-neutral-bold-11); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-neutral-bold-11); --text-on-accent-subtle: var(--flavor-neutral-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-red-muted-10); --accent-bg-hover: var(--flavor-red-muted-11); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-muted-11); --text-on-accent-subtle: var(--flavor-red-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-red-regular-10); --accent-bg-hover: var(--flavor-red-regular-11); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-regular-11); --text-on-accent-subtle: var(--flavor-red-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-red-bold-10); --accent-bg-hover: var(--flavor-red-bold-11); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-red-bold-11); --text-on-accent-subtle: var(--flavor-red-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-muted-10); --accent-bg-hover: var(--flavor-scarlet-muted-11); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-muted-11); --text-on-accent-subtle: var(--flavor-scarlet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-regular-10); --accent-bg-hover: var(--flavor-scarlet-regular-11); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-regular-11); --text-on-accent-subtle: var(--flavor-scarlet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-scarlet-bold-10); --accent-bg-hover: var(--flavor-scarlet-bold-11); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-scarlet-bold-11); --text-on-accent-subtle: var(--flavor-scarlet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-muted-10); --accent-bg-hover: var(--flavor-orange-muted-11); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-muted-11); --text-on-accent-subtle: var(--flavor-orange-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-regular-10); --accent-bg-hover: var(--flavor-orange-regular-11); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-regular-11); --text-on-accent-subtle: var(--flavor-orange-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-orange-bold-10); --accent-bg-hover: var(--flavor-orange-bold-11); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-orange-bold-11); --text-on-accent-subtle: var(--flavor-orange-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-muted-10); --accent-bg-hover: var(--flavor-tangerine-muted-11); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-muted-11); --text-on-accent-subtle: var(--flavor-tangerine-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-regular-10); --accent-bg-hover: var(--flavor-tangerine-regular-11); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-regular-11); --text-on-accent-subtle: var(--flavor-tangerine-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-tangerine-bold-10); --accent-bg-hover: var(--flavor-tangerine-bold-11); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-tangerine-bold-11); --text-on-accent-subtle: var(--flavor-tangerine-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-muted-10); --accent-bg-hover: var(--flavor-yellow-muted-11); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-muted-11); --text-on-accent-subtle: var(--flavor-yellow-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-regular-10); --accent-bg-hover: var(--flavor-yellow-regular-11); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-regular-11); --text-on-accent-subtle: var(--flavor-yellow-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-yellow-bold-10); --accent-bg-hover: var(--flavor-yellow-bold-11); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-yellow-bold-11); --text-on-accent-subtle: var(--flavor-yellow-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-muted-10); --accent-bg-hover: var(--flavor-lime-muted-11); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-muted-11); --text-on-accent-subtle: var(--flavor-lime-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-regular-10); --accent-bg-hover: var(--flavor-lime-regular-11); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-regular-11); --text-on-accent-subtle: var(--flavor-lime-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-lime-bold-10); --accent-bg-hover: var(--flavor-lime-bold-11); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-lime-bold-11); --text-on-accent-subtle: var(--flavor-lime-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-green-muted-10); --accent-bg-hover: var(--flavor-green-muted-11); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-muted-11); --text-on-accent-subtle: var(--flavor-green-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-green-regular-9); --accent-bg-hover: var(--flavor-green-regular-10); --accent-bg-active: var(--flavor-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-regular-11); --text-on-accent-subtle: var(--flavor-green-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-green-bold-9); --accent-bg-hover: var(--flavor-green-bold-10); --accent-bg-active: var(--flavor-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-green-bold-11); --text-on-accent-subtle: var(--flavor-green-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-muted-10); --accent-bg-hover: var(--flavor-teal-muted-11); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-muted-11); --text-on-accent-subtle: var(--flavor-teal-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-regular-9); --accent-bg-hover: var(--flavor-teal-regular-10); --accent-bg-active: var(--flavor-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-regular-11); --text-on-accent-subtle: var(--flavor-teal-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-teal-bold-9); --accent-bg-hover: var(--flavor-teal-bold-10); --accent-bg-active: var(--flavor-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-teal-bold-11); --text-on-accent-subtle: var(--flavor-teal-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-muted-10); --accent-bg-hover: var(--flavor-cyan-muted-11); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-muted-11); --text-on-accent-subtle: var(--flavor-cyan-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-regular-10); --accent-bg-hover: var(--flavor-cyan-regular-11); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-regular-11); --text-on-accent-subtle: var(--flavor-cyan-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-cyan-bold-10); --accent-bg-hover: var(--flavor-cyan-bold-11); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-cyan-bold-11); --text-on-accent-subtle: var(--flavor-cyan-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-11); --text-on-accent-subtle: var(--flavor-blue-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-muted-10); --accent-bg-hover: var(--flavor-violet-muted-11); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-muted-11); --text-on-accent-subtle: var(--flavor-violet-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-regular-10); --accent-bg-hover: var(--flavor-violet-regular-11); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-regular-11); --text-on-accent-subtle: var(--flavor-violet-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-violet-bold-10); --accent-bg-hover: var(--flavor-violet-bold-11); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-violet-bold-11); --text-on-accent-subtle: var(--flavor-violet-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-muted-10); --accent-bg-hover: var(--flavor-purple-muted-11); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-muted-11); --text-on-accent-subtle: var(--flavor-purple-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-regular-10); --accent-bg-hover: var(--flavor-purple-regular-11); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-regular-11); --text-on-accent-subtle: var(--flavor-purple-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-purple-bold-10); --accent-bg-hover: var(--flavor-purple-bold-11); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-purple-bold-11); --text-on-accent-subtle: var(--flavor-purple-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --secondary-bg: var(--flavor-neutral-muted-10); --secondary-bg-hover: var(--flavor-neutral-muted-11); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-9); --secondary-text: var(--flavor-neutral-muted-11); --text-on-secondary-subtle: var(--flavor-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --secondary-bg: var(--flavor-neutral-regular-10); --secondary-bg-hover: var(--flavor-neutral-regular-11); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-9); --secondary-text: var(--flavor-neutral-regular-11); --text-on-secondary-subtle: var(--flavor-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-11); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --secondary-bg: var(--flavor-neutral-bold-10); --secondary-bg-hover: var(--flavor-neutral-bold-11); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-9); --secondary-text: var(--flavor-neutral-bold-11); --text-on-secondary-subtle: var(--flavor-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-11); --accent-subtle: var(--flavor-blue-muted-3); --accent-subtle-hover: var(--flavor-blue-muted-4); --accent-border: var(--flavor-orange-muted-7); --focus-ring: var(--flavor-orange-muted-9); --secondary-bg: var(--flavor-orange-muted-10); --secondary-bg-hover: var(--flavor-orange-muted-11); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-9); --secondary-text: var(--flavor-orange-muted-11); --text-on-secondary-subtle: var(--flavor-orange-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="secondary"], :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue])[data-bg="secondary"] { --accent-bg: var(--flavor-blue-regular-10); --accent-bg-hover: var(--flavor-blue-regular-11); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-regular-11); --text-on-accent-subtle: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-3); --accent-subtle-hover: var(--flavor-blue-regular-4); --accent-border: var(--flavor-orange-regular-7); --focus-ring: var(--flavor-orange-regular-9); --secondary-bg: var(--flavor-orange-regular-10); --secondary-bg-hover: var(--flavor-orange-regular-11); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-9); --secondary-text: var(--flavor-orange-regular-11); --text-on-secondary-subtle: var(--flavor-orange-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-blue-bold-10); --accent-bg-hover: var(--flavor-blue-bold-11); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-blue-bold-11); --text-on-accent-subtle: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-3); --accent-subtle-hover: var(--flavor-blue-bold-4); --accent-border: var(--flavor-orange-bold-7); --focus-ring: var(--flavor-orange-bold-9); --secondary-bg: var(--flavor-orange-bold-10); --secondary-bg-hover: var(--flavor-orange-bold-11); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-9); --secondary-text: var(--flavor-orange-bold-12); --text-on-secondary-subtle: var(--flavor-orange-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-muted-12); --text-on-accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle: var(--flavor-magenta-muted-3); --accent-subtle-hover: var(--flavor-magenta-muted-4); --accent-border: var(--flavor-cyan-muted-7); --focus-ring: var(--flavor-cyan-muted-9); --secondary-bg: var(--flavor-cyan-muted-10); --secondary-bg-hover: var(--flavor-cyan-muted-11); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-9); --secondary-text: var(--flavor-cyan-muted-11); --text-on-secondary-subtle: var(--flavor-cyan-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-regular-10); --accent-bg-hover: var(--flavor-magenta-regular-11); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-regular-11); --text-on-accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-3); --accent-subtle-hover: var(--flavor-magenta-regular-4); --accent-border: var(--flavor-cyan-regular-7); --focus-ring: var(--flavor-cyan-regular-9); --secondary-bg: var(--flavor-cyan-regular-10); --secondary-bg-hover: var(--flavor-cyan-regular-11); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-9); --secondary-text: var(--flavor-cyan-regular-11); --text-on-secondary-subtle: var(--flavor-cyan-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="secondary"] { --accent-bg: var(--flavor-magenta-bold-10); --accent-bg-hover: var(--flavor-magenta-bold-11); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavor-magenta-bold-12); --text-on-accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-3); --accent-subtle-hover: var(--flavor-magenta-bold-4); --accent-border: var(--flavor-cyan-bold-7); --focus-ring: var(--flavor-cyan-bold-9); --secondary-bg: var(--flavor-cyan-bold-10); --secondary-bg-hover: var(--flavor-cyan-bold-11); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-9); --secondary-text: var(--flavor-cyan-bold-11); --text-on-secondary-subtle: var(--flavor-cyan-bold-11); } :root[data-hue="neutral"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-muted-9); --accent-bg-hover: var(--flavorD-neutral-muted-10); --accent-bg-active: var(--flavorD-neutral-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-9); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="neutral"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-regular-9); --accent-bg-hover: var(--flavorD-neutral-regular-10); --accent-bg-active: var(--flavorD-neutral-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-9); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="neutral"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-bold-9); --accent-bg-hover: var(--flavorD-neutral-bold-10); --accent-bg-active: var(--flavorD-neutral-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-9); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="red"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-muted-9); --accent-bg-hover: var(--flavorD-red-muted-10); --accent-bg-active: var(--flavorD-red-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-9); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="red"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-regular-9); --accent-bg-hover: var(--flavorD-red-regular-10); --accent-bg-active: var(--flavorD-red-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-9); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="red"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-bold-9); --accent-bg-hover: var(--flavorD-red-bold-10); --accent-bg-active: var(--flavorD-red-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-9); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="scarlet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-muted-9); --accent-bg-hover: var(--flavorD-scarlet-muted-10); --accent-bg-active: var(--flavorD-scarlet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-9); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="scarlet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-regular-9); --accent-bg-hover: var(--flavorD-scarlet-regular-10); --accent-bg-active: var(--flavorD-scarlet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-9); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="scarlet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-bold-9); --accent-bg-hover: var(--flavorD-scarlet-bold-10); --accent-bg-active: var(--flavorD-scarlet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-9); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="orange"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-muted-9); --accent-bg-hover: var(--flavorD-orange-muted-10); --accent-bg-active: var(--flavorD-orange-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-9); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="orange"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-regular-9); --accent-bg-hover: var(--flavorD-orange-regular-10); --accent-bg-active: var(--flavorD-orange-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-9); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="orange"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-bold-9); --accent-bg-hover: var(--flavorD-orange-bold-10); --accent-bg-active: var(--flavorD-orange-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-9); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="tangerine"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-muted-9); --accent-bg-hover: var(--flavorD-tangerine-muted-10); --accent-bg-active: var(--flavorD-tangerine-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-9); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="tangerine"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-regular-9); --accent-bg-hover: var(--flavorD-tangerine-regular-10); --accent-bg-active: var(--flavorD-tangerine-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-9); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="tangerine"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-bold-9); --accent-bg-hover: var(--flavorD-tangerine-bold-10); --accent-bg-active: var(--flavorD-tangerine-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-9); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="yellow"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-muted-9); --accent-bg-hover: var(--flavorD-yellow-muted-10); --accent-bg-active: var(--flavorD-yellow-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-9); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="yellow"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-regular-9); --accent-bg-hover: var(--flavorD-yellow-regular-10); --accent-bg-active: var(--flavorD-yellow-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-9); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="yellow"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-bold-9); --accent-bg-hover: var(--flavorD-yellow-bold-10); --accent-bg-active: var(--flavorD-yellow-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-9); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="lime"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-muted-9); --accent-bg-hover: var(--flavorD-lime-muted-10); --accent-bg-active: var(--flavorD-lime-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-9); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="lime"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-regular-9); --accent-bg-hover: var(--flavorD-lime-regular-10); --accent-bg-active: var(--flavorD-lime-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-9); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="lime"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-bold-9); --accent-bg-hover: var(--flavorD-lime-bold-10); --accent-bg-active: var(--flavorD-lime-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-9); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="green"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-muted-9); --accent-bg-hover: var(--flavorD-green-muted-10); --accent-bg-active: var(--flavorD-green-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-9); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="green"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-9); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="green"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-9); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="teal"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-muted-9); --accent-bg-hover: var(--flavorD-teal-muted-10); --accent-bg-active: var(--flavorD-teal-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-9); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="teal"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-9); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="teal"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-9); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="cyan"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-muted-9); --accent-bg-hover: var(--flavorD-cyan-muted-10); --accent-bg-active: var(--flavorD-cyan-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-9); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="cyan"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-regular-9); --accent-bg-hover: var(--flavorD-cyan-regular-10); --accent-bg-active: var(--flavorD-cyan-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-9); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="cyan"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-bold-9); --accent-bg-hover: var(--flavorD-cyan-bold-10); --accent-bg-active: var(--flavorD-cyan-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-9); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="blue"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-9); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="blue"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="blue"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-9); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="violet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-muted-9); --accent-bg-hover: var(--flavorD-violet-muted-10); --accent-bg-active: var(--flavorD-violet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-9); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="violet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-regular-9); --accent-bg-hover: var(--flavorD-violet-regular-10); --accent-bg-active: var(--flavorD-violet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-9); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="violet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-bold-9); --accent-bg-hover: var(--flavorD-violet-bold-10); --accent-bg-active: var(--flavorD-violet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-9); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="purple"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-muted-9); --accent-bg-hover: var(--flavorD-purple-muted-10); --accent-bg-active: var(--flavorD-purple-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-9); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="purple"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-regular-9); --accent-bg-hover: var(--flavorD-purple-regular-10); --accent-bg-active: var(--flavorD-purple-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-9); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="purple"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-bold-9); --accent-bg-hover: var(--flavorD-purple-bold-10); --accent-bg-active: var(--flavorD-purple-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-9); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="magenta"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-9); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="magenta"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="magenta"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-9); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="brand"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-9); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-9); --secondary-bg-hover: var(--flavorD-orange-muted-10); --secondary-bg-active: var(--flavorD-orange-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-9); --secondary-text: var(--flavorD-orange-muted-9); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-hue="brand"][data-sat="regular"][data-bg="dark-primary"], :root:not([data-hue])[data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-9); --secondary-bg-hover: var(--flavorD-orange-regular-10); --secondary-bg-active: var(--flavorD-orange-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-9); --secondary-text: var(--flavorD-orange-regular-9); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-hue="brand"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-9); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-9); --secondary-bg-hover: var(--flavorD-orange-bold-10); --secondary-bg-active: var(--flavorD-orange-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-9); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-hue="brand2"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-9); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-9); --secondary-bg-hover: var(--flavorD-cyan-muted-10); --secondary-bg-active: var(--flavorD-cyan-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-9); --secondary-text: var(--flavorD-cyan-muted-9); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-hue="brand2"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-9); --secondary-bg-hover: var(--flavorD-cyan-regular-10); --secondary-bg-active: var(--flavorD-cyan-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-8); --secondary-text: var(--flavorD-cyan-regular-9); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-hue="brand2"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-10); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-9); --secondary-bg-hover: var(--flavorD-cyan-bold-10); --secondary-bg-active: var(--flavorD-cyan-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-9); --secondary-text: var(--flavorD-cyan-bold-9); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-muted-10); --accent-bg-hover: var(--flavorD-neutral-muted-11); --accent-bg-active: var(--flavorD-neutral-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-11); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-regular-10); --accent-bg-hover: var(--flavorD-neutral-regular-11); --accent-bg-active: var(--flavorD-neutral-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-10); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-bold-10); --accent-bg-hover: var(--flavorD-neutral-bold-11); --accent-bg-active: var(--flavorD-neutral-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-11); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-muted-10); --accent-bg-hover: var(--flavorD-red-muted-11); --accent-bg-active: var(--flavorD-red-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-11); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-regular-10); --accent-bg-hover: var(--flavorD-red-regular-11); --accent-bg-active: var(--flavorD-red-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-10); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-bold-10); --accent-bg-hover: var(--flavorD-red-bold-11); --accent-bg-active: var(--flavorD-red-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-11); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-muted-10); --accent-bg-hover: var(--flavorD-scarlet-muted-11); --accent-bg-active: var(--flavorD-scarlet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-11); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-regular-10); --accent-bg-hover: var(--flavorD-scarlet-regular-11); --accent-bg-active: var(--flavorD-scarlet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-10); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-bold-10); --accent-bg-hover: var(--flavorD-scarlet-bold-11); --accent-bg-active: var(--flavorD-scarlet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-11); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-muted-10); --accent-bg-hover: var(--flavorD-orange-muted-11); --accent-bg-active: var(--flavorD-orange-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-11); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-regular-10); --accent-bg-hover: var(--flavorD-orange-regular-11); --accent-bg-active: var(--flavorD-orange-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-10); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-bold-10); --accent-bg-hover: var(--flavorD-orange-bold-11); --accent-bg-active: var(--flavorD-orange-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-11); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-muted-10); --accent-bg-hover: var(--flavorD-tangerine-muted-11); --accent-bg-active: var(--flavorD-tangerine-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-11); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-regular-10); --accent-bg-hover: var(--flavorD-tangerine-regular-11); --accent-bg-active: var(--flavorD-tangerine-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-10); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-bold-10); --accent-bg-hover: var(--flavorD-tangerine-bold-11); --accent-bg-active: var(--flavorD-tangerine-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-11); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-muted-10); --accent-bg-hover: var(--flavorD-yellow-muted-11); --accent-bg-active: var(--flavorD-yellow-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-11); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-regular-10); --accent-bg-hover: var(--flavorD-yellow-regular-11); --accent-bg-active: var(--flavorD-yellow-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-10); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-bold-10); --accent-bg-hover: var(--flavorD-yellow-bold-11); --accent-bg-active: var(--flavorD-yellow-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-11); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-muted-10); --accent-bg-hover: var(--flavorD-lime-muted-11); --accent-bg-active: var(--flavorD-lime-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-11); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-regular-10); --accent-bg-hover: var(--flavorD-lime-regular-11); --accent-bg-active: var(--flavorD-lime-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-10); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-bold-10); --accent-bg-hover: var(--flavorD-lime-bold-11); --accent-bg-active: var(--flavorD-lime-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-11); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-muted-10); --accent-bg-hover: var(--flavorD-green-muted-11); --accent-bg-active: var(--flavorD-green-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-11); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-10); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-11); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-muted-10); --accent-bg-hover: var(--flavorD-teal-muted-11); --accent-bg-active: var(--flavorD-teal-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-11); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-10); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-11); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-muted-10); --accent-bg-hover: var(--flavorD-cyan-muted-11); --accent-bg-active: var(--flavorD-cyan-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-11); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-regular-10); --accent-bg-hover: var(--flavorD-cyan-regular-11); --accent-bg-active: var(--flavorD-cyan-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-10); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-bold-10); --accent-bg-hover: var(--flavorD-cyan-bold-11); --accent-bg-active: var(--flavorD-cyan-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-11); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-11); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-10); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-11); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-muted-10); --accent-bg-hover: var(--flavorD-violet-muted-11); --accent-bg-active: var(--flavorD-violet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-11); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-regular-10); --accent-bg-hover: var(--flavorD-violet-regular-11); --accent-bg-active: var(--flavorD-violet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-10); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-bold-10); --accent-bg-hover: var(--flavorD-violet-bold-11); --accent-bg-active: var(--flavorD-violet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-11); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-muted-10); --accent-bg-hover: var(--flavorD-purple-muted-11); --accent-bg-active: var(--flavorD-purple-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-11); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-regular-10); --accent-bg-hover: var(--flavorD-purple-regular-11); --accent-bg-active: var(--flavorD-purple-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-10); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-bold-10); --accent-bg-hover: var(--flavorD-purple-bold-11); --accent-bg-active: var(--flavorD-purple-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-11); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-11); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-10); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-11); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-11); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-10); --secondary-bg-hover: var(--flavorD-orange-muted-11); --secondary-bg-active: var(--flavorD-orange-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-9); --secondary-text: var(--flavorD-orange-muted-11); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="dark-primary"], :root[data-contrast="aaa"]:not([data-hue])[data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-10); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-10); --secondary-bg-hover: var(--flavorD-orange-regular-11); --secondary-bg-active: var(--flavorD-orange-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-9); --secondary-text: var(--flavorD-orange-regular-10); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-11); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-10); --secondary-bg-hover: var(--flavorD-orange-bold-11); --secondary-bg-active: var(--flavorD-orange-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-11); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-11); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-10); --secondary-bg-hover: var(--flavorD-cyan-muted-11); --secondary-bg-active: var(--flavorD-cyan-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-9); --secondary-text: var(--flavorD-cyan-muted-11); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-11); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-10); --secondary-bg-hover: var(--flavorD-cyan-regular-11); --secondary-bg-active: var(--flavorD-cyan-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-8); --secondary-text: var(--flavorD-cyan-regular-10); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-11); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-10); --secondary-bg-hover: var(--flavorD-cyan-bold-11); --secondary-bg-active: var(--flavorD-cyan-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-9); --secondary-text: var(--flavorD-cyan-bold-11); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-muted-9); --accent-bg-hover: var(--flavorD-neutral-muted-10); --accent-bg-active: var(--flavorD-neutral-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-9); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-regular-9); --accent-bg-hover: var(--flavorD-neutral-regular-10); --accent-bg-active: var(--flavorD-neutral-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-9); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-bold-9); --accent-bg-hover: var(--flavorD-neutral-bold-10); --accent-bg-active: var(--flavorD-neutral-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-9); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="red"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-muted-9); --accent-bg-hover: var(--flavorD-red-muted-10); --accent-bg-active: var(--flavorD-red-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-9); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="red"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-regular-9); --accent-bg-hover: var(--flavorD-red-regular-10); --accent-bg-active: var(--flavorD-red-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-9); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="red"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-bold-9); --accent-bg-hover: var(--flavorD-red-bold-10); --accent-bg-active: var(--flavorD-red-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-9); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-muted-9); --accent-bg-hover: var(--flavorD-scarlet-muted-10); --accent-bg-active: var(--flavorD-scarlet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-9); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-regular-9); --accent-bg-hover: var(--flavorD-scarlet-regular-10); --accent-bg-active: var(--flavorD-scarlet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-9); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-bold-9); --accent-bg-hover: var(--flavorD-scarlet-bold-10); --accent-bg-active: var(--flavorD-scarlet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-9); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-muted-9); --accent-bg-hover: var(--flavorD-orange-muted-10); --accent-bg-active: var(--flavorD-orange-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-9); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-regular-9); --accent-bg-hover: var(--flavorD-orange-regular-10); --accent-bg-active: var(--flavorD-orange-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-9); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-bold-9); --accent-bg-hover: var(--flavorD-orange-bold-10); --accent-bg-active: var(--flavorD-orange-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-9); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-muted-9); --accent-bg-hover: var(--flavorD-tangerine-muted-10); --accent-bg-active: var(--flavorD-tangerine-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-9); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-regular-9); --accent-bg-hover: var(--flavorD-tangerine-regular-10); --accent-bg-active: var(--flavorD-tangerine-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-9); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-bold-9); --accent-bg-hover: var(--flavorD-tangerine-bold-10); --accent-bg-active: var(--flavorD-tangerine-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-9); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-muted-9); --accent-bg-hover: var(--flavorD-yellow-muted-10); --accent-bg-active: var(--flavorD-yellow-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-9); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-regular-9); --accent-bg-hover: var(--flavorD-yellow-regular-10); --accent-bg-active: var(--flavorD-yellow-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-9); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-bold-9); --accent-bg-hover: var(--flavorD-yellow-bold-10); --accent-bg-active: var(--flavorD-yellow-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-9); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-muted-9); --accent-bg-hover: var(--flavorD-lime-muted-10); --accent-bg-active: var(--flavorD-lime-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-9); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-regular-9); --accent-bg-hover: var(--flavorD-lime-regular-10); --accent-bg-active: var(--flavorD-lime-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-9); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-bold-9); --accent-bg-hover: var(--flavorD-lime-bold-10); --accent-bg-active: var(--flavorD-lime-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-9); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="green"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-muted-9); --accent-bg-hover: var(--flavorD-green-muted-10); --accent-bg-active: var(--flavorD-green-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-9); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="green"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-9); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="green"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-9); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-muted-9); --accent-bg-hover: var(--flavorD-teal-muted-10); --accent-bg-active: var(--flavorD-teal-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-9); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-9); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-9); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-muted-9); --accent-bg-hover: var(--flavorD-cyan-muted-10); --accent-bg-active: var(--flavorD-cyan-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-9); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-regular-9); --accent-bg-hover: var(--flavorD-cyan-regular-10); --accent-bg-active: var(--flavorD-cyan-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-9); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-bold-9); --accent-bg-hover: var(--flavorD-cyan-bold-10); --accent-bg-active: var(--flavorD-cyan-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-9); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-9); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-9); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-muted-9); --accent-bg-hover: var(--flavorD-violet-muted-10); --accent-bg-active: var(--flavorD-violet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-9); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-regular-9); --accent-bg-hover: var(--flavorD-violet-regular-10); --accent-bg-active: var(--flavorD-violet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-9); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-bold-9); --accent-bg-hover: var(--flavorD-violet-bold-10); --accent-bg-active: var(--flavorD-violet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-9); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-muted-9); --accent-bg-hover: var(--flavorD-purple-muted-10); --accent-bg-active: var(--flavorD-purple-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-9); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-regular-9); --accent-bg-hover: var(--flavorD-purple-regular-10); --accent-bg-active: var(--flavorD-purple-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-9); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-bold-9); --accent-bg-hover: var(--flavorD-purple-bold-10); --accent-bg-active: var(--flavorD-purple-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-9); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-9); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-9); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-9); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-9); --secondary-bg-hover: var(--flavorD-orange-muted-10); --secondary-bg-active: var(--flavorD-orange-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-8); --secondary-text: var(--flavorD-orange-muted-9); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="regular"][data-bg="dark-primary"], :root[data-mode="dark"]:not([data-hue])[data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-9); --secondary-bg-hover: var(--flavorD-orange-regular-10); --secondary-bg-active: var(--flavorD-orange-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-8); --secondary-text: var(--flavorD-orange-regular-9); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-9); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-9); --secondary-bg-hover: var(--flavorD-orange-bold-10); --secondary-bg-active: var(--flavorD-orange-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-9); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-9); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-9); --secondary-bg-hover: var(--flavorD-cyan-muted-10); --secondary-bg-active: var(--flavorD-cyan-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-8); --secondary-text: var(--flavorD-cyan-muted-9); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-9); --secondary-bg-hover: var(--flavorD-cyan-regular-10); --secondary-bg-active: var(--flavorD-cyan-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-8); --secondary-text: var(--flavorD-cyan-regular-9); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-9); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-9); --secondary-bg-hover: var(--flavorD-cyan-bold-10); --secondary-bg-active: var(--flavorD-cyan-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-8); --secondary-text: var(--flavorD-cyan-bold-9); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-muted-10); --accent-bg-hover: var(--flavorD-neutral-muted-11); --accent-bg-active: var(--flavorD-neutral-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-10); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-regular-10); --accent-bg-hover: var(--flavorD-neutral-regular-11); --accent-bg-active: var(--flavorD-neutral-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-10); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-neutral-bold-10); --accent-bg-hover: var(--flavorD-neutral-bold-11); --accent-bg-active: var(--flavorD-neutral-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-10); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-muted-10); --accent-bg-hover: var(--flavorD-red-muted-11); --accent-bg-active: var(--flavorD-red-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-10); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-regular-10); --accent-bg-hover: var(--flavorD-red-regular-11); --accent-bg-active: var(--flavorD-red-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-10); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-red-bold-10); --accent-bg-hover: var(--flavorD-red-bold-11); --accent-bg-active: var(--flavorD-red-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-10); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-muted-10); --accent-bg-hover: var(--flavorD-scarlet-muted-11); --accent-bg-active: var(--flavorD-scarlet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-10); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-regular-10); --accent-bg-hover: var(--flavorD-scarlet-regular-11); --accent-bg-active: var(--flavorD-scarlet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-10); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-scarlet-bold-10); --accent-bg-hover: var(--flavorD-scarlet-bold-11); --accent-bg-active: var(--flavorD-scarlet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-10); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-muted-10); --accent-bg-hover: var(--flavorD-orange-muted-11); --accent-bg-active: var(--flavorD-orange-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-10); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-regular-10); --accent-bg-hover: var(--flavorD-orange-regular-11); --accent-bg-active: var(--flavorD-orange-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-10); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-orange-bold-10); --accent-bg-hover: var(--flavorD-orange-bold-11); --accent-bg-active: var(--flavorD-orange-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-10); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-muted-10); --accent-bg-hover: var(--flavorD-tangerine-muted-11); --accent-bg-active: var(--flavorD-tangerine-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-10); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-regular-10); --accent-bg-hover: var(--flavorD-tangerine-regular-11); --accent-bg-active: var(--flavorD-tangerine-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-10); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-tangerine-bold-10); --accent-bg-hover: var(--flavorD-tangerine-bold-11); --accent-bg-active: var(--flavorD-tangerine-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-10); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-muted-10); --accent-bg-hover: var(--flavorD-yellow-muted-11); --accent-bg-active: var(--flavorD-yellow-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-10); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-regular-10); --accent-bg-hover: var(--flavorD-yellow-regular-11); --accent-bg-active: var(--flavorD-yellow-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-10); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-yellow-bold-10); --accent-bg-hover: var(--flavorD-yellow-bold-11); --accent-bg-active: var(--flavorD-yellow-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-10); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-muted-10); --accent-bg-hover: var(--flavorD-lime-muted-11); --accent-bg-active: var(--flavorD-lime-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-10); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-regular-10); --accent-bg-hover: var(--flavorD-lime-regular-11); --accent-bg-active: var(--flavorD-lime-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-10); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-lime-bold-10); --accent-bg-hover: var(--flavorD-lime-bold-11); --accent-bg-active: var(--flavorD-lime-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-10); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-muted-10); --accent-bg-hover: var(--flavorD-green-muted-11); --accent-bg-active: var(--flavorD-green-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-10); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-10); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-10); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-muted-10); --accent-bg-hover: var(--flavorD-teal-muted-11); --accent-bg-active: var(--flavorD-teal-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-10); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-10); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-10); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-muted-10); --accent-bg-hover: var(--flavorD-cyan-muted-11); --accent-bg-active: var(--flavorD-cyan-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-10); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-regular-10); --accent-bg-hover: var(--flavorD-cyan-regular-11); --accent-bg-active: var(--flavorD-cyan-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-10); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-cyan-bold-10); --accent-bg-hover: var(--flavorD-cyan-bold-11); --accent-bg-active: var(--flavorD-cyan-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-10); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-10); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-10); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-10); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-muted-10); --accent-bg-hover: var(--flavorD-violet-muted-11); --accent-bg-active: var(--flavorD-violet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-10); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-regular-10); --accent-bg-hover: var(--flavorD-violet-regular-11); --accent-bg-active: var(--flavorD-violet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-10); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-violet-bold-10); --accent-bg-hover: var(--flavorD-violet-bold-11); --accent-bg-active: var(--flavorD-violet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-10); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-muted-10); --accent-bg-hover: var(--flavorD-purple-muted-11); --accent-bg-active: var(--flavorD-purple-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-10); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-regular-10); --accent-bg-hover: var(--flavorD-purple-regular-11); --accent-bg-active: var(--flavorD-purple-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-10); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-purple-bold-10); --accent-bg-hover: var(--flavorD-purple-bold-11); --accent-bg-active: var(--flavorD-purple-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-10); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-10); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-8); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-10); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-10); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-8); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-10); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-10); --secondary-bg-hover: var(--flavorD-orange-muted-11); --secondary-bg-active: var(--flavorD-orange-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-8); --secondary-text: var(--flavorD-orange-muted-10); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="dark-primary"], :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue])[data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-10); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-10); --secondary-bg-hover: var(--flavorD-orange-regular-11); --secondary-bg-active: var(--flavorD-orange-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-8); --secondary-text: var(--flavorD-orange-regular-10); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-10); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-10); --secondary-bg-hover: var(--flavorD-orange-bold-11); --secondary-bg-active: var(--flavorD-orange-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-10); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-10); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-10); --secondary-bg-hover: var(--flavorD-cyan-muted-11); --secondary-bg-active: var(--flavorD-cyan-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-8); --secondary-text: var(--flavorD-cyan-muted-10); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-10); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-10); --secondary-bg-hover: var(--flavorD-cyan-regular-11); --secondary-bg-active: var(--flavorD-cyan-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-8); --secondary-text: var(--flavorD-cyan-regular-10); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="dark-primary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-11); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-10); --secondary-bg-hover: var(--flavorD-cyan-bold-11); --secondary-bg-active: var(--flavorD-cyan-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-8); --secondary-text: var(--flavorD-cyan-bold-10); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-hue="neutral"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-muted-9); --accent-bg-hover: var(--flavorD-neutral-muted-10); --accent-bg-active: var(--flavorD-neutral-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-10); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="neutral"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-regular-9); --accent-bg-hover: var(--flavorD-neutral-regular-10); --accent-bg-active: var(--flavorD-neutral-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-9); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="neutral"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-bold-9); --accent-bg-hover: var(--flavorD-neutral-bold-10); --accent-bg-active: var(--flavorD-neutral-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-10); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="red"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-muted-9); --accent-bg-hover: var(--flavorD-red-muted-10); --accent-bg-active: var(--flavorD-red-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-10); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="red"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-regular-9); --accent-bg-hover: var(--flavorD-red-regular-10); --accent-bg-active: var(--flavorD-red-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-9); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="red"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-bold-9); --accent-bg-hover: var(--flavorD-red-bold-10); --accent-bg-active: var(--flavorD-red-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-10); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="scarlet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-muted-9); --accent-bg-hover: var(--flavorD-scarlet-muted-10); --accent-bg-active: var(--flavorD-scarlet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-10); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="scarlet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-regular-9); --accent-bg-hover: var(--flavorD-scarlet-regular-10); --accent-bg-active: var(--flavorD-scarlet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-9); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="scarlet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-bold-9); --accent-bg-hover: var(--flavorD-scarlet-bold-10); --accent-bg-active: var(--flavorD-scarlet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-10); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="orange"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-muted-9); --accent-bg-hover: var(--flavorD-orange-muted-10); --accent-bg-active: var(--flavorD-orange-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-10); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="orange"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-regular-9); --accent-bg-hover: var(--flavorD-orange-regular-10); --accent-bg-active: var(--flavorD-orange-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-9); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="orange"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-bold-9); --accent-bg-hover: var(--flavorD-orange-bold-10); --accent-bg-active: var(--flavorD-orange-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-10); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="tangerine"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-muted-9); --accent-bg-hover: var(--flavorD-tangerine-muted-10); --accent-bg-active: var(--flavorD-tangerine-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-10); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="tangerine"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-regular-9); --accent-bg-hover: var(--flavorD-tangerine-regular-10); --accent-bg-active: var(--flavorD-tangerine-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-9); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="tangerine"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-bold-9); --accent-bg-hover: var(--flavorD-tangerine-bold-10); --accent-bg-active: var(--flavorD-tangerine-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-10); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="yellow"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-muted-9); --accent-bg-hover: var(--flavorD-yellow-muted-10); --accent-bg-active: var(--flavorD-yellow-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-10); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="yellow"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-regular-9); --accent-bg-hover: var(--flavorD-yellow-regular-10); --accent-bg-active: var(--flavorD-yellow-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-9); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="yellow"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-bold-9); --accent-bg-hover: var(--flavorD-yellow-bold-10); --accent-bg-active: var(--flavorD-yellow-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-10); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="lime"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-muted-9); --accent-bg-hover: var(--flavorD-lime-muted-10); --accent-bg-active: var(--flavorD-lime-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-10); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="lime"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-regular-9); --accent-bg-hover: var(--flavorD-lime-regular-10); --accent-bg-active: var(--flavorD-lime-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-9); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="lime"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-bold-9); --accent-bg-hover: var(--flavorD-lime-bold-10); --accent-bg-active: var(--flavorD-lime-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-10); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="green"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-muted-9); --accent-bg-hover: var(--flavorD-green-muted-10); --accent-bg-active: var(--flavorD-green-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-10); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="green"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-9); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="green"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-10); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="teal"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-muted-9); --accent-bg-hover: var(--flavorD-teal-muted-10); --accent-bg-active: var(--flavorD-teal-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-10); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="teal"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-9); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="teal"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-10); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="cyan"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-muted-9); --accent-bg-hover: var(--flavorD-cyan-muted-10); --accent-bg-active: var(--flavorD-cyan-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-10); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="cyan"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-regular-9); --accent-bg-hover: var(--flavorD-cyan-regular-10); --accent-bg-active: var(--flavorD-cyan-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-9); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="cyan"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-bold-9); --accent-bg-hover: var(--flavorD-cyan-bold-10); --accent-bg-active: var(--flavorD-cyan-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-10); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="blue"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-10); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="blue"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="blue"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-10); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="violet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-muted-9); --accent-bg-hover: var(--flavorD-violet-muted-10); --accent-bg-active: var(--flavorD-violet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-10); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="violet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-regular-9); --accent-bg-hover: var(--flavorD-violet-regular-10); --accent-bg-active: var(--flavorD-violet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-9); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="violet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-bold-9); --accent-bg-hover: var(--flavorD-violet-bold-10); --accent-bg-active: var(--flavorD-violet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-10); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="purple"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-muted-9); --accent-bg-hover: var(--flavorD-purple-muted-10); --accent-bg-active: var(--flavorD-purple-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-10); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="purple"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-regular-9); --accent-bg-hover: var(--flavorD-purple-regular-10); --accent-bg-active: var(--flavorD-purple-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-9); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="purple"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-bold-9); --accent-bg-hover: var(--flavorD-purple-bold-10); --accent-bg-active: var(--flavorD-purple-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-10); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="magenta"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-10); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-10); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-hue="magenta"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-hue="magenta"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-10); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-10); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-hue="brand"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-10); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-9); --secondary-bg-hover: var(--flavorD-orange-muted-10); --secondary-bg-active: var(--flavorD-orange-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-9); --secondary-text: var(--flavorD-orange-muted-10); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-hue="brand"][data-sat="regular"][data-bg="dark-secondary"], :root:not([data-hue])[data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-9); --secondary-bg-hover: var(--flavorD-orange-regular-10); --secondary-bg-active: var(--flavorD-orange-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-9); --secondary-text: var(--flavorD-orange-regular-9); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-hue="brand"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-10); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-9); --secondary-bg-hover: var(--flavorD-orange-bold-10); --secondary-bg-active: var(--flavorD-orange-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-10); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-hue="brand2"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-10); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-9); --secondary-bg-hover: var(--flavorD-cyan-muted-10); --secondary-bg-active: var(--flavorD-cyan-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-9); --secondary-text: var(--flavorD-cyan-muted-10); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-hue="brand2"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-9); --secondary-bg-hover: var(--flavorD-cyan-regular-10); --secondary-bg-active: var(--flavorD-cyan-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-9); --secondary-text: var(--flavorD-cyan-regular-9); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-hue="brand2"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-10); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-9); --secondary-bg-hover: var(--flavorD-cyan-bold-10); --secondary-bg-active: var(--flavorD-cyan-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-9); --secondary-text: var(--flavorD-cyan-bold-10); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-muted-10); --accent-bg-hover: var(--flavorD-neutral-muted-11); --accent-bg-active: var(--flavorD-neutral-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-11); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-regular-10); --accent-bg-hover: var(--flavorD-neutral-regular-11); --accent-bg-active: var(--flavorD-neutral-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-11); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-bold-10); --accent-bg-hover: var(--flavorD-neutral-bold-11); --accent-bg-active: var(--flavorD-neutral-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-11); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-muted-10); --accent-bg-hover: var(--flavorD-red-muted-11); --accent-bg-active: var(--flavorD-red-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-11); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-regular-10); --accent-bg-hover: var(--flavorD-red-regular-11); --accent-bg-active: var(--flavorD-red-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-11); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-bold-10); --accent-bg-hover: var(--flavorD-red-bold-11); --accent-bg-active: var(--flavorD-red-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-11); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-muted-10); --accent-bg-hover: var(--flavorD-scarlet-muted-11); --accent-bg-active: var(--flavorD-scarlet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-11); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-regular-10); --accent-bg-hover: var(--flavorD-scarlet-regular-11); --accent-bg-active: var(--flavorD-scarlet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-11); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-bold-10); --accent-bg-hover: var(--flavorD-scarlet-bold-11); --accent-bg-active: var(--flavorD-scarlet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-11); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-muted-10); --accent-bg-hover: var(--flavorD-orange-muted-11); --accent-bg-active: var(--flavorD-orange-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-11); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-regular-10); --accent-bg-hover: var(--flavorD-orange-regular-11); --accent-bg-active: var(--flavorD-orange-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-11); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-bold-10); --accent-bg-hover: var(--flavorD-orange-bold-11); --accent-bg-active: var(--flavorD-orange-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-11); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-muted-10); --accent-bg-hover: var(--flavorD-tangerine-muted-11); --accent-bg-active: var(--flavorD-tangerine-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-11); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-regular-10); --accent-bg-hover: var(--flavorD-tangerine-regular-11); --accent-bg-active: var(--flavorD-tangerine-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-11); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-bold-10); --accent-bg-hover: var(--flavorD-tangerine-bold-11); --accent-bg-active: var(--flavorD-tangerine-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-11); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-muted-10); --accent-bg-hover: var(--flavorD-yellow-muted-11); --accent-bg-active: var(--flavorD-yellow-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-11); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-regular-10); --accent-bg-hover: var(--flavorD-yellow-regular-11); --accent-bg-active: var(--flavorD-yellow-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-11); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-bold-10); --accent-bg-hover: var(--flavorD-yellow-bold-11); --accent-bg-active: var(--flavorD-yellow-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-11); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-muted-10); --accent-bg-hover: var(--flavorD-lime-muted-11); --accent-bg-active: var(--flavorD-lime-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-11); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-regular-10); --accent-bg-hover: var(--flavorD-lime-regular-11); --accent-bg-active: var(--flavorD-lime-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-11); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-bold-10); --accent-bg-hover: var(--flavorD-lime-bold-11); --accent-bg-active: var(--flavorD-lime-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-11); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-muted-10); --accent-bg-hover: var(--flavorD-green-muted-11); --accent-bg-active: var(--flavorD-green-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-11); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-11); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-11); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-12); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-muted-10); --accent-bg-hover: var(--flavorD-teal-muted-11); --accent-bg-active: var(--flavorD-teal-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-11); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-12); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-11); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-11); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-muted-10); --accent-bg-hover: var(--flavorD-cyan-muted-11); --accent-bg-active: var(--flavorD-cyan-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-11); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-regular-10); --accent-bg-hover: var(--flavorD-cyan-regular-11); --accent-bg-active: var(--flavorD-cyan-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-11); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-bold-10); --accent-bg-hover: var(--flavorD-cyan-bold-11); --accent-bg-active: var(--flavorD-cyan-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-11); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-11); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-11); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-11); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-muted-10); --accent-bg-hover: var(--flavorD-violet-muted-11); --accent-bg-active: var(--flavorD-violet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-11); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-regular-10); --accent-bg-hover: var(--flavorD-violet-regular-11); --accent-bg-active: var(--flavorD-violet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-11); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-bold-10); --accent-bg-hover: var(--flavorD-violet-bold-11); --accent-bg-active: var(--flavorD-violet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-11); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-muted-10); --accent-bg-hover: var(--flavorD-purple-muted-11); --accent-bg-active: var(--flavorD-purple-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-11); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-regular-10); --accent-bg-hover: var(--flavorD-purple-regular-11); --accent-bg-active: var(--flavorD-purple-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-11); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-bold-10); --accent-bg-hover: var(--flavorD-purple-bold-11); --accent-bg-active: var(--flavorD-purple-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-11); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-11); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-11); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-9); --secondary-text: var(--flavorD-neutral-regular-11); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-11); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-11); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-10); --secondary-bg-hover: var(--flavorD-orange-muted-11); --secondary-bg-active: var(--flavorD-orange-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-9); --secondary-text: var(--flavorD-orange-muted-11); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="dark-secondary"], :root[data-contrast="aaa"]:not([data-hue])[data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-11); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-10); --secondary-bg-hover: var(--flavorD-orange-regular-11); --secondary-bg-active: var(--flavorD-orange-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-9); --secondary-text: var(--flavorD-orange-regular-11); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-11); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-10); --secondary-bg-hover: var(--flavorD-orange-bold-11); --secondary-bg-active: var(--flavorD-orange-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-12); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-12); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-10); --secondary-bg-hover: var(--flavorD-cyan-muted-11); --secondary-bg-active: var(--flavorD-cyan-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-9); --secondary-text: var(--flavorD-cyan-muted-11); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-11); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-10); --secondary-bg-hover: var(--flavorD-cyan-regular-11); --secondary-bg-active: var(--flavorD-cyan-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-9); --secondary-text: var(--flavorD-cyan-regular-11); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-12); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-10); --secondary-bg-hover: var(--flavorD-cyan-bold-11); --secondary-bg-active: var(--flavorD-cyan-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-9); --secondary-text: var(--flavorD-cyan-bold-11); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-muted-9); --accent-bg-hover: var(--flavorD-neutral-muted-10); --accent-bg-active: var(--flavorD-neutral-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-9); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-regular-9); --accent-bg-hover: var(--flavorD-neutral-regular-10); --accent-bg-active: var(--flavorD-neutral-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-9); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-bold-9); --accent-bg-hover: var(--flavorD-neutral-bold-10); --accent-bg-active: var(--flavorD-neutral-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-9); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="red"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-muted-9); --accent-bg-hover: var(--flavorD-red-muted-10); --accent-bg-active: var(--flavorD-red-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-9); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="red"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-regular-9); --accent-bg-hover: var(--flavorD-red-regular-10); --accent-bg-active: var(--flavorD-red-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-9); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="red"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-bold-9); --accent-bg-hover: var(--flavorD-red-bold-10); --accent-bg-active: var(--flavorD-red-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-9); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-muted-9); --accent-bg-hover: var(--flavorD-scarlet-muted-10); --accent-bg-active: var(--flavorD-scarlet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-9); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-regular-9); --accent-bg-hover: var(--flavorD-scarlet-regular-10); --accent-bg-active: var(--flavorD-scarlet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-9); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-bold-9); --accent-bg-hover: var(--flavorD-scarlet-bold-10); --accent-bg-active: var(--flavorD-scarlet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-9); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-muted-9); --accent-bg-hover: var(--flavorD-orange-muted-10); --accent-bg-active: var(--flavorD-orange-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-9); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-regular-9); --accent-bg-hover: var(--flavorD-orange-regular-10); --accent-bg-active: var(--flavorD-orange-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-9); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-bold-9); --accent-bg-hover: var(--flavorD-orange-bold-10); --accent-bg-active: var(--flavorD-orange-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-9); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-muted-9); --accent-bg-hover: var(--flavorD-tangerine-muted-10); --accent-bg-active: var(--flavorD-tangerine-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-9); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-regular-9); --accent-bg-hover: var(--flavorD-tangerine-regular-10); --accent-bg-active: var(--flavorD-tangerine-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-9); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-bold-9); --accent-bg-hover: var(--flavorD-tangerine-bold-10); --accent-bg-active: var(--flavorD-tangerine-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-9); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-muted-9); --accent-bg-hover: var(--flavorD-yellow-muted-10); --accent-bg-active: var(--flavorD-yellow-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-9); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-regular-9); --accent-bg-hover: var(--flavorD-yellow-regular-10); --accent-bg-active: var(--flavorD-yellow-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-9); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-bold-9); --accent-bg-hover: var(--flavorD-yellow-bold-10); --accent-bg-active: var(--flavorD-yellow-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-9); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-muted-9); --accent-bg-hover: var(--flavorD-lime-muted-10); --accent-bg-active: var(--flavorD-lime-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-9); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-regular-9); --accent-bg-hover: var(--flavorD-lime-regular-10); --accent-bg-active: var(--flavorD-lime-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-9); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-bold-9); --accent-bg-hover: var(--flavorD-lime-bold-10); --accent-bg-active: var(--flavorD-lime-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-9); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="green"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-muted-9); --accent-bg-hover: var(--flavorD-green-muted-10); --accent-bg-active: var(--flavorD-green-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-9); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="green"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-9); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="green"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-9); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-muted-9); --accent-bg-hover: var(--flavorD-teal-muted-10); --accent-bg-active: var(--flavorD-teal-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-9); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-9); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-9); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-muted-9); --accent-bg-hover: var(--flavorD-cyan-muted-10); --accent-bg-active: var(--flavorD-cyan-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-9); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-regular-9); --accent-bg-hover: var(--flavorD-cyan-regular-10); --accent-bg-active: var(--flavorD-cyan-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-9); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-bold-9); --accent-bg-hover: var(--flavorD-cyan-bold-10); --accent-bg-active: var(--flavorD-cyan-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-9); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-9); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-9); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-muted-9); --accent-bg-hover: var(--flavorD-violet-muted-10); --accent-bg-active: var(--flavorD-violet-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-9); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-regular-9); --accent-bg-hover: var(--flavorD-violet-regular-10); --accent-bg-active: var(--flavorD-violet-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-9); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-bold-9); --accent-bg-hover: var(--flavorD-violet-bold-10); --accent-bg-active: var(--flavorD-violet-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-9); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-muted-9); --accent-bg-hover: var(--flavorD-purple-muted-10); --accent-bg-active: var(--flavorD-purple-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-9); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-regular-9); --accent-bg-hover: var(--flavorD-purple-regular-10); --accent-bg-active: var(--flavorD-purple-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-9); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-bold-9); --accent-bg-hover: var(--flavorD-purple-bold-10); --accent-bg-active: var(--flavorD-purple-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-9); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-9); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-9); --secondary-bg-hover: var(--flavorD-neutral-muted-10); --secondary-bg-active: var(--flavorD-neutral-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-9); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-9); --secondary-bg-hover: var(--flavorD-neutral-regular-10); --secondary-bg-active: var(--flavorD-neutral-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-9); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-9); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-9); --secondary-bg-hover: var(--flavorD-neutral-bold-10); --secondary-bg-active: var(--flavorD-neutral-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-9); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-9); --accent-bg-hover: var(--flavorD-blue-muted-10); --accent-bg-active: var(--flavorD-blue-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-9); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-9); --secondary-bg-hover: var(--flavorD-orange-muted-10); --secondary-bg-active: var(--flavorD-orange-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-9); --secondary-text: var(--flavorD-orange-muted-9); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="regular"][data-bg="dark-secondary"], :root[data-mode="dark"]:not([data-hue])[data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-9); --accent-bg-hover: var(--flavorD-blue-regular-10); --accent-bg-active: var(--flavorD-blue-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-9); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-9); --secondary-bg-hover: var(--flavorD-orange-regular-10); --secondary-bg-active: var(--flavorD-orange-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-9); --secondary-text: var(--flavorD-orange-regular-9); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-9); --accent-bg-hover: var(--flavorD-blue-bold-10); --accent-bg-active: var(--flavorD-blue-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-9); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-9); --secondary-bg-hover: var(--flavorD-orange-bold-10); --secondary-bg-active: var(--flavorD-orange-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-9); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-9); --accent-bg-hover: var(--flavorD-magenta-muted-10); --accent-bg-active: var(--flavorD-magenta-muted-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-9); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-9); --secondary-bg-hover: var(--flavorD-cyan-muted-10); --secondary-bg-active: var(--flavorD-cyan-muted-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-9); --secondary-text: var(--flavorD-cyan-muted-9); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-9); --accent-bg-hover: var(--flavorD-magenta-regular-10); --accent-bg-active: var(--flavorD-magenta-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-9); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-9); --secondary-bg-hover: var(--flavorD-cyan-regular-10); --secondary-bg-active: var(--flavorD-cyan-regular-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-8); --secondary-text: var(--flavorD-cyan-regular-9); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-9); --accent-bg-hover: var(--flavorD-magenta-bold-10); --accent-bg-active: var(--flavorD-magenta-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-10); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-9); --secondary-bg-hover: var(--flavorD-cyan-bold-10); --secondary-bg-active: var(--flavorD-cyan-bold-11); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-9); --secondary-text: var(--flavorD-cyan-bold-9); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-muted-10); --accent-bg-hover: var(--flavorD-neutral-muted-11); --accent-bg-active: var(--flavorD-neutral-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-muted-11); --text-on-accent-subtle: var(--flavorD-neutral-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-regular-10); --accent-bg-hover: var(--flavorD-neutral-regular-11); --accent-bg-active: var(--flavorD-neutral-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-regular-10); --text-on-accent-subtle: var(--flavorD-neutral-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-neutral-bold-10); --accent-bg-hover: var(--flavorD-neutral-bold-11); --accent-bg-active: var(--flavorD-neutral-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-neutral-bold-11); --text-on-accent-subtle: var(--flavorD-neutral-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-muted-10); --accent-bg-hover: var(--flavorD-red-muted-11); --accent-bg-active: var(--flavorD-red-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-muted-11); --text-on-accent-subtle: var(--flavorD-red-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-regular-10); --accent-bg-hover: var(--flavorD-red-regular-11); --accent-bg-active: var(--flavorD-red-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-regular-10); --text-on-accent-subtle: var(--flavorD-red-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-red-bold-10); --accent-bg-hover: var(--flavorD-red-bold-11); --accent-bg-active: var(--flavorD-red-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-red-bold-11); --text-on-accent-subtle: var(--flavorD-red-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-muted-10); --accent-bg-hover: var(--flavorD-scarlet-muted-11); --accent-bg-active: var(--flavorD-scarlet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-muted-11); --text-on-accent-subtle: var(--flavorD-scarlet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-regular-10); --accent-bg-hover: var(--flavorD-scarlet-regular-11); --accent-bg-active: var(--flavorD-scarlet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-regular-10); --text-on-accent-subtle: var(--flavorD-scarlet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-scarlet-bold-10); --accent-bg-hover: var(--flavorD-scarlet-bold-11); --accent-bg-active: var(--flavorD-scarlet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-scarlet-bold-11); --text-on-accent-subtle: var(--flavorD-scarlet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-muted-10); --accent-bg-hover: var(--flavorD-orange-muted-11); --accent-bg-active: var(--flavorD-orange-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-muted-11); --text-on-accent-subtle: var(--flavorD-orange-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-regular-10); --accent-bg-hover: var(--flavorD-orange-regular-11); --accent-bg-active: var(--flavorD-orange-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-regular-10); --text-on-accent-subtle: var(--flavorD-orange-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-orange-bold-10); --accent-bg-hover: var(--flavorD-orange-bold-11); --accent-bg-active: var(--flavorD-orange-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-orange-bold-11); --text-on-accent-subtle: var(--flavorD-orange-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-muted-10); --accent-bg-hover: var(--flavorD-tangerine-muted-11); --accent-bg-active: var(--flavorD-tangerine-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-muted-11); --text-on-accent-subtle: var(--flavorD-tangerine-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-regular-10); --accent-bg-hover: var(--flavorD-tangerine-regular-11); --accent-bg-active: var(--flavorD-tangerine-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-regular-10); --text-on-accent-subtle: var(--flavorD-tangerine-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-tangerine-bold-10); --accent-bg-hover: var(--flavorD-tangerine-bold-11); --accent-bg-active: var(--flavorD-tangerine-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-tangerine-bold-11); --text-on-accent-subtle: var(--flavorD-tangerine-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-muted-10); --accent-bg-hover: var(--flavorD-yellow-muted-11); --accent-bg-active: var(--flavorD-yellow-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-muted-11); --text-on-accent-subtle: var(--flavorD-yellow-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-regular-10); --accent-bg-hover: var(--flavorD-yellow-regular-11); --accent-bg-active: var(--flavorD-yellow-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-regular-10); --text-on-accent-subtle: var(--flavorD-yellow-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-yellow-bold-10); --accent-bg-hover: var(--flavorD-yellow-bold-11); --accent-bg-active: var(--flavorD-yellow-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-yellow-bold-11); --text-on-accent-subtle: var(--flavorD-yellow-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-muted-10); --accent-bg-hover: var(--flavorD-lime-muted-11); --accent-bg-active: var(--flavorD-lime-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-muted-11); --text-on-accent-subtle: var(--flavorD-lime-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-regular-10); --accent-bg-hover: var(--flavorD-lime-regular-11); --accent-bg-active: var(--flavorD-lime-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-regular-10); --text-on-accent-subtle: var(--flavorD-lime-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-lime-bold-10); --accent-bg-hover: var(--flavorD-lime-bold-11); --accent-bg-active: var(--flavorD-lime-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-lime-bold-11); --text-on-accent-subtle: var(--flavorD-lime-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-muted-10); --accent-bg-hover: var(--flavorD-green-muted-11); --accent-bg-active: var(--flavorD-green-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-muted-11); --text-on-accent-subtle: var(--flavorD-green-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-regular-9); --accent-bg-hover: var(--flavorD-green-regular-10); --accent-bg-active: var(--flavorD-green-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-regular-10); --text-on-accent-subtle: var(--flavorD-green-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-green-bold-9); --accent-bg-hover: var(--flavorD-green-bold-10); --accent-bg-active: var(--flavorD-green-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-green-bold-11); --text-on-accent-subtle: var(--flavorD-green-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-muted-10); --accent-bg-hover: var(--flavorD-teal-muted-11); --accent-bg-active: var(--flavorD-teal-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-muted-11); --text-on-accent-subtle: var(--flavorD-teal-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-regular-9); --accent-bg-hover: var(--flavorD-teal-regular-10); --accent-bg-active: var(--flavorD-teal-regular-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-regular-10); --text-on-accent-subtle: var(--flavorD-teal-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-teal-bold-9); --accent-bg-hover: var(--flavorD-teal-bold-10); --accent-bg-active: var(--flavorD-teal-bold-11); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-teal-bold-11); --text-on-accent-subtle: var(--flavorD-teal-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-muted-10); --accent-bg-hover: var(--flavorD-cyan-muted-11); --accent-bg-active: var(--flavorD-cyan-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-muted-11); --text-on-accent-subtle: var(--flavorD-cyan-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-regular-10); --accent-bg-hover: var(--flavorD-cyan-regular-11); --accent-bg-active: var(--flavorD-cyan-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-regular-10); --text-on-accent-subtle: var(--flavorD-cyan-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-cyan-bold-10); --accent-bg-hover: var(--flavorD-cyan-bold-11); --accent-bg-active: var(--flavorD-cyan-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-cyan-bold-11); --text-on-accent-subtle: var(--flavorD-cyan-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-11); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-10); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-11); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-muted-10); --accent-bg-hover: var(--flavorD-violet-muted-11); --accent-bg-active: var(--flavorD-violet-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-muted-11); --text-on-accent-subtle: var(--flavorD-violet-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-regular-10); --accent-bg-hover: var(--flavorD-violet-regular-11); --accent-bg-active: var(--flavorD-violet-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-regular-10); --text-on-accent-subtle: var(--flavorD-violet-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-violet-bold-10); --accent-bg-hover: var(--flavorD-violet-bold-11); --accent-bg-active: var(--flavorD-violet-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-violet-bold-11); --text-on-accent-subtle: var(--flavorD-violet-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-muted-10); --accent-bg-hover: var(--flavorD-purple-muted-11); --accent-bg-active: var(--flavorD-purple-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-muted-11); --text-on-accent-subtle: var(--flavorD-purple-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-regular-10); --accent-bg-hover: var(--flavorD-purple-regular-11); --accent-bg-active: var(--flavorD-purple-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-regular-10); --text-on-accent-subtle: var(--flavorD-purple-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-purple-bold-10); --accent-bg-hover: var(--flavorD-purple-bold-11); --accent-bg-active: var(--flavorD-purple-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-purple-bold-11); --text-on-accent-subtle: var(--flavorD-purple-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-11); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --secondary-bg: var(--flavorD-neutral-muted-10); --secondary-bg-hover: var(--flavorD-neutral-muted-11); --secondary-bg-active: var(--flavorD-neutral-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-muted-3); --secondary-subtle-hover: var(--flavorD-neutral-muted-4); --secondary-border: var(--flavorD-neutral-muted-9); --secondary-text: var(--flavorD-neutral-muted-11); --text-on-secondary-subtle: var(--flavorD-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-10); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --secondary-bg: var(--flavorD-neutral-regular-10); --secondary-bg-hover: var(--flavorD-neutral-regular-11); --secondary-bg-active: var(--flavorD-neutral-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-regular-3); --secondary-subtle-hover: var(--flavorD-neutral-regular-4); --secondary-border: var(--flavorD-neutral-regular-8); --secondary-text: var(--flavorD-neutral-regular-10); --text-on-secondary-subtle: var(--flavorD-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-11); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --secondary-bg: var(--flavorD-neutral-bold-10); --secondary-bg-hover: var(--flavorD-neutral-bold-11); --secondary-bg-active: var(--flavorD-neutral-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-neutral-bold-3); --secondary-subtle-hover: var(--flavorD-neutral-bold-4); --secondary-border: var(--flavorD-neutral-bold-9); --secondary-text: var(--flavorD-neutral-bold-11); --text-on-secondary-subtle: var(--flavorD-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-muted-10); --accent-bg-hover: var(--flavorD-blue-muted-11); --accent-bg-active: var(--flavorD-blue-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-muted-11); --text-on-accent-subtle: var(--flavorD-blue-muted-11); --accent-subtle: var(--flavorD-blue-muted-3); --accent-subtle-hover: var(--flavorD-blue-muted-4); --accent-border: var(--flavorD-orange-muted-7); --focus-ring: var(--flavorD-orange-muted-9); --secondary-bg: var(--flavorD-orange-muted-10); --secondary-bg-hover: var(--flavorD-orange-muted-11); --secondary-bg-active: var(--flavorD-orange-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-muted-3); --secondary-subtle-hover: var(--flavorD-orange-muted-4); --secondary-border: var(--flavorD-orange-muted-9); --secondary-text: var(--flavorD-orange-muted-11); --text-on-secondary-subtle: var(--flavorD-orange-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="dark-secondary"], :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue])[data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-regular-10); --accent-bg-hover: var(--flavorD-blue-regular-11); --accent-bg-active: var(--flavorD-blue-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-regular-10); --text-on-accent-subtle: var(--flavorD-blue-regular-11); --accent-subtle: var(--flavorD-blue-regular-3); --accent-subtle-hover: var(--flavorD-blue-regular-4); --accent-border: var(--flavorD-orange-regular-7); --focus-ring: var(--flavorD-orange-regular-9); --secondary-bg: var(--flavorD-orange-regular-10); --secondary-bg-hover: var(--flavorD-orange-regular-11); --secondary-bg-active: var(--flavorD-orange-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-regular-3); --secondary-subtle-hover: var(--flavorD-orange-regular-4); --secondary-border: var(--flavorD-orange-regular-9); --secondary-text: var(--flavorD-orange-regular-10); --text-on-secondary-subtle: var(--flavorD-orange-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-blue-bold-10); --accent-bg-hover: var(--flavorD-blue-bold-11); --accent-bg-active: var(--flavorD-blue-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-blue-bold-11); --text-on-accent-subtle: var(--flavorD-blue-bold-11); --accent-subtle: var(--flavorD-blue-bold-3); --accent-subtle-hover: var(--flavorD-blue-bold-4); --accent-border: var(--flavorD-orange-bold-7); --focus-ring: var(--flavorD-orange-bold-9); --secondary-bg: var(--flavorD-orange-bold-10); --secondary-bg-hover: var(--flavorD-orange-bold-11); --secondary-bg-active: var(--flavorD-orange-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-orange-bold-3); --secondary-subtle-hover: var(--flavorD-orange-bold-4); --secondary-border: var(--flavorD-orange-bold-9); --secondary-text: var(--flavorD-orange-bold-11); --text-on-secondary-subtle: var(--flavorD-orange-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-muted-10); --accent-bg-hover: var(--flavorD-magenta-muted-11); --accent-bg-active: var(--flavorD-magenta-muted-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-muted-11); --text-on-accent-subtle: var(--flavorD-magenta-muted-11); --accent-subtle: var(--flavorD-magenta-muted-3); --accent-subtle-hover: var(--flavorD-magenta-muted-4); --accent-border: var(--flavorD-cyan-muted-7); --focus-ring: var(--flavorD-cyan-muted-9); --secondary-bg: var(--flavorD-cyan-muted-10); --secondary-bg-hover: var(--flavorD-cyan-muted-11); --secondary-bg-active: var(--flavorD-cyan-muted-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-muted-3); --secondary-subtle-hover: var(--flavorD-cyan-muted-4); --secondary-border: var(--flavorD-cyan-muted-9); --secondary-text: var(--flavorD-cyan-muted-11); --text-on-secondary-subtle: var(--flavorD-cyan-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-regular-10); --accent-bg-hover: var(--flavorD-magenta-regular-11); --accent-bg-active: var(--flavorD-magenta-regular-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-regular-11); --text-on-accent-subtle: var(--flavorD-magenta-regular-11); --accent-subtle: var(--flavorD-magenta-regular-3); --accent-subtle-hover: var(--flavorD-magenta-regular-4); --accent-border: var(--flavorD-cyan-regular-7); --focus-ring: var(--flavorD-cyan-regular-9); --secondary-bg: var(--flavorD-cyan-regular-10); --secondary-bg-hover: var(--flavorD-cyan-regular-11); --secondary-bg-active: var(--flavorD-cyan-regular-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-regular-3); --secondary-subtle-hover: var(--flavorD-cyan-regular-4); --secondary-border: var(--flavorD-cyan-regular-8); --secondary-text: var(--flavorD-cyan-regular-10); --text-on-secondary-subtle: var(--flavorD-cyan-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="dark-secondary"] { --accent-bg: var(--flavorD-magenta-bold-10); --accent-bg-hover: var(--flavorD-magenta-bold-11); --accent-bg-active: var(--flavorD-magenta-bold-12); --accent-fg: var(--flavor-black); --text-accent: var(--flavorD-magenta-bold-11); --text-on-accent-subtle: var(--flavorD-magenta-bold-11); --accent-subtle: var(--flavorD-magenta-bold-3); --accent-subtle-hover: var(--flavorD-magenta-bold-4); --accent-border: var(--flavorD-cyan-bold-7); --focus-ring: var(--flavorD-cyan-bold-9); --secondary-bg: var(--flavorD-cyan-bold-10); --secondary-bg-hover: var(--flavorD-cyan-bold-11); --secondary-bg-active: var(--flavorD-cyan-bold-12); --secondary-fg: var(--flavor-black); --secondary-subtle: var(--flavorD-cyan-bold-3); --secondary-subtle-hover: var(--flavorD-cyan-bold-4); --secondary-border: var(--flavorD-cyan-bold-9); --secondary-text: var(--flavorD-cyan-bold-11); --text-on-secondary-subtle: var(--flavorD-cyan-bold-11); } :root[data-hue="neutral"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-neutral-muted-9); --surface-1: var(--flavor-neutral-muted-8); --surface-2: var(--flavor-neutral-muted-7); --surface-3: var(--flavor-neutral-muted-7); --surface-tint: var(--flavor-neutral-muted-10); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-neutral-muted-12); --border-subtle: var(--flavor-neutral-muted-10); --border-default: var(--flavor-neutral-muted-11); --border-strong: var(--flavor-neutral-muted-12); --border-interactive: var(--flavor-neutral-muted-12); --accent-subtle: var(--flavor-neutral-muted-2); --accent-subtle-hover: var(--flavor-neutral-muted-3); --accent-border: var(--flavor-neutral-muted-4); --focus-ring: var(--flavor-neutral-muted-12); --accent-bg: var(--flavor-neutral-muted-12); --accent-bg-hover: var(--flavor-neutral-muted-12); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-neutral-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-neutral-muted-2); --success-border: var(--flavor-neutral-muted-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-neutral-muted-12); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-muted-2); --warning-border: var(--flavor-neutral-muted-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-neutral-muted-12); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-muted-2); --danger-border: var(--flavor-neutral-muted-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-neutral-muted-12); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-muted-2); --info-border: var(--flavor-neutral-muted-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-neutral-muted-12); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="neutral"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-neutral-regular-9); --surface-1: var(--flavor-neutral-regular-8); --surface-2: var(--flavor-neutral-regular-7); --surface-3: var(--flavor-neutral-regular-7); --surface-tint: var(--flavor-neutral-regular-10); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-neutral-regular-12); --border-subtle: var(--flavor-neutral-regular-10); --border-default: var(--flavor-neutral-regular-11); --border-strong: var(--flavor-neutral-regular-12); --border-interactive: var(--flavor-neutral-regular-12); --accent-subtle: var(--flavor-neutral-regular-2); --accent-subtle-hover: var(--flavor-neutral-regular-3); --accent-border: var(--flavor-neutral-regular-4); --focus-ring: var(--flavor-neutral-regular-12); --accent-bg: var(--flavor-neutral-regular-12); --accent-bg-hover: var(--flavor-neutral-regular-12); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-neutral-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-neutral-regular-2); --success-border: var(--flavor-neutral-regular-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-neutral-regular-12); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-regular-2); --warning-border: var(--flavor-neutral-regular-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-neutral-regular-12); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-regular-2); --danger-border: var(--flavor-neutral-regular-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-neutral-regular-12); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-regular-2); --info-border: var(--flavor-neutral-regular-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-neutral-regular-12); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="neutral"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-neutral-bold-9); --surface-1: var(--flavor-neutral-bold-8); --surface-2: var(--flavor-neutral-bold-7); --surface-3: var(--flavor-neutral-bold-7); --surface-tint: var(--flavor-neutral-bold-10); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-neutral-bold-12); --border-subtle: var(--flavor-neutral-bold-10); --border-default: var(--flavor-neutral-bold-11); --border-strong: var(--flavor-neutral-bold-12); --border-interactive: var(--flavor-neutral-bold-12); --accent-subtle: var(--flavor-neutral-bold-2); --accent-subtle-hover: var(--flavor-neutral-bold-3); --accent-border: var(--flavor-neutral-bold-4); --focus-ring: var(--flavor-neutral-bold-12); --accent-bg: var(--flavor-neutral-bold-12); --accent-bg-hover: var(--flavor-neutral-bold-12); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-neutral-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-neutral-bold-2); --success-border: var(--flavor-neutral-bold-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-neutral-bold-12); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-bold-2); --warning-border: var(--flavor-neutral-bold-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-neutral-bold-12); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-bold-2); --danger-border: var(--flavor-neutral-bold-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-neutral-bold-12); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-bold-2); --info-border: var(--flavor-neutral-bold-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-neutral-bold-12); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="red"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-red-muted-6); --surface-1: var(--flavor-red-muted-5); --surface-2: var(--flavor-red-muted-4); --surface-3: var(--flavor-red-muted-4); --surface-tint: var(--flavor-red-muted-7); --text-primary: var(--flavor-red-muted-12); --text-secondary: var(--flavor-red-muted-11); --text-tertiary: var(--flavor-red-muted-11); --text-disabled: var(--flavor-red-muted-9); --border-subtle: var(--flavor-red-muted-7); --border-default: var(--flavor-red-muted-8); --border-strong: var(--flavor-red-muted-10); --border-interactive: var(--flavor-red-muted-10); --accent-subtle: var(--flavor-red-muted-2); --accent-subtle-hover: var(--flavor-red-muted-3); --accent-border: var(--flavor-red-muted-4); --focus-ring: var(--flavor-red-muted-10); --accent-bg: var(--flavor-red-muted-10); --accent-bg-hover: var(--flavor-red-muted-11); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-11); --text-on-accent-subtle: var(--flavor-red-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-red-muted-2); --success-border: var(--flavor-red-muted-4); --success-text: var(--flavor-red-muted-12); --success-solid: var(--flavor-red-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-muted-2); --warning-border: var(--flavor-red-muted-4); --warning-text: var(--flavor-red-muted-12); --warning-solid: var(--flavor-red-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-muted-2); --danger-border: var(--flavor-red-muted-4); --danger-text: var(--flavor-red-muted-12); --danger-solid: var(--flavor-red-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-muted-2); --info-border: var(--flavor-red-muted-4); --info-text: var(--flavor-red-muted-12); --info-solid: var(--flavor-red-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="red"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-red-regular-8); --surface-1: var(--flavor-red-regular-7); --surface-2: var(--flavor-red-regular-6); --surface-3: var(--flavor-red-regular-6); --surface-tint: var(--flavor-red-regular-9); --text-primary: var(--flavor-red-regular-12); --text-secondary: var(--flavor-red-regular-12); --text-tertiary: var(--flavor-red-regular-12); --text-disabled: var(--flavor-red-regular-11); --border-subtle: var(--flavor-red-regular-9); --border-default: var(--flavor-red-regular-10); --border-strong: var(--flavor-red-regular-11); --border-interactive: var(--flavor-red-regular-11); --accent-subtle: var(--flavor-red-regular-2); --accent-subtle-hover: var(--flavor-red-regular-3); --accent-border: var(--flavor-red-regular-4); --focus-ring: var(--flavor-red-regular-11); --accent-bg: var(--flavor-red-regular-11); --accent-bg-hover: var(--flavor-red-regular-12); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-12); --text-on-accent-subtle: var(--flavor-red-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-red-regular-2); --success-border: var(--flavor-red-regular-4); --success-text: var(--flavor-red-regular-12); --success-solid: var(--flavor-red-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-regular-2); --warning-border: var(--flavor-red-regular-4); --warning-text: var(--flavor-red-regular-12); --warning-solid: var(--flavor-red-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-2); --danger-border: var(--flavor-red-regular-4); --danger-text: var(--flavor-red-regular-12); --danger-solid: var(--flavor-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-regular-2); --info-border: var(--flavor-red-regular-4); --info-text: var(--flavor-red-regular-12); --info-solid: var(--flavor-red-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="red"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-red-bold-8); --surface-1: var(--flavor-red-bold-7); --surface-2: var(--flavor-red-bold-6); --surface-3: var(--flavor-red-bold-6); --surface-tint: var(--flavor-red-bold-9); --text-primary: var(--flavor-red-bold-12); --text-secondary: var(--flavor-red-bold-12); --text-tertiary: var(--flavor-red-bold-12); --text-disabled: var(--flavor-red-bold-11); --border-subtle: var(--flavor-red-bold-9); --border-default: var(--flavor-red-bold-10); --border-strong: var(--flavor-red-bold-11); --border-interactive: var(--flavor-red-bold-11); --accent-subtle: var(--flavor-red-bold-2); --accent-subtle-hover: var(--flavor-red-bold-3); --accent-border: var(--flavor-red-bold-4); --focus-ring: var(--flavor-red-bold-11); --accent-bg: var(--flavor-red-bold-11); --accent-bg-hover: var(--flavor-red-bold-12); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-12); --text-on-accent-subtle: var(--flavor-red-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-red-bold-2); --success-border: var(--flavor-red-bold-4); --success-text: var(--flavor-red-bold-12); --success-solid: var(--flavor-red-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-bold-2); --warning-border: var(--flavor-red-bold-4); --warning-text: var(--flavor-red-bold-12); --warning-solid: var(--flavor-red-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-bold-2); --danger-border: var(--flavor-red-bold-4); --danger-text: var(--flavor-red-bold-12); --danger-solid: var(--flavor-red-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-bold-2); --info-border: var(--flavor-red-bold-4); --info-text: var(--flavor-red-bold-12); --info-solid: var(--flavor-red-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="scarlet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-muted-6); --surface-1: var(--flavor-scarlet-muted-5); --surface-2: var(--flavor-scarlet-muted-4); --surface-3: var(--flavor-scarlet-muted-4); --surface-tint: var(--flavor-scarlet-muted-7); --text-primary: var(--flavor-scarlet-muted-12); --text-secondary: var(--flavor-scarlet-muted-11); --text-tertiary: var(--flavor-scarlet-muted-11); --text-disabled: var(--flavor-scarlet-muted-9); --border-subtle: var(--flavor-scarlet-muted-7); --border-default: var(--flavor-scarlet-muted-8); --border-strong: var(--flavor-scarlet-muted-10); --border-interactive: var(--flavor-scarlet-muted-10); --accent-subtle: var(--flavor-scarlet-muted-2); --accent-subtle-hover: var(--flavor-scarlet-muted-3); --accent-border: var(--flavor-scarlet-muted-4); --focus-ring: var(--flavor-scarlet-muted-10); --accent-bg: var(--flavor-scarlet-muted-10); --accent-bg-hover: var(--flavor-scarlet-muted-11); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-11); --text-on-accent-subtle: var(--flavor-scarlet-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-scarlet-muted-2); --success-border: var(--flavor-scarlet-muted-4); --success-text: var(--flavor-scarlet-muted-12); --success-solid: var(--flavor-scarlet-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-muted-2); --warning-border: var(--flavor-scarlet-muted-4); --warning-text: var(--flavor-scarlet-muted-12); --warning-solid: var(--flavor-scarlet-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-muted-2); --danger-border: var(--flavor-scarlet-muted-4); --danger-text: var(--flavor-scarlet-muted-12); --danger-solid: var(--flavor-scarlet-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-muted-2); --info-border: var(--flavor-scarlet-muted-4); --info-text: var(--flavor-scarlet-muted-12); --info-solid: var(--flavor-scarlet-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="scarlet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-regular-8); --surface-1: var(--flavor-scarlet-regular-7); --surface-2: var(--flavor-scarlet-regular-6); --surface-3: var(--flavor-scarlet-regular-6); --surface-tint: var(--flavor-scarlet-regular-9); --text-primary: var(--flavor-scarlet-regular-12); --text-secondary: var(--flavor-scarlet-regular-12); --text-tertiary: var(--flavor-scarlet-regular-12); --text-disabled: var(--flavor-scarlet-regular-11); --border-subtle: var(--flavor-scarlet-regular-9); --border-default: var(--flavor-scarlet-regular-10); --border-strong: var(--flavor-scarlet-regular-11); --border-interactive: var(--flavor-scarlet-regular-11); --accent-subtle: var(--flavor-scarlet-regular-2); --accent-subtle-hover: var(--flavor-scarlet-regular-3); --accent-border: var(--flavor-scarlet-regular-4); --focus-ring: var(--flavor-scarlet-regular-11); --accent-bg: var(--flavor-scarlet-regular-11); --accent-bg-hover: var(--flavor-scarlet-regular-12); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-12); --text-on-accent-subtle: var(--flavor-scarlet-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-scarlet-regular-2); --success-border: var(--flavor-scarlet-regular-4); --success-text: var(--flavor-scarlet-regular-12); --success-solid: var(--flavor-scarlet-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-regular-2); --warning-border: var(--flavor-scarlet-regular-4); --warning-text: var(--flavor-scarlet-regular-12); --warning-solid: var(--flavor-scarlet-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-regular-2); --danger-border: var(--flavor-scarlet-regular-4); --danger-text: var(--flavor-scarlet-regular-12); --danger-solid: var(--flavor-scarlet-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-regular-2); --info-border: var(--flavor-scarlet-regular-4); --info-text: var(--flavor-scarlet-regular-12); --info-solid: var(--flavor-scarlet-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="scarlet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-bold-8); --surface-1: var(--flavor-scarlet-bold-7); --surface-2: var(--flavor-scarlet-bold-6); --surface-3: var(--flavor-scarlet-bold-6); --surface-tint: var(--flavor-scarlet-bold-9); --text-primary: var(--flavor-scarlet-bold-12); --text-secondary: var(--flavor-scarlet-bold-12); --text-tertiary: var(--flavor-scarlet-bold-12); --text-disabled: var(--flavor-scarlet-bold-11); --border-subtle: var(--flavor-scarlet-bold-9); --border-default: var(--flavor-scarlet-bold-10); --border-strong: var(--flavor-scarlet-bold-11); --border-interactive: var(--flavor-scarlet-bold-11); --accent-subtle: var(--flavor-scarlet-bold-2); --accent-subtle-hover: var(--flavor-scarlet-bold-3); --accent-border: var(--flavor-scarlet-bold-4); --focus-ring: var(--flavor-scarlet-bold-11); --accent-bg: var(--flavor-scarlet-bold-11); --accent-bg-hover: var(--flavor-scarlet-bold-12); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-12); --text-on-accent-subtle: var(--flavor-scarlet-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-scarlet-bold-2); --success-border: var(--flavor-scarlet-bold-4); --success-text: var(--flavor-scarlet-bold-12); --success-solid: var(--flavor-scarlet-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-bold-2); --warning-border: var(--flavor-scarlet-bold-4); --warning-text: var(--flavor-scarlet-bold-12); --warning-solid: var(--flavor-scarlet-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-bold-2); --danger-border: var(--flavor-scarlet-bold-4); --danger-text: var(--flavor-scarlet-bold-12); --danger-solid: var(--flavor-scarlet-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-bold-2); --info-border: var(--flavor-scarlet-bold-4); --info-text: var(--flavor-scarlet-bold-12); --info-solid: var(--flavor-scarlet-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="orange"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-orange-muted-6); --surface-1: var(--flavor-orange-muted-5); --surface-2: var(--flavor-orange-muted-4); --surface-3: var(--flavor-orange-muted-4); --surface-tint: var(--flavor-orange-muted-7); --text-primary: var(--flavor-orange-muted-12); --text-secondary: var(--flavor-orange-muted-11); --text-tertiary: var(--flavor-orange-muted-11); --text-disabled: var(--flavor-orange-muted-9); --border-subtle: var(--flavor-orange-muted-7); --border-default: var(--flavor-orange-muted-8); --border-strong: var(--flavor-orange-muted-10); --border-interactive: var(--flavor-orange-muted-10); --accent-subtle: var(--flavor-orange-muted-2); --accent-subtle-hover: var(--flavor-orange-muted-3); --accent-border: var(--flavor-orange-muted-4); --focus-ring: var(--flavor-orange-muted-10); --accent-bg: var(--flavor-orange-muted-10); --accent-bg-hover: var(--flavor-orange-muted-11); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-11); --text-on-accent-subtle: var(--flavor-orange-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-orange-muted-2); --success-border: var(--flavor-orange-muted-4); --success-text: var(--flavor-orange-muted-12); --success-solid: var(--flavor-orange-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-muted-2); --warning-border: var(--flavor-orange-muted-4); --warning-text: var(--flavor-orange-muted-12); --warning-solid: var(--flavor-orange-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-muted-2); --danger-border: var(--flavor-orange-muted-4); --danger-text: var(--flavor-orange-muted-12); --danger-solid: var(--flavor-orange-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-muted-2); --info-border: var(--flavor-orange-muted-4); --info-text: var(--flavor-orange-muted-12); --info-solid: var(--flavor-orange-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="orange"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-orange-regular-7); --surface-1: var(--flavor-orange-regular-6); --surface-2: var(--flavor-orange-regular-5); --surface-3: var(--flavor-orange-regular-5); --surface-tint: var(--flavor-orange-regular-8); --text-primary: var(--flavor-orange-regular-12); --text-secondary: var(--flavor-orange-regular-12); --text-tertiary: var(--flavor-orange-regular-12); --text-disabled: var(--flavor-orange-regular-10); --border-subtle: var(--flavor-orange-regular-8); --border-default: var(--flavor-orange-regular-9); --border-strong: var(--flavor-orange-regular-11); --border-interactive: var(--flavor-orange-regular-11); --accent-subtle: var(--flavor-orange-regular-2); --accent-subtle-hover: var(--flavor-orange-regular-3); --accent-border: var(--flavor-orange-regular-4); --focus-ring: var(--flavor-orange-regular-11); --accent-bg: var(--flavor-orange-regular-11); --accent-bg-hover: var(--flavor-orange-regular-12); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-12); --text-on-accent-subtle: var(--flavor-orange-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-orange-regular-2); --success-border: var(--flavor-orange-regular-4); --success-text: var(--flavor-orange-regular-12); --success-solid: var(--flavor-orange-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-2); --warning-border: var(--flavor-orange-regular-4); --warning-text: var(--flavor-orange-regular-12); --warning-solid: var(--flavor-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-regular-2); --danger-border: var(--flavor-orange-regular-4); --danger-text: var(--flavor-orange-regular-12); --danger-solid: var(--flavor-orange-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-regular-2); --info-border: var(--flavor-orange-regular-4); --info-text: var(--flavor-orange-regular-12); --info-solid: var(--flavor-orange-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="orange"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-orange-bold-8); --surface-1: var(--flavor-orange-bold-7); --surface-2: var(--flavor-orange-bold-6); --surface-3: var(--flavor-orange-bold-6); --surface-tint: var(--flavor-orange-bold-9); --text-primary: var(--flavor-orange-bold-12); --text-secondary: var(--flavor-orange-bold-12); --text-tertiary: var(--flavor-orange-bold-12); --text-disabled: var(--flavor-orange-bold-11); --border-subtle: var(--flavor-orange-bold-9); --border-default: var(--flavor-orange-bold-10); --border-strong: var(--flavor-orange-bold-11); --border-interactive: var(--flavor-orange-bold-11); --accent-subtle: var(--flavor-orange-bold-2); --accent-subtle-hover: var(--flavor-orange-bold-3); --accent-border: var(--flavor-orange-bold-4); --focus-ring: var(--flavor-orange-bold-11); --accent-bg: var(--flavor-orange-bold-11); --accent-bg-hover: var(--flavor-orange-bold-12); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-12); --text-on-accent-subtle: var(--flavor-orange-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-orange-bold-2); --success-border: var(--flavor-orange-bold-4); --success-text: var(--flavor-orange-bold-12); --success-solid: var(--flavor-orange-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-bold-2); --warning-border: var(--flavor-orange-bold-4); --warning-text: var(--flavor-orange-bold-12); --warning-solid: var(--flavor-orange-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-bold-2); --danger-border: var(--flavor-orange-bold-4); --danger-text: var(--flavor-orange-bold-12); --danger-solid: var(--flavor-orange-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-bold-2); --info-border: var(--flavor-orange-bold-4); --info-text: var(--flavor-orange-bold-12); --info-solid: var(--flavor-orange-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="tangerine"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-muted-6); --surface-1: var(--flavor-tangerine-muted-5); --surface-2: var(--flavor-tangerine-muted-4); --surface-3: var(--flavor-tangerine-muted-4); --surface-tint: var(--flavor-tangerine-muted-7); --text-primary: var(--flavor-tangerine-muted-12); --text-secondary: var(--flavor-tangerine-muted-11); --text-tertiary: var(--flavor-tangerine-muted-11); --text-disabled: var(--flavor-tangerine-muted-9); --border-subtle: var(--flavor-tangerine-muted-7); --border-default: var(--flavor-tangerine-muted-8); --border-strong: var(--flavor-tangerine-muted-10); --border-interactive: var(--flavor-tangerine-muted-10); --accent-subtle: var(--flavor-tangerine-muted-2); --accent-subtle-hover: var(--flavor-tangerine-muted-3); --accent-border: var(--flavor-tangerine-muted-4); --focus-ring: var(--flavor-tangerine-muted-10); --accent-bg: var(--flavor-tangerine-muted-10); --accent-bg-hover: var(--flavor-tangerine-muted-11); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-11); --text-on-accent-subtle: var(--flavor-tangerine-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-tangerine-muted-2); --success-border: var(--flavor-tangerine-muted-4); --success-text: var(--flavor-tangerine-muted-12); --success-solid: var(--flavor-tangerine-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-muted-2); --warning-border: var(--flavor-tangerine-muted-4); --warning-text: var(--flavor-tangerine-muted-12); --warning-solid: var(--flavor-tangerine-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-muted-2); --danger-border: var(--flavor-tangerine-muted-4); --danger-text: var(--flavor-tangerine-muted-12); --danger-solid: var(--flavor-tangerine-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-muted-2); --info-border: var(--flavor-tangerine-muted-4); --info-text: var(--flavor-tangerine-muted-12); --info-solid: var(--flavor-tangerine-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="tangerine"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-regular-6); --surface-1: var(--flavor-tangerine-regular-5); --surface-2: var(--flavor-tangerine-regular-4); --surface-3: var(--flavor-tangerine-regular-4); --surface-tint: var(--flavor-tangerine-regular-7); --text-primary: var(--flavor-tangerine-regular-12); --text-secondary: var(--flavor-tangerine-regular-11); --text-tertiary: var(--flavor-tangerine-regular-11); --text-disabled: var(--flavor-tangerine-regular-9); --border-subtle: var(--flavor-tangerine-regular-7); --border-default: var(--flavor-tangerine-regular-8); --border-strong: var(--flavor-tangerine-regular-10); --border-interactive: var(--flavor-tangerine-regular-10); --accent-subtle: var(--flavor-tangerine-regular-2); --accent-subtle-hover: var(--flavor-tangerine-regular-3); --accent-border: var(--flavor-tangerine-regular-4); --focus-ring: var(--flavor-tangerine-regular-10); --accent-bg: var(--flavor-tangerine-regular-10); --accent-bg-hover: var(--flavor-tangerine-regular-11); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-11); --text-on-accent-subtle: var(--flavor-tangerine-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-tangerine-regular-2); --success-border: var(--flavor-tangerine-regular-4); --success-text: var(--flavor-tangerine-regular-12); --success-solid: var(--flavor-tangerine-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-regular-2); --warning-border: var(--flavor-tangerine-regular-4); --warning-text: var(--flavor-tangerine-regular-12); --warning-solid: var(--flavor-tangerine-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-regular-2); --danger-border: var(--flavor-tangerine-regular-4); --danger-text: var(--flavor-tangerine-regular-12); --danger-solid: var(--flavor-tangerine-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-regular-2); --info-border: var(--flavor-tangerine-regular-4); --info-text: var(--flavor-tangerine-regular-12); --info-solid: var(--flavor-tangerine-regular-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="tangerine"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-bold-7); --surface-1: var(--flavor-tangerine-bold-6); --surface-2: var(--flavor-tangerine-bold-5); --surface-3: var(--flavor-tangerine-bold-5); --surface-tint: var(--flavor-tangerine-bold-8); --text-primary: var(--flavor-tangerine-bold-12); --text-secondary: var(--flavor-tangerine-bold-12); --text-tertiary: var(--flavor-tangerine-bold-12); --text-disabled: var(--flavor-tangerine-bold-10); --border-subtle: var(--flavor-tangerine-bold-8); --border-default: var(--flavor-tangerine-bold-9); --border-strong: var(--flavor-tangerine-bold-11); --border-interactive: var(--flavor-tangerine-bold-11); --accent-subtle: var(--flavor-tangerine-bold-2); --accent-subtle-hover: var(--flavor-tangerine-bold-3); --accent-border: var(--flavor-tangerine-bold-4); --focus-ring: var(--flavor-tangerine-bold-11); --accent-bg: var(--flavor-tangerine-bold-11); --accent-bg-hover: var(--flavor-tangerine-bold-12); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-12); --text-on-accent-subtle: var(--flavor-tangerine-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-tangerine-bold-2); --success-border: var(--flavor-tangerine-bold-4); --success-text: var(--flavor-tangerine-bold-12); --success-solid: var(--flavor-tangerine-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-bold-2); --warning-border: var(--flavor-tangerine-bold-4); --warning-text: var(--flavor-tangerine-bold-12); --warning-solid: var(--flavor-tangerine-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-bold-2); --danger-border: var(--flavor-tangerine-bold-4); --danger-text: var(--flavor-tangerine-bold-12); --danger-solid: var(--flavor-tangerine-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-bold-2); --info-border: var(--flavor-tangerine-bold-4); --info-text: var(--flavor-tangerine-bold-12); --info-solid: var(--flavor-tangerine-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="yellow"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-yellow-muted-6); --surface-1: var(--flavor-yellow-muted-5); --surface-2: var(--flavor-yellow-muted-4); --surface-3: var(--flavor-yellow-muted-4); --surface-tint: var(--flavor-yellow-muted-7); --text-primary: var(--flavor-yellow-muted-12); --text-secondary: var(--flavor-yellow-muted-11); --text-tertiary: var(--flavor-yellow-muted-11); --text-disabled: var(--flavor-yellow-muted-9); --border-subtle: var(--flavor-yellow-muted-7); --border-default: var(--flavor-yellow-muted-8); --border-strong: var(--flavor-yellow-muted-10); --border-interactive: var(--flavor-yellow-muted-10); --accent-subtle: var(--flavor-yellow-muted-2); --accent-subtle-hover: var(--flavor-yellow-muted-3); --accent-border: var(--flavor-yellow-muted-4); --focus-ring: var(--flavor-yellow-muted-10); --accent-bg: var(--flavor-yellow-muted-10); --accent-bg-hover: var(--flavor-yellow-muted-11); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-11); --text-on-accent-subtle: var(--flavor-yellow-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-yellow-muted-2); --success-border: var(--flavor-yellow-muted-4); --success-text: var(--flavor-yellow-muted-12); --success-solid: var(--flavor-yellow-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-muted-2); --warning-border: var(--flavor-yellow-muted-4); --warning-text: var(--flavor-yellow-muted-12); --warning-solid: var(--flavor-yellow-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-muted-2); --danger-border: var(--flavor-yellow-muted-4); --danger-text: var(--flavor-yellow-muted-12); --danger-solid: var(--flavor-yellow-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-muted-2); --info-border: var(--flavor-yellow-muted-4); --info-text: var(--flavor-yellow-muted-12); --info-solid: var(--flavor-yellow-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="yellow"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-yellow-regular-6); --surface-1: var(--flavor-yellow-regular-5); --surface-2: var(--flavor-yellow-regular-4); --surface-3: var(--flavor-yellow-regular-4); --surface-tint: var(--flavor-yellow-regular-7); --text-primary: var(--flavor-yellow-regular-12); --text-secondary: var(--flavor-yellow-regular-11); --text-tertiary: var(--flavor-yellow-regular-11); --text-disabled: var(--flavor-yellow-regular-9); --border-subtle: var(--flavor-yellow-regular-7); --border-default: var(--flavor-yellow-regular-8); --border-strong: var(--flavor-yellow-regular-10); --border-interactive: var(--flavor-yellow-regular-10); --accent-subtle: var(--flavor-yellow-regular-2); --accent-subtle-hover: var(--flavor-yellow-regular-3); --accent-border: var(--flavor-yellow-regular-4); --focus-ring: var(--flavor-yellow-regular-10); --accent-bg: var(--flavor-yellow-regular-10); --accent-bg-hover: var(--flavor-yellow-regular-11); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-11); --text-on-accent-subtle: var(--flavor-yellow-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-yellow-regular-2); --success-border: var(--flavor-yellow-regular-4); --success-text: var(--flavor-yellow-regular-12); --success-solid: var(--flavor-yellow-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-regular-2); --warning-border: var(--flavor-yellow-regular-4); --warning-text: var(--flavor-yellow-regular-12); --warning-solid: var(--flavor-yellow-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-regular-2); --danger-border: var(--flavor-yellow-regular-4); --danger-text: var(--flavor-yellow-regular-12); --danger-solid: var(--flavor-yellow-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-regular-2); --info-border: var(--flavor-yellow-regular-4); --info-text: var(--flavor-yellow-regular-12); --info-solid: var(--flavor-yellow-regular-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="yellow"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-yellow-bold-5); --surface-1: var(--flavor-yellow-bold-4); --surface-2: var(--flavor-yellow-bold-3); --surface-3: var(--flavor-yellow-bold-3); --surface-tint: var(--flavor-yellow-bold-6); --text-primary: var(--flavor-yellow-bold-12); --text-secondary: var(--flavor-yellow-bold-11); --text-tertiary: var(--flavor-yellow-bold-11); --text-disabled: var(--flavor-yellow-bold-8); --border-subtle: var(--flavor-yellow-bold-6); --border-default: var(--flavor-yellow-bold-7); --border-strong: var(--flavor-yellow-bold-10); --border-interactive: var(--flavor-yellow-bold-10); --accent-subtle: var(--flavor-yellow-bold-2); --accent-subtle-hover: var(--flavor-yellow-bold-3); --accent-border: var(--flavor-yellow-bold-4); --focus-ring: var(--flavor-yellow-bold-10); --accent-bg: var(--flavor-yellow-bold-10); --accent-bg-hover: var(--flavor-yellow-bold-11); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-11); --text-on-accent-subtle: var(--flavor-yellow-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-yellow-bold-2); --success-border: var(--flavor-yellow-bold-4); --success-text: var(--flavor-yellow-bold-12); --success-solid: var(--flavor-yellow-bold-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-bold-2); --warning-border: var(--flavor-yellow-bold-4); --warning-text: var(--flavor-yellow-bold-12); --warning-solid: var(--flavor-yellow-bold-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-bold-2); --danger-border: var(--flavor-yellow-bold-4); --danger-text: var(--flavor-yellow-bold-12); --danger-solid: var(--flavor-yellow-bold-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-bold-2); --info-border: var(--flavor-yellow-bold-4); --info-text: var(--flavor-yellow-bold-12); --info-solid: var(--flavor-yellow-bold-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="lime"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-lime-muted-6); --surface-1: var(--flavor-lime-muted-5); --surface-2: var(--flavor-lime-muted-4); --surface-3: var(--flavor-lime-muted-4); --surface-tint: var(--flavor-lime-muted-7); --text-primary: var(--flavor-lime-muted-12); --text-secondary: var(--flavor-lime-muted-11); --text-tertiary: var(--flavor-lime-muted-11); --text-disabled: var(--flavor-lime-muted-9); --border-subtle: var(--flavor-lime-muted-7); --border-default: var(--flavor-lime-muted-8); --border-strong: var(--flavor-lime-muted-10); --border-interactive: var(--flavor-lime-muted-10); --accent-subtle: var(--flavor-lime-muted-2); --accent-subtle-hover: var(--flavor-lime-muted-3); --accent-border: var(--flavor-lime-muted-4); --focus-ring: var(--flavor-lime-muted-10); --accent-bg: var(--flavor-lime-muted-10); --accent-bg-hover: var(--flavor-lime-muted-11); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-11); --text-on-accent-subtle: var(--flavor-lime-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-lime-muted-2); --success-border: var(--flavor-lime-muted-4); --success-text: var(--flavor-lime-muted-12); --success-solid: var(--flavor-lime-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-muted-2); --warning-border: var(--flavor-lime-muted-4); --warning-text: var(--flavor-lime-muted-12); --warning-solid: var(--flavor-lime-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-muted-2); --danger-border: var(--flavor-lime-muted-4); --danger-text: var(--flavor-lime-muted-12); --danger-solid: var(--flavor-lime-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-muted-2); --info-border: var(--flavor-lime-muted-4); --info-text: var(--flavor-lime-muted-12); --info-solid: var(--flavor-lime-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="lime"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-lime-regular-6); --surface-1: var(--flavor-lime-regular-5); --surface-2: var(--flavor-lime-regular-4); --surface-3: var(--flavor-lime-regular-4); --surface-tint: var(--flavor-lime-regular-7); --text-primary: var(--flavor-lime-regular-12); --text-secondary: var(--flavor-lime-regular-11); --text-tertiary: var(--flavor-lime-regular-11); --text-disabled: var(--flavor-lime-regular-9); --border-subtle: var(--flavor-lime-regular-7); --border-default: var(--flavor-lime-regular-8); --border-strong: var(--flavor-lime-regular-10); --border-interactive: var(--flavor-lime-regular-10); --accent-subtle: var(--flavor-lime-regular-2); --accent-subtle-hover: var(--flavor-lime-regular-3); --accent-border: var(--flavor-lime-regular-4); --focus-ring: var(--flavor-lime-regular-10); --accent-bg: var(--flavor-lime-regular-10); --accent-bg-hover: var(--flavor-lime-regular-11); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-11); --text-on-accent-subtle: var(--flavor-lime-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-lime-regular-2); --success-border: var(--flavor-lime-regular-4); --success-text: var(--flavor-lime-regular-12); --success-solid: var(--flavor-lime-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-regular-2); --warning-border: var(--flavor-lime-regular-4); --warning-text: var(--flavor-lime-regular-12); --warning-solid: var(--flavor-lime-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-regular-2); --danger-border: var(--flavor-lime-regular-4); --danger-text: var(--flavor-lime-regular-12); --danger-solid: var(--flavor-lime-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-regular-2); --info-border: var(--flavor-lime-regular-4); --info-text: var(--flavor-lime-regular-12); --info-solid: var(--flavor-lime-regular-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="lime"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-lime-bold-5); --surface-1: var(--flavor-lime-bold-4); --surface-2: var(--flavor-lime-bold-3); --surface-3: var(--flavor-lime-bold-3); --surface-tint: var(--flavor-lime-bold-6); --text-primary: var(--flavor-lime-bold-12); --text-secondary: var(--flavor-lime-bold-11); --text-tertiary: var(--flavor-lime-bold-11); --text-disabled: var(--flavor-lime-bold-8); --border-subtle: var(--flavor-lime-bold-6); --border-default: var(--flavor-lime-bold-7); --border-strong: var(--flavor-lime-bold-10); --border-interactive: var(--flavor-lime-bold-10); --accent-subtle: var(--flavor-lime-bold-2); --accent-subtle-hover: var(--flavor-lime-bold-3); --accent-border: var(--flavor-lime-bold-4); --focus-ring: var(--flavor-lime-bold-10); --accent-bg: var(--flavor-lime-bold-10); --accent-bg-hover: var(--flavor-lime-bold-11); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-11); --text-on-accent-subtle: var(--flavor-lime-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-lime-bold-2); --success-border: var(--flavor-lime-bold-4); --success-text: var(--flavor-lime-bold-12); --success-solid: var(--flavor-lime-bold-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-bold-2); --warning-border: var(--flavor-lime-bold-4); --warning-text: var(--flavor-lime-bold-12); --warning-solid: var(--flavor-lime-bold-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-bold-2); --danger-border: var(--flavor-lime-bold-4); --danger-text: var(--flavor-lime-bold-12); --danger-solid: var(--flavor-lime-bold-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-bold-2); --info-border: var(--flavor-lime-bold-4); --info-text: var(--flavor-lime-bold-12); --info-solid: var(--flavor-lime-bold-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="green"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-green-muted-6); --surface-1: var(--flavor-green-muted-5); --surface-2: var(--flavor-green-muted-4); --surface-3: var(--flavor-green-muted-4); --surface-tint: var(--flavor-green-muted-7); --text-primary: var(--flavor-green-muted-12); --text-secondary: var(--flavor-green-muted-11); --text-tertiary: var(--flavor-green-muted-11); --text-disabled: var(--flavor-green-muted-9); --border-subtle: var(--flavor-green-muted-7); --border-default: var(--flavor-green-muted-8); --border-strong: var(--flavor-green-muted-10); --border-interactive: var(--flavor-green-muted-10); --accent-subtle: var(--flavor-green-muted-2); --accent-subtle-hover: var(--flavor-green-muted-3); --accent-border: var(--flavor-green-muted-4); --focus-ring: var(--flavor-green-muted-10); --accent-bg: var(--flavor-green-muted-10); --accent-bg-hover: var(--flavor-green-muted-11); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-11); --text-on-accent-subtle: var(--flavor-green-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-green-muted-2); --success-border: var(--flavor-green-muted-4); --success-text: var(--flavor-green-muted-12); --success-solid: var(--flavor-green-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-muted-2); --warning-border: var(--flavor-green-muted-4); --warning-text: var(--flavor-green-muted-12); --warning-solid: var(--flavor-green-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-muted-2); --danger-border: var(--flavor-green-muted-4); --danger-text: var(--flavor-green-muted-12); --danger-solid: var(--flavor-green-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-muted-2); --info-border: var(--flavor-green-muted-4); --info-text: var(--flavor-green-muted-12); --info-solid: var(--flavor-green-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="green"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-green-regular-6); --surface-1: var(--flavor-green-regular-5); --surface-2: var(--flavor-green-regular-4); --surface-3: var(--flavor-green-regular-4); --surface-tint: var(--flavor-green-regular-7); --text-primary: var(--flavor-green-regular-12); --text-secondary: var(--flavor-green-regular-11); --text-tertiary: var(--flavor-green-regular-11); --text-disabled: var(--flavor-green-regular-9); --border-subtle: var(--flavor-green-regular-7); --border-default: var(--flavor-green-regular-8); --border-strong: var(--flavor-green-regular-10); --border-interactive: var(--flavor-green-regular-10); --accent-subtle: var(--flavor-green-regular-2); --accent-subtle-hover: var(--flavor-green-regular-3); --accent-border: var(--flavor-green-regular-4); --focus-ring: var(--flavor-green-regular-10); --accent-bg: var(--flavor-green-regular-10); --accent-bg-hover: var(--flavor-green-regular-11); --accent-bg-active: var(--flavor-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-11); --text-on-accent-subtle: var(--flavor-green-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-green-regular-2); --success-border: var(--flavor-green-regular-4); --success-text: var(--flavor-green-regular-12); --success-solid: var(--flavor-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-regular-2); --warning-border: var(--flavor-green-regular-4); --warning-text: var(--flavor-green-regular-12); --warning-solid: var(--flavor-green-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-regular-2); --danger-border: var(--flavor-green-regular-4); --danger-text: var(--flavor-green-regular-12); --danger-solid: var(--flavor-green-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-regular-2); --info-border: var(--flavor-green-regular-4); --info-text: var(--flavor-green-regular-12); --info-solid: var(--flavor-green-regular-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="green"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-green-bold-6); --surface-1: var(--flavor-green-bold-5); --surface-2: var(--flavor-green-bold-4); --surface-3: var(--flavor-green-bold-4); --surface-tint: var(--flavor-green-bold-7); --text-primary: var(--flavor-green-bold-12); --text-secondary: var(--flavor-green-bold-11); --text-tertiary: var(--flavor-green-bold-11); --text-disabled: var(--flavor-green-bold-9); --border-subtle: var(--flavor-green-bold-7); --border-default: var(--flavor-green-bold-8); --border-strong: var(--flavor-green-bold-10); --border-interactive: var(--flavor-green-bold-10); --accent-subtle: var(--flavor-green-bold-2); --accent-subtle-hover: var(--flavor-green-bold-3); --accent-border: var(--flavor-green-bold-4); --focus-ring: var(--flavor-green-bold-10); --accent-bg: var(--flavor-green-bold-10); --accent-bg-hover: var(--flavor-green-bold-11); --accent-bg-active: var(--flavor-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-11); --text-on-accent-subtle: var(--flavor-green-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-green-bold-2); --success-border: var(--flavor-green-bold-4); --success-text: var(--flavor-green-bold-12); --success-solid: var(--flavor-green-bold-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-bold-2); --warning-border: var(--flavor-green-bold-4); --warning-text: var(--flavor-green-bold-12); --warning-solid: var(--flavor-green-bold-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-bold-2); --danger-border: var(--flavor-green-bold-4); --danger-text: var(--flavor-green-bold-12); --danger-solid: var(--flavor-green-bold-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-bold-2); --info-border: var(--flavor-green-bold-4); --info-text: var(--flavor-green-bold-12); --info-solid: var(--flavor-green-bold-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="teal"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-teal-muted-6); --surface-1: var(--flavor-teal-muted-5); --surface-2: var(--flavor-teal-muted-4); --surface-3: var(--flavor-teal-muted-4); --surface-tint: var(--flavor-teal-muted-7); --text-primary: var(--flavor-teal-muted-12); --text-secondary: var(--flavor-teal-muted-11); --text-tertiary: var(--flavor-teal-muted-11); --text-disabled: var(--flavor-teal-muted-9); --border-subtle: var(--flavor-teal-muted-7); --border-default: var(--flavor-teal-muted-8); --border-strong: var(--flavor-teal-muted-10); --border-interactive: var(--flavor-teal-muted-10); --accent-subtle: var(--flavor-teal-muted-2); --accent-subtle-hover: var(--flavor-teal-muted-3); --accent-border: var(--flavor-teal-muted-4); --focus-ring: var(--flavor-teal-muted-10); --accent-bg: var(--flavor-teal-muted-10); --accent-bg-hover: var(--flavor-teal-muted-11); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-11); --text-on-accent-subtle: var(--flavor-teal-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-teal-muted-2); --success-border: var(--flavor-teal-muted-4); --success-text: var(--flavor-teal-muted-12); --success-solid: var(--flavor-teal-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-muted-2); --warning-border: var(--flavor-teal-muted-4); --warning-text: var(--flavor-teal-muted-12); --warning-solid: var(--flavor-teal-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-muted-2); --danger-border: var(--flavor-teal-muted-4); --danger-text: var(--flavor-teal-muted-12); --danger-solid: var(--flavor-teal-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-muted-2); --info-border: var(--flavor-teal-muted-4); --info-text: var(--flavor-teal-muted-12); --info-solid: var(--flavor-teal-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="teal"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-teal-regular-6); --surface-1: var(--flavor-teal-regular-5); --surface-2: var(--flavor-teal-regular-4); --surface-3: var(--flavor-teal-regular-4); --surface-tint: var(--flavor-teal-regular-7); --text-primary: var(--flavor-teal-regular-12); --text-secondary: var(--flavor-teal-regular-11); --text-tertiary: var(--flavor-teal-regular-11); --text-disabled: var(--flavor-teal-regular-9); --border-subtle: var(--flavor-teal-regular-7); --border-default: var(--flavor-teal-regular-8); --border-strong: var(--flavor-teal-regular-10); --border-interactive: var(--flavor-teal-regular-10); --accent-subtle: var(--flavor-teal-regular-2); --accent-subtle-hover: var(--flavor-teal-regular-3); --accent-border: var(--flavor-teal-regular-4); --focus-ring: var(--flavor-teal-regular-10); --accent-bg: var(--flavor-teal-regular-10); --accent-bg-hover: var(--flavor-teal-regular-11); --accent-bg-active: var(--flavor-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-11); --text-on-accent-subtle: var(--flavor-teal-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-teal-regular-2); --success-border: var(--flavor-teal-regular-4); --success-text: var(--flavor-teal-regular-12); --success-solid: var(--flavor-teal-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-regular-2); --warning-border: var(--flavor-teal-regular-4); --warning-text: var(--flavor-teal-regular-12); --warning-solid: var(--flavor-teal-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-regular-2); --danger-border: var(--flavor-teal-regular-4); --danger-text: var(--flavor-teal-regular-12); --danger-solid: var(--flavor-teal-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-regular-2); --info-border: var(--flavor-teal-regular-4); --info-text: var(--flavor-teal-regular-12); --info-solid: var(--flavor-teal-regular-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="teal"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-teal-bold-5); --surface-1: var(--flavor-teal-bold-4); --surface-2: var(--flavor-teal-bold-3); --surface-3: var(--flavor-teal-bold-3); --surface-tint: var(--flavor-teal-bold-6); --text-primary: var(--flavor-teal-bold-12); --text-secondary: var(--flavor-teal-bold-11); --text-tertiary: var(--flavor-teal-bold-11); --text-disabled: var(--flavor-teal-bold-8); --border-subtle: var(--flavor-teal-bold-6); --border-default: var(--flavor-teal-bold-7); --border-strong: var(--flavor-teal-bold-10); --border-interactive: var(--flavor-teal-bold-10); --accent-subtle: var(--flavor-teal-bold-2); --accent-subtle-hover: var(--flavor-teal-bold-3); --accent-border: var(--flavor-teal-bold-4); --focus-ring: var(--flavor-teal-bold-10); --accent-bg: var(--flavor-teal-bold-10); --accent-bg-hover: var(--flavor-teal-bold-11); --accent-bg-active: var(--flavor-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-11); --text-on-accent-subtle: var(--flavor-teal-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-teal-bold-2); --success-border: var(--flavor-teal-bold-4); --success-text: var(--flavor-teal-bold-12); --success-solid: var(--flavor-teal-bold-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-bold-2); --warning-border: var(--flavor-teal-bold-4); --warning-text: var(--flavor-teal-bold-12); --warning-solid: var(--flavor-teal-bold-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-bold-2); --danger-border: var(--flavor-teal-bold-4); --danger-text: var(--flavor-teal-bold-12); --danger-solid: var(--flavor-teal-bold-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-bold-2); --info-border: var(--flavor-teal-bold-4); --info-text: var(--flavor-teal-bold-12); --info-solid: var(--flavor-teal-bold-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="cyan"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-cyan-muted-6); --surface-1: var(--flavor-cyan-muted-5); --surface-2: var(--flavor-cyan-muted-4); --surface-3: var(--flavor-cyan-muted-4); --surface-tint: var(--flavor-cyan-muted-7); --text-primary: var(--flavor-cyan-muted-12); --text-secondary: var(--flavor-cyan-muted-11); --text-tertiary: var(--flavor-cyan-muted-11); --text-disabled: var(--flavor-cyan-muted-9); --border-subtle: var(--flavor-cyan-muted-7); --border-default: var(--flavor-cyan-muted-8); --border-strong: var(--flavor-cyan-muted-10); --border-interactive: var(--flavor-cyan-muted-10); --accent-subtle: var(--flavor-cyan-muted-2); --accent-subtle-hover: var(--flavor-cyan-muted-3); --accent-border: var(--flavor-cyan-muted-4); --focus-ring: var(--flavor-cyan-muted-10); --accent-bg: var(--flavor-cyan-muted-10); --accent-bg-hover: var(--flavor-cyan-muted-11); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-11); --text-on-accent-subtle: var(--flavor-cyan-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-cyan-muted-2); --success-border: var(--flavor-cyan-muted-4); --success-text: var(--flavor-cyan-muted-12); --success-solid: var(--flavor-cyan-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-muted-2); --warning-border: var(--flavor-cyan-muted-4); --warning-text: var(--flavor-cyan-muted-12); --warning-solid: var(--flavor-cyan-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-muted-2); --danger-border: var(--flavor-cyan-muted-4); --danger-text: var(--flavor-cyan-muted-12); --danger-solid: var(--flavor-cyan-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-muted-2); --info-border: var(--flavor-cyan-muted-4); --info-text: var(--flavor-cyan-muted-12); --info-solid: var(--flavor-cyan-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="cyan"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-cyan-regular-7); --surface-1: var(--flavor-cyan-regular-6); --surface-2: var(--flavor-cyan-regular-5); --surface-3: var(--flavor-cyan-regular-5); --surface-tint: var(--flavor-cyan-regular-8); --text-primary: var(--flavor-cyan-regular-12); --text-secondary: var(--flavor-cyan-regular-12); --text-tertiary: var(--flavor-cyan-regular-12); --text-disabled: var(--flavor-cyan-regular-10); --border-subtle: var(--flavor-cyan-regular-8); --border-default: var(--flavor-cyan-regular-9); --border-strong: var(--flavor-cyan-regular-11); --border-interactive: var(--flavor-cyan-regular-11); --accent-subtle: var(--flavor-cyan-regular-2); --accent-subtle-hover: var(--flavor-cyan-regular-3); --accent-border: var(--flavor-cyan-regular-4); --focus-ring: var(--flavor-cyan-regular-11); --accent-bg: var(--flavor-cyan-regular-11); --accent-bg-hover: var(--flavor-cyan-regular-12); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-12); --text-on-accent-subtle: var(--flavor-cyan-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-cyan-regular-2); --success-border: var(--flavor-cyan-regular-4); --success-text: var(--flavor-cyan-regular-12); --success-solid: var(--flavor-cyan-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-regular-2); --warning-border: var(--flavor-cyan-regular-4); --warning-text: var(--flavor-cyan-regular-12); --warning-solid: var(--flavor-cyan-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-regular-2); --danger-border: var(--flavor-cyan-regular-4); --danger-text: var(--flavor-cyan-regular-12); --danger-solid: var(--flavor-cyan-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-regular-2); --info-border: var(--flavor-cyan-regular-4); --info-text: var(--flavor-cyan-regular-12); --info-solid: var(--flavor-cyan-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="cyan"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-cyan-bold-7); --surface-1: var(--flavor-cyan-bold-6); --surface-2: var(--flavor-cyan-bold-5); --surface-3: var(--flavor-cyan-bold-5); --surface-tint: var(--flavor-cyan-bold-8); --text-primary: var(--flavor-cyan-bold-12); --text-secondary: var(--flavor-cyan-bold-12); --text-tertiary: var(--flavor-cyan-bold-12); --text-disabled: var(--flavor-cyan-bold-10); --border-subtle: var(--flavor-cyan-bold-8); --border-default: var(--flavor-cyan-bold-9); --border-strong: var(--flavor-cyan-bold-11); --border-interactive: var(--flavor-cyan-bold-11); --accent-subtle: var(--flavor-cyan-bold-2); --accent-subtle-hover: var(--flavor-cyan-bold-3); --accent-border: var(--flavor-cyan-bold-4); --focus-ring: var(--flavor-cyan-bold-11); --accent-bg: var(--flavor-cyan-bold-11); --accent-bg-hover: var(--flavor-cyan-bold-12); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-12); --text-on-accent-subtle: var(--flavor-cyan-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-cyan-bold-2); --success-border: var(--flavor-cyan-bold-4); --success-text: var(--flavor-cyan-bold-12); --success-solid: var(--flavor-cyan-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-bold-2); --warning-border: var(--flavor-cyan-bold-4); --warning-text: var(--flavor-cyan-bold-12); --warning-solid: var(--flavor-cyan-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-bold-2); --danger-border: var(--flavor-cyan-bold-4); --danger-text: var(--flavor-cyan-bold-12); --danger-solid: var(--flavor-cyan-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-bold-2); --info-border: var(--flavor-cyan-bold-4); --info-text: var(--flavor-cyan-bold-12); --info-solid: var(--flavor-cyan-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="blue"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-6); --surface-1: var(--flavor-blue-muted-5); --surface-2: var(--flavor-blue-muted-4); --surface-3: var(--flavor-blue-muted-4); --surface-tint: var(--flavor-blue-muted-7); --text-primary: var(--flavor-blue-muted-12); --text-secondary: var(--flavor-blue-muted-11); --text-tertiary: var(--flavor-blue-muted-11); --text-disabled: var(--flavor-blue-muted-9); --border-subtle: var(--flavor-blue-muted-7); --border-default: var(--flavor-blue-muted-8); --border-strong: var(--flavor-blue-muted-10); --border-interactive: var(--flavor-blue-muted-10); --accent-subtle: var(--flavor-blue-muted-2); --accent-subtle-hover: var(--flavor-blue-muted-3); --accent-border: var(--flavor-blue-muted-4); --focus-ring: var(--flavor-blue-muted-10); --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-blue-muted-2); --success-border: var(--flavor-blue-muted-4); --success-text: var(--flavor-blue-muted-12); --success-solid: var(--flavor-blue-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-2); --warning-border: var(--flavor-blue-muted-4); --warning-text: var(--flavor-blue-muted-12); --warning-solid: var(--flavor-blue-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-2); --danger-border: var(--flavor-blue-muted-4); --danger-text: var(--flavor-blue-muted-12); --danger-solid: var(--flavor-blue-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-2); --info-border: var(--flavor-blue-muted-4); --info-text: var(--flavor-blue-muted-12); --info-solid: var(--flavor-blue-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="blue"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-blue-regular-8); --surface-1: var(--flavor-blue-regular-7); --surface-2: var(--flavor-blue-regular-6); --surface-3: var(--flavor-blue-regular-6); --surface-tint: var(--flavor-blue-regular-9); --text-primary: var(--flavor-blue-regular-12); --text-secondary: var(--flavor-blue-regular-12); --text-tertiary: var(--flavor-blue-regular-12); --text-disabled: var(--flavor-blue-regular-11); --border-subtle: var(--flavor-blue-regular-9); --border-default: var(--flavor-blue-regular-10); --border-strong: var(--flavor-blue-regular-11); --border-interactive: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-2); --accent-subtle-hover: var(--flavor-blue-regular-3); --accent-border: var(--flavor-blue-regular-4); --focus-ring: var(--flavor-blue-regular-11); --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-12); --text-on-accent-subtle: var(--flavor-blue-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-blue-regular-2); --success-border: var(--flavor-blue-regular-4); --success-text: var(--flavor-blue-regular-12); --success-solid: var(--flavor-blue-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-2); --warning-border: var(--flavor-blue-regular-4); --warning-text: var(--flavor-blue-regular-12); --warning-solid: var(--flavor-blue-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-2); --danger-border: var(--flavor-blue-regular-4); --danger-text: var(--flavor-blue-regular-12); --danger-solid: var(--flavor-blue-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-2); --info-border: var(--flavor-blue-regular-4); --info-text: var(--flavor-blue-regular-12); --info-solid: var(--flavor-blue-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="blue"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-9); --surface-1: var(--flavor-blue-bold-8); --surface-2: var(--flavor-blue-bold-7); --surface-3: var(--flavor-blue-bold-7); --surface-tint: var(--flavor-blue-bold-10); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-blue-bold-12); --border-subtle: var(--flavor-blue-bold-10); --border-default: var(--flavor-blue-bold-11); --border-strong: var(--flavor-blue-bold-12); --border-interactive: var(--flavor-blue-bold-12); --accent-subtle: var(--flavor-blue-bold-2); --accent-subtle-hover: var(--flavor-blue-bold-3); --accent-border: var(--flavor-blue-bold-4); --focus-ring: var(--flavor-blue-bold-12); --accent-bg: var(--flavor-blue-bold-12); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-blue-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-blue-bold-2); --success-border: var(--flavor-blue-bold-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-blue-bold-12); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-2); --warning-border: var(--flavor-blue-bold-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-blue-bold-12); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-2); --danger-border: var(--flavor-blue-bold-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-blue-bold-12); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-2); --info-border: var(--flavor-blue-bold-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-blue-bold-12); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="violet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-violet-muted-6); --surface-1: var(--flavor-violet-muted-5); --surface-2: var(--flavor-violet-muted-4); --surface-3: var(--flavor-violet-muted-4); --surface-tint: var(--flavor-violet-muted-7); --text-primary: var(--flavor-violet-muted-12); --text-secondary: var(--flavor-violet-muted-11); --text-tertiary: var(--flavor-violet-muted-11); --text-disabled: var(--flavor-violet-muted-9); --border-subtle: var(--flavor-violet-muted-7); --border-default: var(--flavor-violet-muted-8); --border-strong: var(--flavor-violet-muted-10); --border-interactive: var(--flavor-violet-muted-10); --accent-subtle: var(--flavor-violet-muted-2); --accent-subtle-hover: var(--flavor-violet-muted-3); --accent-border: var(--flavor-violet-muted-4); --focus-ring: var(--flavor-violet-muted-10); --accent-bg: var(--flavor-violet-muted-10); --accent-bg-hover: var(--flavor-violet-muted-11); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-11); --text-on-accent-subtle: var(--flavor-violet-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-violet-muted-2); --success-border: var(--flavor-violet-muted-4); --success-text: var(--flavor-violet-muted-12); --success-solid: var(--flavor-violet-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-muted-2); --warning-border: var(--flavor-violet-muted-4); --warning-text: var(--flavor-violet-muted-12); --warning-solid: var(--flavor-violet-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-muted-2); --danger-border: var(--flavor-violet-muted-4); --danger-text: var(--flavor-violet-muted-12); --danger-solid: var(--flavor-violet-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-muted-2); --info-border: var(--flavor-violet-muted-4); --info-text: var(--flavor-violet-muted-12); --info-solid: var(--flavor-violet-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="violet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-violet-regular-8); --surface-1: var(--flavor-violet-regular-7); --surface-2: var(--flavor-violet-regular-6); --surface-3: var(--flavor-violet-regular-6); --surface-tint: var(--flavor-violet-regular-9); --text-primary: var(--flavor-violet-regular-12); --text-secondary: var(--flavor-violet-regular-12); --text-tertiary: var(--flavor-violet-regular-12); --text-disabled: var(--flavor-violet-regular-11); --border-subtle: var(--flavor-violet-regular-9); --border-default: var(--flavor-violet-regular-10); --border-strong: var(--flavor-violet-regular-11); --border-interactive: var(--flavor-violet-regular-11); --accent-subtle: var(--flavor-violet-regular-2); --accent-subtle-hover: var(--flavor-violet-regular-3); --accent-border: var(--flavor-violet-regular-4); --focus-ring: var(--flavor-violet-regular-11); --accent-bg: var(--flavor-violet-regular-11); --accent-bg-hover: var(--flavor-violet-regular-12); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-12); --text-on-accent-subtle: var(--flavor-violet-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-violet-regular-2); --success-border: var(--flavor-violet-regular-4); --success-text: var(--flavor-violet-regular-12); --success-solid: var(--flavor-violet-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-regular-2); --warning-border: var(--flavor-violet-regular-4); --warning-text: var(--flavor-violet-regular-12); --warning-solid: var(--flavor-violet-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-regular-2); --danger-border: var(--flavor-violet-regular-4); --danger-text: var(--flavor-violet-regular-12); --danger-solid: var(--flavor-violet-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-regular-2); --info-border: var(--flavor-violet-regular-4); --info-text: var(--flavor-violet-regular-12); --info-solid: var(--flavor-violet-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="violet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-violet-bold-8); --surface-1: var(--flavor-violet-bold-7); --surface-2: var(--flavor-violet-bold-6); --surface-3: var(--flavor-violet-bold-6); --surface-tint: var(--flavor-violet-bold-9); --text-primary: var(--flavor-violet-bold-12); --text-secondary: var(--flavor-violet-bold-12); --text-tertiary: var(--flavor-violet-bold-12); --text-disabled: var(--flavor-violet-bold-11); --border-subtle: var(--flavor-violet-bold-9); --border-default: var(--flavor-violet-bold-10); --border-strong: var(--flavor-violet-bold-11); --border-interactive: var(--flavor-violet-bold-11); --accent-subtle: var(--flavor-violet-bold-2); --accent-subtle-hover: var(--flavor-violet-bold-3); --accent-border: var(--flavor-violet-bold-4); --focus-ring: var(--flavor-violet-bold-11); --accent-bg: var(--flavor-violet-bold-11); --accent-bg-hover: var(--flavor-violet-bold-12); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-12); --text-on-accent-subtle: var(--flavor-violet-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-violet-bold-2); --success-border: var(--flavor-violet-bold-4); --success-text: var(--flavor-violet-bold-12); --success-solid: var(--flavor-violet-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-bold-2); --warning-border: var(--flavor-violet-bold-4); --warning-text: var(--flavor-violet-bold-12); --warning-solid: var(--flavor-violet-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-bold-2); --danger-border: var(--flavor-violet-bold-4); --danger-text: var(--flavor-violet-bold-12); --danger-solid: var(--flavor-violet-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-bold-2); --info-border: var(--flavor-violet-bold-4); --info-text: var(--flavor-violet-bold-12); --info-solid: var(--flavor-violet-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="purple"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-purple-muted-6); --surface-1: var(--flavor-purple-muted-5); --surface-2: var(--flavor-purple-muted-4); --surface-3: var(--flavor-purple-muted-4); --surface-tint: var(--flavor-purple-muted-7); --text-primary: var(--flavor-purple-muted-12); --text-secondary: var(--flavor-purple-muted-11); --text-tertiary: var(--flavor-purple-muted-11); --text-disabled: var(--flavor-purple-muted-9); --border-subtle: var(--flavor-purple-muted-7); --border-default: var(--flavor-purple-muted-8); --border-strong: var(--flavor-purple-muted-10); --border-interactive: var(--flavor-purple-muted-10); --accent-subtle: var(--flavor-purple-muted-2); --accent-subtle-hover: var(--flavor-purple-muted-3); --accent-border: var(--flavor-purple-muted-4); --focus-ring: var(--flavor-purple-muted-10); --accent-bg: var(--flavor-purple-muted-10); --accent-bg-hover: var(--flavor-purple-muted-11); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-11); --text-on-accent-subtle: var(--flavor-purple-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-purple-muted-2); --success-border: var(--flavor-purple-muted-4); --success-text: var(--flavor-purple-muted-12); --success-solid: var(--flavor-purple-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-muted-2); --warning-border: var(--flavor-purple-muted-4); --warning-text: var(--flavor-purple-muted-12); --warning-solid: var(--flavor-purple-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-muted-2); --danger-border: var(--flavor-purple-muted-4); --danger-text: var(--flavor-purple-muted-12); --danger-solid: var(--flavor-purple-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-muted-2); --info-border: var(--flavor-purple-muted-4); --info-text: var(--flavor-purple-muted-12); --info-solid: var(--flavor-purple-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="purple"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-purple-regular-8); --surface-1: var(--flavor-purple-regular-7); --surface-2: var(--flavor-purple-regular-6); --surface-3: var(--flavor-purple-regular-6); --surface-tint: var(--flavor-purple-regular-9); --text-primary: var(--flavor-purple-regular-12); --text-secondary: var(--flavor-purple-regular-12); --text-tertiary: var(--flavor-purple-regular-12); --text-disabled: var(--flavor-purple-regular-11); --border-subtle: var(--flavor-purple-regular-9); --border-default: var(--flavor-purple-regular-10); --border-strong: var(--flavor-purple-regular-11); --border-interactive: var(--flavor-purple-regular-11); --accent-subtle: var(--flavor-purple-regular-2); --accent-subtle-hover: var(--flavor-purple-regular-3); --accent-border: var(--flavor-purple-regular-4); --focus-ring: var(--flavor-purple-regular-11); --accent-bg: var(--flavor-purple-regular-11); --accent-bg-hover: var(--flavor-purple-regular-12); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-12); --text-on-accent-subtle: var(--flavor-purple-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-purple-regular-2); --success-border: var(--flavor-purple-regular-4); --success-text: var(--flavor-purple-regular-12); --success-solid: var(--flavor-purple-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-regular-2); --warning-border: var(--flavor-purple-regular-4); --warning-text: var(--flavor-purple-regular-12); --warning-solid: var(--flavor-purple-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-regular-2); --danger-border: var(--flavor-purple-regular-4); --danger-text: var(--flavor-purple-regular-12); --danger-solid: var(--flavor-purple-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-regular-2); --info-border: var(--flavor-purple-regular-4); --info-text: var(--flavor-purple-regular-12); --info-solid: var(--flavor-purple-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="purple"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-purple-bold-8); --surface-1: var(--flavor-purple-bold-7); --surface-2: var(--flavor-purple-bold-6); --surface-3: var(--flavor-purple-bold-6); --surface-tint: var(--flavor-purple-bold-9); --text-primary: var(--flavor-purple-bold-12); --text-secondary: var(--flavor-purple-bold-12); --text-tertiary: var(--flavor-purple-bold-12); --text-disabled: var(--flavor-purple-bold-11); --border-subtle: var(--flavor-purple-bold-9); --border-default: var(--flavor-purple-bold-10); --border-strong: var(--flavor-purple-bold-11); --border-interactive: var(--flavor-purple-bold-11); --accent-subtle: var(--flavor-purple-bold-2); --accent-subtle-hover: var(--flavor-purple-bold-3); --accent-border: var(--flavor-purple-bold-4); --focus-ring: var(--flavor-purple-bold-11); --accent-bg: var(--flavor-purple-bold-11); --accent-bg-hover: var(--flavor-purple-bold-12); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-12); --text-on-accent-subtle: var(--flavor-purple-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-purple-bold-2); --success-border: var(--flavor-purple-bold-4); --success-text: var(--flavor-purple-bold-12); --success-solid: var(--flavor-purple-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-bold-2); --warning-border: var(--flavor-purple-bold-4); --warning-text: var(--flavor-purple-bold-12); --warning-solid: var(--flavor-purple-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-bold-2); --danger-border: var(--flavor-purple-bold-4); --danger-text: var(--flavor-purple-bold-12); --danger-solid: var(--flavor-purple-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-bold-2); --info-border: var(--flavor-purple-bold-4); --info-text: var(--flavor-purple-bold-12); --info-solid: var(--flavor-purple-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="magenta"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-6); --surface-1: var(--flavor-magenta-muted-5); --surface-2: var(--flavor-magenta-muted-4); --surface-3: var(--flavor-magenta-muted-4); --surface-tint: var(--flavor-magenta-muted-7); --text-primary: var(--flavor-magenta-muted-12); --text-secondary: var(--flavor-magenta-muted-11); --text-tertiary: var(--flavor-magenta-muted-11); --text-disabled: var(--flavor-magenta-muted-9); --border-subtle: var(--flavor-magenta-muted-7); --border-default: var(--flavor-magenta-muted-8); --border-strong: var(--flavor-magenta-muted-10); --border-interactive: var(--flavor-magenta-muted-10); --accent-subtle: var(--flavor-magenta-muted-2); --accent-subtle-hover: var(--flavor-magenta-muted-3); --accent-border: var(--flavor-magenta-muted-4); --focus-ring: var(--flavor-magenta-muted-10); --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-magenta-muted-2); --success-border: var(--flavor-magenta-muted-4); --success-text: var(--flavor-magenta-muted-12); --success-solid: var(--flavor-magenta-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-2); --warning-border: var(--flavor-magenta-muted-4); --warning-text: var(--flavor-magenta-muted-12); --warning-solid: var(--flavor-magenta-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-2); --danger-border: var(--flavor-magenta-muted-4); --danger-text: var(--flavor-magenta-muted-12); --danger-solid: var(--flavor-magenta-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-2); --info-border: var(--flavor-magenta-muted-4); --info-text: var(--flavor-magenta-muted-12); --info-solid: var(--flavor-magenta-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="magenta"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-7); --surface-1: var(--flavor-magenta-regular-6); --surface-2: var(--flavor-magenta-regular-5); --surface-3: var(--flavor-magenta-regular-5); --surface-tint: var(--flavor-magenta-regular-8); --text-primary: var(--flavor-magenta-regular-12); --text-secondary: var(--flavor-magenta-regular-12); --text-tertiary: var(--flavor-magenta-regular-12); --text-disabled: var(--flavor-magenta-regular-10); --border-subtle: var(--flavor-magenta-regular-8); --border-default: var(--flavor-magenta-regular-9); --border-strong: var(--flavor-magenta-regular-11); --border-interactive: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-2); --accent-subtle-hover: var(--flavor-magenta-regular-3); --accent-border: var(--flavor-magenta-regular-4); --focus-ring: var(--flavor-magenta-regular-11); --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-12); --text-on-accent-subtle: var(--flavor-magenta-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-magenta-regular-2); --success-border: var(--flavor-magenta-regular-4); --success-text: var(--flavor-magenta-regular-12); --success-solid: var(--flavor-magenta-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-2); --warning-border: var(--flavor-magenta-regular-4); --warning-text: var(--flavor-magenta-regular-12); --warning-solid: var(--flavor-magenta-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-2); --danger-border: var(--flavor-magenta-regular-4); --danger-text: var(--flavor-magenta-regular-12); --danger-solid: var(--flavor-magenta-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-2); --info-border: var(--flavor-magenta-regular-4); --info-text: var(--flavor-magenta-regular-12); --info-solid: var(--flavor-magenta-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="magenta"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-8); --surface-1: var(--flavor-magenta-bold-7); --surface-2: var(--flavor-magenta-bold-6); --surface-3: var(--flavor-magenta-bold-6); --surface-tint: var(--flavor-magenta-bold-9); --text-primary: var(--flavor-magenta-bold-12); --text-secondary: var(--flavor-magenta-bold-12); --text-tertiary: var(--flavor-magenta-bold-12); --text-disabled: var(--flavor-magenta-bold-11); --border-subtle: var(--flavor-magenta-bold-9); --border-default: var(--flavor-magenta-bold-10); --border-strong: var(--flavor-magenta-bold-11); --border-interactive: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-2); --accent-subtle-hover: var(--flavor-magenta-bold-3); --accent-border: var(--flavor-magenta-bold-4); --focus-ring: var(--flavor-magenta-bold-11); --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-12); --text-on-accent-subtle: var(--flavor-magenta-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-magenta-bold-2); --success-border: var(--flavor-magenta-bold-4); --success-text: var(--flavor-magenta-bold-12); --success-solid: var(--flavor-magenta-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-2); --warning-border: var(--flavor-magenta-bold-4); --warning-text: var(--flavor-magenta-bold-12); --warning-solid: var(--flavor-magenta-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-2); --danger-border: var(--flavor-magenta-bold-4); --danger-text: var(--flavor-magenta-bold-12); --danger-solid: var(--flavor-magenta-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-2); --info-border: var(--flavor-magenta-bold-4); --info-text: var(--flavor-magenta-bold-12); --info-solid: var(--flavor-magenta-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="brand"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-6); --surface-1: var(--flavor-blue-muted-5); --surface-2: var(--flavor-blue-muted-4); --surface-3: var(--flavor-blue-muted-4); --surface-tint: var(--flavor-blue-muted-7); --text-primary: var(--flavor-blue-muted-12); --text-secondary: var(--flavor-blue-muted-11); --text-tertiary: var(--flavor-blue-muted-11); --text-disabled: var(--flavor-blue-muted-9); --border-subtle: var(--flavor-blue-muted-7); --border-default: var(--flavor-blue-muted-8); --border-strong: var(--flavor-blue-muted-10); --border-interactive: var(--flavor-blue-muted-10); --accent-subtle: var(--flavor-blue-muted-2); --accent-subtle-hover: var(--flavor-blue-muted-3); --accent-border: var(--flavor-orange-muted-4); --focus-ring: var(--flavor-orange-muted-12); --accent-bg: var(--flavor-blue-muted-10); --accent-bg-hover: var(--flavor-blue-muted-11); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-11); --text-on-accent-subtle: var(--flavor-blue-muted-12); --secondary-bg: var(--flavor-orange-muted-12); --secondary-bg-hover: var(--flavor-orange-muted-12); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-12); --secondary-text: var(--flavor-orange-muted-12); --text-on-secondary-subtle: var(--flavor-orange-muted-12); --success-bg: var(--flavor-blue-muted-2); --success-border: var(--flavor-blue-muted-4); --success-text: var(--flavor-blue-muted-12); --success-solid: var(--flavor-blue-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-2); --warning-border: var(--flavor-blue-muted-4); --warning-text: var(--flavor-blue-muted-12); --warning-solid: var(--flavor-blue-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-2); --danger-border: var(--flavor-blue-muted-4); --danger-text: var(--flavor-blue-muted-12); --danger-solid: var(--flavor-blue-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-2); --info-border: var(--flavor-blue-muted-4); --info-text: var(--flavor-blue-muted-12); --info-solid: var(--flavor-blue-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="brand"][data-sat="regular"][data-bg="accent"], :root:not([data-hue])[data-bg="accent"] { --surface-page: var(--flavor-blue-regular-8); --surface-1: var(--flavor-blue-regular-7); --surface-2: var(--flavor-blue-regular-6); --surface-3: var(--flavor-blue-regular-6); --surface-tint: var(--flavor-blue-regular-9); --text-primary: var(--flavor-blue-regular-12); --text-secondary: var(--flavor-blue-regular-12); --text-tertiary: var(--flavor-blue-regular-12); --text-disabled: var(--flavor-blue-regular-11); --border-subtle: var(--flavor-blue-regular-9); --border-default: var(--flavor-blue-regular-10); --border-strong: var(--flavor-blue-regular-11); --border-interactive: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-2); --accent-subtle-hover: var(--flavor-blue-regular-3); --accent-border: var(--flavor-orange-regular-4); --focus-ring: var(--flavor-orange-regular-12); --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-12); --text-on-accent-subtle: var(--flavor-blue-regular-12); --secondary-bg: var(--flavor-orange-regular-12); --secondary-bg-hover: var(--flavor-orange-regular-12); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-12); --secondary-text: var(--flavor-orange-regular-12); --text-on-secondary-subtle: var(--flavor-orange-regular-12); --success-bg: var(--flavor-blue-regular-2); --success-border: var(--flavor-blue-regular-4); --success-text: var(--flavor-blue-regular-12); --success-solid: var(--flavor-blue-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-2); --warning-border: var(--flavor-blue-regular-4); --warning-text: var(--flavor-blue-regular-12); --warning-solid: var(--flavor-blue-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-2); --danger-border: var(--flavor-blue-regular-4); --danger-text: var(--flavor-blue-regular-12); --danger-solid: var(--flavor-blue-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-2); --info-border: var(--flavor-blue-regular-4); --info-text: var(--flavor-blue-regular-12); --info-solid: var(--flavor-blue-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="brand"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-9); --surface-1: var(--flavor-blue-bold-8); --surface-2: var(--flavor-blue-bold-7); --surface-3: var(--flavor-blue-bold-7); --surface-tint: var(--flavor-blue-bold-10); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-blue-bold-12); --border-subtle: var(--flavor-blue-bold-10); --border-default: var(--flavor-blue-bold-11); --border-strong: var(--flavor-blue-bold-12); --border-interactive: var(--flavor-blue-bold-12); --accent-subtle: var(--flavor-blue-bold-2); --accent-subtle-hover: var(--flavor-blue-bold-3); --accent-border: var(--flavor-orange-bold-4); --focus-ring: var(--flavor-orange-bold-12); --accent-bg: var(--flavor-blue-bold-12); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-blue-bold-12); --secondary-bg: var(--flavor-orange-bold-12); --secondary-bg-hover: var(--flavor-orange-bold-12); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-orange-bold-12); --success-bg: var(--flavor-blue-bold-2); --success-border: var(--flavor-blue-bold-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-blue-bold-12); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-2); --warning-border: var(--flavor-blue-bold-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-blue-bold-12); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-2); --danger-border: var(--flavor-blue-bold-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-blue-bold-12); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-2); --info-border: var(--flavor-blue-bold-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-blue-bold-12); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="brand2"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-6); --surface-1: var(--flavor-magenta-muted-5); --surface-2: var(--flavor-magenta-muted-4); --surface-3: var(--flavor-magenta-muted-4); --surface-tint: var(--flavor-magenta-muted-7); --text-primary: var(--flavor-magenta-muted-12); --text-secondary: var(--flavor-magenta-muted-11); --text-tertiary: var(--flavor-magenta-muted-11); --text-disabled: var(--flavor-magenta-muted-9); --border-subtle: var(--flavor-magenta-muted-7); --border-default: var(--flavor-magenta-muted-8); --border-strong: var(--flavor-magenta-muted-10); --border-interactive: var(--flavor-magenta-muted-10); --accent-subtle: var(--flavor-magenta-muted-2); --accent-subtle-hover: var(--flavor-magenta-muted-3); --accent-border: var(--flavor-cyan-muted-4); --focus-ring: var(--flavor-cyan-muted-12); --accent-bg: var(--flavor-magenta-muted-10); --accent-bg-hover: var(--flavor-magenta-muted-11); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-11); --text-on-accent-subtle: var(--flavor-magenta-muted-12); --secondary-bg: var(--flavor-cyan-muted-12); --secondary-bg-hover: var(--flavor-cyan-muted-12); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-12); --secondary-text: var(--flavor-cyan-muted-12); --text-on-secondary-subtle: var(--flavor-cyan-muted-12); --success-bg: var(--flavor-magenta-muted-2); --success-border: var(--flavor-magenta-muted-4); --success-text: var(--flavor-magenta-muted-12); --success-solid: var(--flavor-magenta-muted-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-2); --warning-border: var(--flavor-magenta-muted-4); --warning-text: var(--flavor-magenta-muted-12); --warning-solid: var(--flavor-magenta-muted-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-2); --danger-border: var(--flavor-magenta-muted-4); --danger-text: var(--flavor-magenta-muted-12); --danger-solid: var(--flavor-magenta-muted-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-2); --info-border: var(--flavor-magenta-muted-4); --info-text: var(--flavor-magenta-muted-12); --info-solid: var(--flavor-magenta-muted-10); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="brand2"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-7); --surface-1: var(--flavor-magenta-regular-6); --surface-2: var(--flavor-magenta-regular-5); --surface-3: var(--flavor-magenta-regular-5); --surface-tint: var(--flavor-magenta-regular-8); --text-primary: var(--flavor-magenta-regular-12); --text-secondary: var(--flavor-magenta-regular-12); --text-tertiary: var(--flavor-magenta-regular-12); --text-disabled: var(--flavor-magenta-regular-10); --border-subtle: var(--flavor-magenta-regular-8); --border-default: var(--flavor-magenta-regular-9); --border-strong: var(--flavor-magenta-regular-11); --border-interactive: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-2); --accent-subtle-hover: var(--flavor-magenta-regular-3); --accent-border: var(--flavor-cyan-regular-4); --focus-ring: var(--flavor-cyan-regular-12); --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-12); --text-on-accent-subtle: var(--flavor-magenta-regular-12); --secondary-bg: var(--flavor-cyan-regular-12); --secondary-bg-hover: var(--flavor-cyan-regular-12); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-12); --secondary-text: var(--flavor-cyan-regular-12); --text-on-secondary-subtle: var(--flavor-cyan-regular-12); --success-bg: var(--flavor-magenta-regular-2); --success-border: var(--flavor-magenta-regular-4); --success-text: var(--flavor-magenta-regular-12); --success-solid: var(--flavor-magenta-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-2); --warning-border: var(--flavor-magenta-regular-4); --warning-text: var(--flavor-magenta-regular-12); --warning-solid: var(--flavor-magenta-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-2); --danger-border: var(--flavor-magenta-regular-4); --danger-text: var(--flavor-magenta-regular-12); --danger-solid: var(--flavor-magenta-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-2); --info-border: var(--flavor-magenta-regular-4); --info-text: var(--flavor-magenta-regular-12); --info-solid: var(--flavor-magenta-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-hue="brand2"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-8); --surface-1: var(--flavor-magenta-bold-7); --surface-2: var(--flavor-magenta-bold-6); --surface-3: var(--flavor-magenta-bold-6); --surface-tint: var(--flavor-magenta-bold-9); --text-primary: var(--flavor-magenta-bold-12); --text-secondary: var(--flavor-magenta-bold-12); --text-tertiary: var(--flavor-magenta-bold-12); --text-disabled: var(--flavor-magenta-bold-11); --border-subtle: var(--flavor-magenta-bold-9); --border-default: var(--flavor-magenta-bold-10); --border-strong: var(--flavor-magenta-bold-11); --border-interactive: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-2); --accent-subtle-hover: var(--flavor-magenta-bold-3); --accent-border: var(--flavor-cyan-bold-4); --focus-ring: var(--flavor-cyan-bold-12); --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-12); --text-on-accent-subtle: var(--flavor-magenta-bold-12); --secondary-bg: var(--flavor-cyan-bold-12); --secondary-bg-hover: var(--flavor-cyan-bold-12); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-12); --secondary-text: var(--flavor-cyan-bold-12); --text-on-secondary-subtle: var(--flavor-cyan-bold-12); --success-bg: var(--flavor-magenta-bold-2); --success-border: var(--flavor-magenta-bold-4); --success-text: var(--flavor-magenta-bold-12); --success-solid: var(--flavor-magenta-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-2); --warning-border: var(--flavor-magenta-bold-4); --warning-text: var(--flavor-magenta-bold-12); --warning-solid: var(--flavor-magenta-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-2); --danger-border: var(--flavor-magenta-bold-4); --danger-text: var(--flavor-magenta-bold-12); --danger-solid: var(--flavor-magenta-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-2); --info-border: var(--flavor-magenta-bold-4); --info-text: var(--flavor-magenta-bold-12); --info-solid: var(--flavor-magenta-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-neutral-muted-8); --surface-1: var(--flavor-neutral-muted-7); --surface-2: var(--flavor-neutral-muted-6); --surface-3: var(--flavor-neutral-muted-6); --surface-tint: var(--flavor-neutral-muted-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-neutral-muted-11); --border-subtle: var(--flavor-neutral-muted-9); --border-default: var(--flavor-neutral-muted-10); --border-strong: var(--flavor-neutral-muted-11); --border-interactive: var(--flavor-neutral-muted-11); --accent-subtle: var(--flavor-neutral-muted-2); --accent-subtle-hover: var(--flavor-neutral-muted-3); --accent-border: var(--flavor-neutral-muted-4); --focus-ring: var(--flavor-neutral-muted-11); --accent-bg: var(--flavor-neutral-muted-11); --accent-bg-hover: var(--flavor-neutral-muted-12); --accent-bg-active: var(--flavor-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-neutral-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-neutral-muted-2); --success-border: var(--flavor-neutral-muted-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-neutral-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-muted-2); --warning-border: var(--flavor-neutral-muted-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-neutral-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-muted-2); --danger-border: var(--flavor-neutral-muted-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-neutral-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-muted-2); --info-border: var(--flavor-neutral-muted-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-neutral-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-neutral-regular-8); --surface-1: var(--flavor-neutral-regular-7); --surface-2: var(--flavor-neutral-regular-6); --surface-3: var(--flavor-neutral-regular-6); --surface-tint: var(--flavor-neutral-regular-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-neutral-regular-11); --border-subtle: var(--flavor-neutral-regular-9); --border-default: var(--flavor-neutral-regular-10); --border-strong: var(--flavor-neutral-regular-11); --border-interactive: var(--flavor-neutral-regular-11); --accent-subtle: var(--flavor-neutral-regular-2); --accent-subtle-hover: var(--flavor-neutral-regular-3); --accent-border: var(--flavor-neutral-regular-4); --focus-ring: var(--flavor-neutral-regular-11); --accent-bg: var(--flavor-neutral-regular-11); --accent-bg-hover: var(--flavor-neutral-regular-12); --accent-bg-active: var(--flavor-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-neutral-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-neutral-regular-2); --success-border: var(--flavor-neutral-regular-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-neutral-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-regular-2); --warning-border: var(--flavor-neutral-regular-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-neutral-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-regular-2); --danger-border: var(--flavor-neutral-regular-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-neutral-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-regular-2); --info-border: var(--flavor-neutral-regular-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-neutral-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-neutral-bold-8); --surface-1: var(--flavor-neutral-bold-7); --surface-2: var(--flavor-neutral-bold-6); --surface-3: var(--flavor-neutral-bold-6); --surface-tint: var(--flavor-neutral-bold-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-neutral-bold-11); --border-subtle: var(--flavor-neutral-bold-9); --border-default: var(--flavor-neutral-bold-10); --border-strong: var(--flavor-neutral-bold-11); --border-interactive: var(--flavor-neutral-bold-11); --accent-subtle: var(--flavor-neutral-bold-2); --accent-subtle-hover: var(--flavor-neutral-bold-3); --accent-border: var(--flavor-neutral-bold-4); --focus-ring: var(--flavor-neutral-bold-11); --accent-bg: var(--flavor-neutral-bold-11); --accent-bg-hover: var(--flavor-neutral-bold-12); --accent-bg-active: var(--flavor-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-neutral-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-neutral-bold-2); --success-border: var(--flavor-neutral-bold-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-neutral-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-bold-2); --warning-border: var(--flavor-neutral-bold-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-neutral-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-bold-2); --danger-border: var(--flavor-neutral-bold-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-neutral-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-bold-2); --info-border: var(--flavor-neutral-bold-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-neutral-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-red-muted-6); --surface-1: var(--flavor-red-muted-5); --surface-2: var(--flavor-red-muted-4); --surface-3: var(--flavor-red-muted-4); --surface-tint: var(--flavor-red-muted-7); --text-primary: var(--flavor-red-muted-12); --text-secondary: var(--flavor-red-muted-12); --text-tertiary: var(--flavor-red-muted-12); --text-disabled: var(--flavor-red-muted-9); --border-subtle: var(--flavor-red-muted-7); --border-default: var(--flavor-red-muted-8); --border-strong: var(--flavor-red-muted-10); --border-interactive: var(--flavor-red-muted-10); --accent-subtle: var(--flavor-red-muted-2); --accent-subtle-hover: var(--flavor-red-muted-3); --accent-border: var(--flavor-red-muted-4); --focus-ring: var(--flavor-red-muted-10); --accent-bg: var(--flavor-red-muted-11); --accent-bg-hover: var(--flavor-red-muted-12); --accent-bg-active: var(--flavor-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-12); --text-on-accent-subtle: var(--flavor-red-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-red-muted-2); --success-border: var(--flavor-red-muted-4); --success-text: var(--flavor-red-muted-12); --success-solid: var(--flavor-red-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-muted-2); --warning-border: var(--flavor-red-muted-4); --warning-text: var(--flavor-red-muted-12); --warning-solid: var(--flavor-red-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-muted-2); --danger-border: var(--flavor-red-muted-4); --danger-text: var(--flavor-red-muted-12); --danger-solid: var(--flavor-red-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-muted-2); --info-border: var(--flavor-red-muted-4); --info-text: var(--flavor-red-muted-12); --info-solid: var(--flavor-red-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-red-regular-7); --surface-1: var(--flavor-red-regular-6); --surface-2: var(--flavor-red-regular-5); --surface-3: var(--flavor-red-regular-5); --surface-tint: var(--flavor-red-regular-8); --text-primary: var(--flavor-red-regular-12); --text-secondary: var(--flavor-red-regular-12); --text-tertiary: var(--flavor-red-regular-12); --text-disabled: var(--flavor-red-regular-10); --border-subtle: var(--flavor-red-regular-8); --border-default: var(--flavor-red-regular-9); --border-strong: var(--flavor-red-regular-11); --border-interactive: var(--flavor-red-regular-11); --accent-subtle: var(--flavor-red-regular-2); --accent-subtle-hover: var(--flavor-red-regular-3); --accent-border: var(--flavor-red-regular-4); --focus-ring: var(--flavor-red-regular-11); --accent-bg: var(--flavor-red-regular-11); --accent-bg-hover: var(--flavor-red-regular-12); --accent-bg-active: var(--flavor-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-12); --text-on-accent-subtle: var(--flavor-red-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-red-regular-2); --success-border: var(--flavor-red-regular-4); --success-text: var(--flavor-red-regular-12); --success-solid: var(--flavor-red-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-regular-2); --warning-border: var(--flavor-red-regular-4); --warning-text: var(--flavor-red-regular-12); --warning-solid: var(--flavor-red-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-2); --danger-border: var(--flavor-red-regular-4); --danger-text: var(--flavor-red-regular-12); --danger-solid: var(--flavor-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-regular-2); --info-border: var(--flavor-red-regular-4); --info-text: var(--flavor-red-regular-12); --info-solid: var(--flavor-red-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-red-bold-7); --surface-1: var(--flavor-red-bold-6); --surface-2: var(--flavor-red-bold-5); --surface-3: var(--flavor-red-bold-5); --surface-tint: var(--flavor-red-bold-8); --text-primary: var(--flavor-red-bold-12); --text-secondary: var(--flavor-red-bold-12); --text-tertiary: var(--flavor-red-bold-12); --text-disabled: var(--flavor-red-bold-10); --border-subtle: var(--flavor-red-bold-8); --border-default: var(--flavor-red-bold-9); --border-strong: var(--flavor-red-bold-11); --border-interactive: var(--flavor-red-bold-11); --accent-subtle: var(--flavor-red-bold-2); --accent-subtle-hover: var(--flavor-red-bold-3); --accent-border: var(--flavor-red-bold-4); --focus-ring: var(--flavor-red-bold-11); --accent-bg: var(--flavor-red-bold-11); --accent-bg-hover: var(--flavor-red-bold-12); --accent-bg-active: var(--flavor-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-12); --text-on-accent-subtle: var(--flavor-red-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-red-bold-2); --success-border: var(--flavor-red-bold-4); --success-text: var(--flavor-red-bold-12); --success-solid: var(--flavor-red-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-bold-2); --warning-border: var(--flavor-red-bold-4); --warning-text: var(--flavor-red-bold-12); --warning-solid: var(--flavor-red-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-bold-2); --danger-border: var(--flavor-red-bold-4); --danger-text: var(--flavor-red-bold-12); --danger-solid: var(--flavor-red-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-bold-2); --info-border: var(--flavor-red-bold-4); --info-text: var(--flavor-red-bold-12); --info-solid: var(--flavor-red-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-muted-6); --surface-1: var(--flavor-scarlet-muted-5); --surface-2: var(--flavor-scarlet-muted-4); --surface-3: var(--flavor-scarlet-muted-4); --surface-tint: var(--flavor-scarlet-muted-7); --text-primary: var(--flavor-scarlet-muted-12); --text-secondary: var(--flavor-scarlet-muted-12); --text-tertiary: var(--flavor-scarlet-muted-12); --text-disabled: var(--flavor-scarlet-muted-9); --border-subtle: var(--flavor-scarlet-muted-7); --border-default: var(--flavor-scarlet-muted-8); --border-strong: var(--flavor-scarlet-muted-10); --border-interactive: var(--flavor-scarlet-muted-10); --accent-subtle: var(--flavor-scarlet-muted-2); --accent-subtle-hover: var(--flavor-scarlet-muted-3); --accent-border: var(--flavor-scarlet-muted-4); --focus-ring: var(--flavor-scarlet-muted-10); --accent-bg: var(--flavor-scarlet-muted-11); --accent-bg-hover: var(--flavor-scarlet-muted-12); --accent-bg-active: var(--flavor-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-12); --text-on-accent-subtle: var(--flavor-scarlet-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-scarlet-muted-2); --success-border: var(--flavor-scarlet-muted-4); --success-text: var(--flavor-scarlet-muted-12); --success-solid: var(--flavor-scarlet-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-muted-2); --warning-border: var(--flavor-scarlet-muted-4); --warning-text: var(--flavor-scarlet-muted-12); --warning-solid: var(--flavor-scarlet-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-muted-2); --danger-border: var(--flavor-scarlet-muted-4); --danger-text: var(--flavor-scarlet-muted-12); --danger-solid: var(--flavor-scarlet-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-muted-2); --info-border: var(--flavor-scarlet-muted-4); --info-text: var(--flavor-scarlet-muted-12); --info-solid: var(--flavor-scarlet-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-regular-7); --surface-1: var(--flavor-scarlet-regular-6); --surface-2: var(--flavor-scarlet-regular-5); --surface-3: var(--flavor-scarlet-regular-5); --surface-tint: var(--flavor-scarlet-regular-8); --text-primary: var(--flavor-scarlet-regular-12); --text-secondary: var(--flavor-scarlet-regular-12); --text-tertiary: var(--flavor-scarlet-regular-12); --text-disabled: var(--flavor-scarlet-regular-10); --border-subtle: var(--flavor-scarlet-regular-8); --border-default: var(--flavor-scarlet-regular-9); --border-strong: var(--flavor-scarlet-regular-11); --border-interactive: var(--flavor-scarlet-regular-11); --accent-subtle: var(--flavor-scarlet-regular-2); --accent-subtle-hover: var(--flavor-scarlet-regular-3); --accent-border: var(--flavor-scarlet-regular-4); --focus-ring: var(--flavor-scarlet-regular-11); --accent-bg: var(--flavor-scarlet-regular-11); --accent-bg-hover: var(--flavor-scarlet-regular-12); --accent-bg-active: var(--flavor-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-12); --text-on-accent-subtle: var(--flavor-scarlet-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-scarlet-regular-2); --success-border: var(--flavor-scarlet-regular-4); --success-text: var(--flavor-scarlet-regular-12); --success-solid: var(--flavor-scarlet-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-regular-2); --warning-border: var(--flavor-scarlet-regular-4); --warning-text: var(--flavor-scarlet-regular-12); --warning-solid: var(--flavor-scarlet-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-regular-2); --danger-border: var(--flavor-scarlet-regular-4); --danger-text: var(--flavor-scarlet-regular-12); --danger-solid: var(--flavor-scarlet-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-regular-2); --info-border: var(--flavor-scarlet-regular-4); --info-text: var(--flavor-scarlet-regular-12); --info-solid: var(--flavor-scarlet-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-bold-7); --surface-1: var(--flavor-scarlet-bold-6); --surface-2: var(--flavor-scarlet-bold-5); --surface-3: var(--flavor-scarlet-bold-5); --surface-tint: var(--flavor-scarlet-bold-8); --text-primary: var(--flavor-scarlet-bold-12); --text-secondary: var(--flavor-scarlet-bold-12); --text-tertiary: var(--flavor-scarlet-bold-12); --text-disabled: var(--flavor-scarlet-bold-10); --border-subtle: var(--flavor-scarlet-bold-8); --border-default: var(--flavor-scarlet-bold-9); --border-strong: var(--flavor-scarlet-bold-11); --border-interactive: var(--flavor-scarlet-bold-11); --accent-subtle: var(--flavor-scarlet-bold-2); --accent-subtle-hover: var(--flavor-scarlet-bold-3); --accent-border: var(--flavor-scarlet-bold-4); --focus-ring: var(--flavor-scarlet-bold-11); --accent-bg: var(--flavor-scarlet-bold-11); --accent-bg-hover: var(--flavor-scarlet-bold-12); --accent-bg-active: var(--flavor-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-12); --text-on-accent-subtle: var(--flavor-scarlet-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-scarlet-bold-2); --success-border: var(--flavor-scarlet-bold-4); --success-text: var(--flavor-scarlet-bold-12); --success-solid: var(--flavor-scarlet-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-bold-2); --warning-border: var(--flavor-scarlet-bold-4); --warning-text: var(--flavor-scarlet-bold-12); --warning-solid: var(--flavor-scarlet-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-bold-2); --danger-border: var(--flavor-scarlet-bold-4); --danger-text: var(--flavor-scarlet-bold-12); --danger-solid: var(--flavor-scarlet-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-bold-2); --info-border: var(--flavor-scarlet-bold-4); --info-text: var(--flavor-scarlet-bold-12); --info-solid: var(--flavor-scarlet-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-orange-muted-6); --surface-1: var(--flavor-orange-muted-5); --surface-2: var(--flavor-orange-muted-4); --surface-3: var(--flavor-orange-muted-4); --surface-tint: var(--flavor-orange-muted-7); --text-primary: var(--flavor-orange-muted-12); --text-secondary: var(--flavor-orange-muted-12); --text-tertiary: var(--flavor-orange-muted-12); --text-disabled: var(--flavor-orange-muted-9); --border-subtle: var(--flavor-orange-muted-7); --border-default: var(--flavor-orange-muted-8); --border-strong: var(--flavor-orange-muted-10); --border-interactive: var(--flavor-orange-muted-10); --accent-subtle: var(--flavor-orange-muted-2); --accent-subtle-hover: var(--flavor-orange-muted-3); --accent-border: var(--flavor-orange-muted-4); --focus-ring: var(--flavor-orange-muted-10); --accent-bg: var(--flavor-orange-muted-11); --accent-bg-hover: var(--flavor-orange-muted-12); --accent-bg-active: var(--flavor-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-12); --text-on-accent-subtle: var(--flavor-orange-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-orange-muted-2); --success-border: var(--flavor-orange-muted-4); --success-text: var(--flavor-orange-muted-12); --success-solid: var(--flavor-orange-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-muted-2); --warning-border: var(--flavor-orange-muted-4); --warning-text: var(--flavor-orange-muted-12); --warning-solid: var(--flavor-orange-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-muted-2); --danger-border: var(--flavor-orange-muted-4); --danger-text: var(--flavor-orange-muted-12); --danger-solid: var(--flavor-orange-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-muted-2); --info-border: var(--flavor-orange-muted-4); --info-text: var(--flavor-orange-muted-12); --info-solid: var(--flavor-orange-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-orange-regular-7); --surface-1: var(--flavor-orange-regular-6); --surface-2: var(--flavor-orange-regular-5); --surface-3: var(--flavor-orange-regular-5); --surface-tint: var(--flavor-orange-regular-8); --text-primary: var(--flavor-orange-regular-12); --text-secondary: var(--flavor-orange-regular-12); --text-tertiary: var(--flavor-orange-regular-12); --text-disabled: var(--flavor-orange-regular-10); --border-subtle: var(--flavor-orange-regular-8); --border-default: var(--flavor-orange-regular-9); --border-strong: var(--flavor-orange-regular-11); --border-interactive: var(--flavor-orange-regular-11); --accent-subtle: var(--flavor-orange-regular-2); --accent-subtle-hover: var(--flavor-orange-regular-3); --accent-border: var(--flavor-orange-regular-4); --focus-ring: var(--flavor-orange-regular-11); --accent-bg: var(--flavor-orange-regular-11); --accent-bg-hover: var(--flavor-orange-regular-12); --accent-bg-active: var(--flavor-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-12); --text-on-accent-subtle: var(--flavor-orange-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-orange-regular-2); --success-border: var(--flavor-orange-regular-4); --success-text: var(--flavor-orange-regular-12); --success-solid: var(--flavor-orange-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-2); --warning-border: var(--flavor-orange-regular-4); --warning-text: var(--flavor-orange-regular-12); --warning-solid: var(--flavor-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-regular-2); --danger-border: var(--flavor-orange-regular-4); --danger-text: var(--flavor-orange-regular-12); --danger-solid: var(--flavor-orange-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-regular-2); --info-border: var(--flavor-orange-regular-4); --info-text: var(--flavor-orange-regular-12); --info-solid: var(--flavor-orange-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-orange-bold-7); --surface-1: var(--flavor-orange-bold-6); --surface-2: var(--flavor-orange-bold-5); --surface-3: var(--flavor-orange-bold-5); --surface-tint: var(--flavor-orange-bold-8); --text-primary: var(--flavor-orange-bold-12); --text-secondary: var(--flavor-orange-bold-12); --text-tertiary: var(--flavor-orange-bold-12); --text-disabled: var(--flavor-orange-bold-10); --border-subtle: var(--flavor-orange-bold-8); --border-default: var(--flavor-orange-bold-9); --border-strong: var(--flavor-orange-bold-11); --border-interactive: var(--flavor-orange-bold-11); --accent-subtle: var(--flavor-orange-bold-2); --accent-subtle-hover: var(--flavor-orange-bold-3); --accent-border: var(--flavor-orange-bold-4); --focus-ring: var(--flavor-orange-bold-11); --accent-bg: var(--flavor-orange-bold-11); --accent-bg-hover: var(--flavor-orange-bold-12); --accent-bg-active: var(--flavor-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-12); --text-on-accent-subtle: var(--flavor-orange-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-orange-bold-2); --success-border: var(--flavor-orange-bold-4); --success-text: var(--flavor-orange-bold-12); --success-solid: var(--flavor-orange-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-bold-2); --warning-border: var(--flavor-orange-bold-4); --warning-text: var(--flavor-orange-bold-12); --warning-solid: var(--flavor-orange-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-bold-2); --danger-border: var(--flavor-orange-bold-4); --danger-text: var(--flavor-orange-bold-12); --danger-solid: var(--flavor-orange-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-bold-2); --info-border: var(--flavor-orange-bold-4); --info-text: var(--flavor-orange-bold-12); --info-solid: var(--flavor-orange-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-muted-6); --surface-1: var(--flavor-tangerine-muted-5); --surface-2: var(--flavor-tangerine-muted-4); --surface-3: var(--flavor-tangerine-muted-4); --surface-tint: var(--flavor-tangerine-muted-7); --text-primary: var(--flavor-tangerine-muted-12); --text-secondary: var(--flavor-tangerine-muted-12); --text-tertiary: var(--flavor-tangerine-muted-12); --text-disabled: var(--flavor-tangerine-muted-9); --border-subtle: var(--flavor-tangerine-muted-7); --border-default: var(--flavor-tangerine-muted-8); --border-strong: var(--flavor-tangerine-muted-10); --border-interactive: var(--flavor-tangerine-muted-10); --accent-subtle: var(--flavor-tangerine-muted-2); --accent-subtle-hover: var(--flavor-tangerine-muted-3); --accent-border: var(--flavor-tangerine-muted-4); --focus-ring: var(--flavor-tangerine-muted-10); --accent-bg: var(--flavor-tangerine-muted-11); --accent-bg-hover: var(--flavor-tangerine-muted-12); --accent-bg-active: var(--flavor-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-12); --text-on-accent-subtle: var(--flavor-tangerine-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-tangerine-muted-2); --success-border: var(--flavor-tangerine-muted-4); --success-text: var(--flavor-tangerine-muted-12); --success-solid: var(--flavor-tangerine-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-muted-2); --warning-border: var(--flavor-tangerine-muted-4); --warning-text: var(--flavor-tangerine-muted-12); --warning-solid: var(--flavor-tangerine-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-muted-2); --danger-border: var(--flavor-tangerine-muted-4); --danger-text: var(--flavor-tangerine-muted-12); --danger-solid: var(--flavor-tangerine-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-muted-2); --info-border: var(--flavor-tangerine-muted-4); --info-text: var(--flavor-tangerine-muted-12); --info-solid: var(--flavor-tangerine-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-regular-6); --surface-1: var(--flavor-tangerine-regular-5); --surface-2: var(--flavor-tangerine-regular-4); --surface-3: var(--flavor-tangerine-regular-4); --surface-tint: var(--flavor-tangerine-regular-7); --text-primary: var(--flavor-tangerine-regular-12); --text-secondary: var(--flavor-tangerine-regular-12); --text-tertiary: var(--flavor-tangerine-regular-12); --text-disabled: var(--flavor-tangerine-regular-9); --border-subtle: var(--flavor-tangerine-regular-7); --border-default: var(--flavor-tangerine-regular-8); --border-strong: var(--flavor-tangerine-regular-10); --border-interactive: var(--flavor-tangerine-regular-10); --accent-subtle: var(--flavor-tangerine-regular-2); --accent-subtle-hover: var(--flavor-tangerine-regular-3); --accent-border: var(--flavor-tangerine-regular-4); --focus-ring: var(--flavor-tangerine-regular-10); --accent-bg: var(--flavor-tangerine-regular-11); --accent-bg-hover: var(--flavor-tangerine-regular-12); --accent-bg-active: var(--flavor-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-12); --text-on-accent-subtle: var(--flavor-tangerine-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-tangerine-regular-2); --success-border: var(--flavor-tangerine-regular-4); --success-text: var(--flavor-tangerine-regular-12); --success-solid: var(--flavor-tangerine-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-regular-2); --warning-border: var(--flavor-tangerine-regular-4); --warning-text: var(--flavor-tangerine-regular-12); --warning-solid: var(--flavor-tangerine-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-regular-2); --danger-border: var(--flavor-tangerine-regular-4); --danger-text: var(--flavor-tangerine-regular-12); --danger-solid: var(--flavor-tangerine-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-regular-2); --info-border: var(--flavor-tangerine-regular-4); --info-text: var(--flavor-tangerine-regular-12); --info-solid: var(--flavor-tangerine-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-bold-7); --surface-1: var(--flavor-tangerine-bold-6); --surface-2: var(--flavor-tangerine-bold-5); --surface-3: var(--flavor-tangerine-bold-5); --surface-tint: var(--flavor-tangerine-bold-8); --text-primary: var(--flavor-tangerine-bold-12); --text-secondary: var(--flavor-tangerine-bold-12); --text-tertiary: var(--flavor-tangerine-bold-12); --text-disabled: var(--flavor-tangerine-bold-10); --border-subtle: var(--flavor-tangerine-bold-8); --border-default: var(--flavor-tangerine-bold-9); --border-strong: var(--flavor-tangerine-bold-11); --border-interactive: var(--flavor-tangerine-bold-11); --accent-subtle: var(--flavor-tangerine-bold-2); --accent-subtle-hover: var(--flavor-tangerine-bold-3); --accent-border: var(--flavor-tangerine-bold-4); --focus-ring: var(--flavor-tangerine-bold-11); --accent-bg: var(--flavor-tangerine-bold-11); --accent-bg-hover: var(--flavor-tangerine-bold-12); --accent-bg-active: var(--flavor-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-12); --text-on-accent-subtle: var(--flavor-tangerine-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-tangerine-bold-2); --success-border: var(--flavor-tangerine-bold-4); --success-text: var(--flavor-tangerine-bold-12); --success-solid: var(--flavor-tangerine-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-bold-2); --warning-border: var(--flavor-tangerine-bold-4); --warning-text: var(--flavor-tangerine-bold-12); --warning-solid: var(--flavor-tangerine-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-bold-2); --danger-border: var(--flavor-tangerine-bold-4); --danger-text: var(--flavor-tangerine-bold-12); --danger-solid: var(--flavor-tangerine-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-bold-2); --info-border: var(--flavor-tangerine-bold-4); --info-text: var(--flavor-tangerine-bold-12); --info-solid: var(--flavor-tangerine-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-yellow-muted-6); --surface-1: var(--flavor-yellow-muted-5); --surface-2: var(--flavor-yellow-muted-4); --surface-3: var(--flavor-yellow-muted-4); --surface-tint: var(--flavor-yellow-muted-7); --text-primary: var(--flavor-yellow-muted-12); --text-secondary: var(--flavor-yellow-muted-12); --text-tertiary: var(--flavor-yellow-muted-12); --text-disabled: var(--flavor-yellow-muted-9); --border-subtle: var(--flavor-yellow-muted-7); --border-default: var(--flavor-yellow-muted-8); --border-strong: var(--flavor-yellow-muted-10); --border-interactive: var(--flavor-yellow-muted-10); --accent-subtle: var(--flavor-yellow-muted-2); --accent-subtle-hover: var(--flavor-yellow-muted-3); --accent-border: var(--flavor-yellow-muted-4); --focus-ring: var(--flavor-yellow-muted-10); --accent-bg: var(--flavor-yellow-muted-11); --accent-bg-hover: var(--flavor-yellow-muted-12); --accent-bg-active: var(--flavor-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-12); --text-on-accent-subtle: var(--flavor-yellow-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-yellow-muted-2); --success-border: var(--flavor-yellow-muted-4); --success-text: var(--flavor-yellow-muted-12); --success-solid: var(--flavor-yellow-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-muted-2); --warning-border: var(--flavor-yellow-muted-4); --warning-text: var(--flavor-yellow-muted-12); --warning-solid: var(--flavor-yellow-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-muted-2); --danger-border: var(--flavor-yellow-muted-4); --danger-text: var(--flavor-yellow-muted-12); --danger-solid: var(--flavor-yellow-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-muted-2); --info-border: var(--flavor-yellow-muted-4); --info-text: var(--flavor-yellow-muted-12); --info-solid: var(--flavor-yellow-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-yellow-regular-6); --surface-1: var(--flavor-yellow-regular-5); --surface-2: var(--flavor-yellow-regular-4); --surface-3: var(--flavor-yellow-regular-4); --surface-tint: var(--flavor-yellow-regular-7); --text-primary: var(--flavor-yellow-regular-12); --text-secondary: var(--flavor-yellow-regular-12); --text-tertiary: var(--flavor-yellow-regular-12); --text-disabled: var(--flavor-yellow-regular-9); --border-subtle: var(--flavor-yellow-regular-7); --border-default: var(--flavor-yellow-regular-8); --border-strong: var(--flavor-yellow-regular-10); --border-interactive: var(--flavor-yellow-regular-10); --accent-subtle: var(--flavor-yellow-regular-2); --accent-subtle-hover: var(--flavor-yellow-regular-3); --accent-border: var(--flavor-yellow-regular-4); --focus-ring: var(--flavor-yellow-regular-10); --accent-bg: var(--flavor-yellow-regular-11); --accent-bg-hover: var(--flavor-yellow-regular-12); --accent-bg-active: var(--flavor-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-12); --text-on-accent-subtle: var(--flavor-yellow-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-yellow-regular-2); --success-border: var(--flavor-yellow-regular-4); --success-text: var(--flavor-yellow-regular-12); --success-solid: var(--flavor-yellow-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-regular-2); --warning-border: var(--flavor-yellow-regular-4); --warning-text: var(--flavor-yellow-regular-12); --warning-solid: var(--flavor-yellow-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-regular-2); --danger-border: var(--flavor-yellow-regular-4); --danger-text: var(--flavor-yellow-regular-12); --danger-solid: var(--flavor-yellow-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-regular-2); --info-border: var(--flavor-yellow-regular-4); --info-text: var(--flavor-yellow-regular-12); --info-solid: var(--flavor-yellow-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-yellow-bold-5); --surface-1: var(--flavor-yellow-bold-4); --surface-2: var(--flavor-yellow-bold-3); --surface-3: var(--flavor-yellow-bold-3); --surface-tint: var(--flavor-yellow-bold-6); --text-primary: var(--flavor-yellow-bold-12); --text-secondary: var(--flavor-yellow-bold-12); --text-tertiary: var(--flavor-yellow-bold-12); --text-disabled: var(--flavor-yellow-bold-8); --border-subtle: var(--flavor-yellow-bold-6); --border-default: var(--flavor-yellow-bold-7); --border-strong: var(--flavor-yellow-bold-10); --border-interactive: var(--flavor-yellow-bold-10); --accent-subtle: var(--flavor-yellow-bold-2); --accent-subtle-hover: var(--flavor-yellow-bold-3); --accent-border: var(--flavor-yellow-bold-4); --focus-ring: var(--flavor-yellow-bold-10); --accent-bg: var(--flavor-yellow-bold-11); --accent-bg-hover: var(--flavor-yellow-bold-12); --accent-bg-active: var(--flavor-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-12); --text-on-accent-subtle: var(--flavor-yellow-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-yellow-bold-2); --success-border: var(--flavor-yellow-bold-4); --success-text: var(--flavor-yellow-bold-12); --success-solid: var(--flavor-yellow-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-bold-2); --warning-border: var(--flavor-yellow-bold-4); --warning-text: var(--flavor-yellow-bold-12); --warning-solid: var(--flavor-yellow-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-bold-2); --danger-border: var(--flavor-yellow-bold-4); --danger-text: var(--flavor-yellow-bold-12); --danger-solid: var(--flavor-yellow-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-bold-2); --info-border: var(--flavor-yellow-bold-4); --info-text: var(--flavor-yellow-bold-12); --info-solid: var(--flavor-yellow-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-lime-muted-6); --surface-1: var(--flavor-lime-muted-5); --surface-2: var(--flavor-lime-muted-4); --surface-3: var(--flavor-lime-muted-4); --surface-tint: var(--flavor-lime-muted-7); --text-primary: var(--flavor-lime-muted-12); --text-secondary: var(--flavor-lime-muted-12); --text-tertiary: var(--flavor-lime-muted-12); --text-disabled: var(--flavor-lime-muted-9); --border-subtle: var(--flavor-lime-muted-7); --border-default: var(--flavor-lime-muted-8); --border-strong: var(--flavor-lime-muted-10); --border-interactive: var(--flavor-lime-muted-10); --accent-subtle: var(--flavor-lime-muted-2); --accent-subtle-hover: var(--flavor-lime-muted-3); --accent-border: var(--flavor-lime-muted-4); --focus-ring: var(--flavor-lime-muted-10); --accent-bg: var(--flavor-lime-muted-11); --accent-bg-hover: var(--flavor-lime-muted-12); --accent-bg-active: var(--flavor-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-12); --text-on-accent-subtle: var(--flavor-lime-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-lime-muted-2); --success-border: var(--flavor-lime-muted-4); --success-text: var(--flavor-lime-muted-12); --success-solid: var(--flavor-lime-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-muted-2); --warning-border: var(--flavor-lime-muted-4); --warning-text: var(--flavor-lime-muted-12); --warning-solid: var(--flavor-lime-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-muted-2); --danger-border: var(--flavor-lime-muted-4); --danger-text: var(--flavor-lime-muted-12); --danger-solid: var(--flavor-lime-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-muted-2); --info-border: var(--flavor-lime-muted-4); --info-text: var(--flavor-lime-muted-12); --info-solid: var(--flavor-lime-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-lime-regular-6); --surface-1: var(--flavor-lime-regular-5); --surface-2: var(--flavor-lime-regular-4); --surface-3: var(--flavor-lime-regular-4); --surface-tint: var(--flavor-lime-regular-7); --text-primary: var(--flavor-lime-regular-12); --text-secondary: var(--flavor-lime-regular-12); --text-tertiary: var(--flavor-lime-regular-12); --text-disabled: var(--flavor-lime-regular-9); --border-subtle: var(--flavor-lime-regular-7); --border-default: var(--flavor-lime-regular-8); --border-strong: var(--flavor-lime-regular-10); --border-interactive: var(--flavor-lime-regular-10); --accent-subtle: var(--flavor-lime-regular-2); --accent-subtle-hover: var(--flavor-lime-regular-3); --accent-border: var(--flavor-lime-regular-4); --focus-ring: var(--flavor-lime-regular-10); --accent-bg: var(--flavor-lime-regular-11); --accent-bg-hover: var(--flavor-lime-regular-12); --accent-bg-active: var(--flavor-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-12); --text-on-accent-subtle: var(--flavor-lime-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-lime-regular-2); --success-border: var(--flavor-lime-regular-4); --success-text: var(--flavor-lime-regular-12); --success-solid: var(--flavor-lime-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-regular-2); --warning-border: var(--flavor-lime-regular-4); --warning-text: var(--flavor-lime-regular-12); --warning-solid: var(--flavor-lime-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-regular-2); --danger-border: var(--flavor-lime-regular-4); --danger-text: var(--flavor-lime-regular-12); --danger-solid: var(--flavor-lime-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-regular-2); --info-border: var(--flavor-lime-regular-4); --info-text: var(--flavor-lime-regular-12); --info-solid: var(--flavor-lime-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-lime-bold-5); --surface-1: var(--flavor-lime-bold-4); --surface-2: var(--flavor-lime-bold-3); --surface-3: var(--flavor-lime-bold-3); --surface-tint: var(--flavor-lime-bold-6); --text-primary: var(--flavor-lime-bold-12); --text-secondary: var(--flavor-lime-bold-12); --text-tertiary: var(--flavor-lime-bold-12); --text-disabled: var(--flavor-lime-bold-8); --border-subtle: var(--flavor-lime-bold-6); --border-default: var(--flavor-lime-bold-7); --border-strong: var(--flavor-lime-bold-10); --border-interactive: var(--flavor-lime-bold-10); --accent-subtle: var(--flavor-lime-bold-2); --accent-subtle-hover: var(--flavor-lime-bold-3); --accent-border: var(--flavor-lime-bold-4); --focus-ring: var(--flavor-lime-bold-10); --accent-bg: var(--flavor-lime-bold-11); --accent-bg-hover: var(--flavor-lime-bold-12); --accent-bg-active: var(--flavor-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-12); --text-on-accent-subtle: var(--flavor-lime-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-lime-bold-2); --success-border: var(--flavor-lime-bold-4); --success-text: var(--flavor-lime-bold-12); --success-solid: var(--flavor-lime-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-bold-2); --warning-border: var(--flavor-lime-bold-4); --warning-text: var(--flavor-lime-bold-12); --warning-solid: var(--flavor-lime-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-bold-2); --danger-border: var(--flavor-lime-bold-4); --danger-text: var(--flavor-lime-bold-12); --danger-solid: var(--flavor-lime-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-bold-2); --info-border: var(--flavor-lime-bold-4); --info-text: var(--flavor-lime-bold-12); --info-solid: var(--flavor-lime-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-green-muted-6); --surface-1: var(--flavor-green-muted-5); --surface-2: var(--flavor-green-muted-4); --surface-3: var(--flavor-green-muted-4); --surface-tint: var(--flavor-green-muted-7); --text-primary: var(--flavor-green-muted-12); --text-secondary: var(--flavor-green-muted-12); --text-tertiary: var(--flavor-green-muted-12); --text-disabled: var(--flavor-green-muted-9); --border-subtle: var(--flavor-green-muted-7); --border-default: var(--flavor-green-muted-8); --border-strong: var(--flavor-green-muted-10); --border-interactive: var(--flavor-green-muted-10); --accent-subtle: var(--flavor-green-muted-2); --accent-subtle-hover: var(--flavor-green-muted-3); --accent-border: var(--flavor-green-muted-4); --focus-ring: var(--flavor-green-muted-10); --accent-bg: var(--flavor-green-muted-11); --accent-bg-hover: var(--flavor-green-muted-12); --accent-bg-active: var(--flavor-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-12); --text-on-accent-subtle: var(--flavor-green-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-green-muted-2); --success-border: var(--flavor-green-muted-4); --success-text: var(--flavor-green-muted-12); --success-solid: var(--flavor-green-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-muted-2); --warning-border: var(--flavor-green-muted-4); --warning-text: var(--flavor-green-muted-12); --warning-solid: var(--flavor-green-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-muted-2); --danger-border: var(--flavor-green-muted-4); --danger-text: var(--flavor-green-muted-12); --danger-solid: var(--flavor-green-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-muted-2); --info-border: var(--flavor-green-muted-4); --info-text: var(--flavor-green-muted-12); --info-solid: var(--flavor-green-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-green-regular-6); --surface-1: var(--flavor-green-regular-5); --surface-2: var(--flavor-green-regular-4); --surface-3: var(--flavor-green-regular-4); --surface-tint: var(--flavor-green-regular-7); --text-primary: var(--flavor-green-regular-12); --text-secondary: var(--flavor-green-regular-12); --text-tertiary: var(--flavor-green-regular-12); --text-disabled: var(--flavor-green-regular-9); --border-subtle: var(--flavor-green-regular-7); --border-default: var(--flavor-green-regular-8); --border-strong: var(--flavor-green-regular-10); --border-interactive: var(--flavor-green-regular-10); --accent-subtle: var(--flavor-green-regular-2); --accent-subtle-hover: var(--flavor-green-regular-3); --accent-border: var(--flavor-green-regular-4); --focus-ring: var(--flavor-green-regular-10); --accent-bg: var(--flavor-green-regular-11); --accent-bg-hover: var(--flavor-green-regular-12); --accent-bg-active: var(--flavor-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-12); --text-on-accent-subtle: var(--flavor-green-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-green-regular-2); --success-border: var(--flavor-green-regular-4); --success-text: var(--flavor-green-regular-12); --success-solid: var(--flavor-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-regular-2); --warning-border: var(--flavor-green-regular-4); --warning-text: var(--flavor-green-regular-12); --warning-solid: var(--flavor-green-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-regular-2); --danger-border: var(--flavor-green-regular-4); --danger-text: var(--flavor-green-regular-12); --danger-solid: var(--flavor-green-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-regular-2); --info-border: var(--flavor-green-regular-4); --info-text: var(--flavor-green-regular-12); --info-solid: var(--flavor-green-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-green-bold-6); --surface-1: var(--flavor-green-bold-5); --surface-2: var(--flavor-green-bold-4); --surface-3: var(--flavor-green-bold-4); --surface-tint: var(--flavor-green-bold-7); --text-primary: var(--flavor-green-bold-12); --text-secondary: var(--flavor-green-bold-12); --text-tertiary: var(--flavor-green-bold-12); --text-disabled: var(--flavor-green-bold-9); --border-subtle: var(--flavor-green-bold-7); --border-default: var(--flavor-green-bold-8); --border-strong: var(--flavor-green-bold-10); --border-interactive: var(--flavor-green-bold-10); --accent-subtle: var(--flavor-green-bold-2); --accent-subtle-hover: var(--flavor-green-bold-3); --accent-border: var(--flavor-green-bold-4); --focus-ring: var(--flavor-green-bold-10); --accent-bg: var(--flavor-green-bold-11); --accent-bg-hover: var(--flavor-green-bold-12); --accent-bg-active: var(--flavor-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-12); --text-on-accent-subtle: var(--flavor-green-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-green-bold-2); --success-border: var(--flavor-green-bold-4); --success-text: var(--flavor-green-bold-12); --success-solid: var(--flavor-green-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-bold-2); --warning-border: var(--flavor-green-bold-4); --warning-text: var(--flavor-green-bold-12); --warning-solid: var(--flavor-green-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-bold-2); --danger-border: var(--flavor-green-bold-4); --danger-text: var(--flavor-green-bold-12); --danger-solid: var(--flavor-green-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-bold-2); --info-border: var(--flavor-green-bold-4); --info-text: var(--flavor-green-bold-12); --info-solid: var(--flavor-green-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-teal-muted-6); --surface-1: var(--flavor-teal-muted-5); --surface-2: var(--flavor-teal-muted-4); --surface-3: var(--flavor-teal-muted-4); --surface-tint: var(--flavor-teal-muted-7); --text-primary: var(--flavor-teal-muted-12); --text-secondary: var(--flavor-teal-muted-12); --text-tertiary: var(--flavor-teal-muted-12); --text-disabled: var(--flavor-teal-muted-9); --border-subtle: var(--flavor-teal-muted-7); --border-default: var(--flavor-teal-muted-8); --border-strong: var(--flavor-teal-muted-10); --border-interactive: var(--flavor-teal-muted-10); --accent-subtle: var(--flavor-teal-muted-2); --accent-subtle-hover: var(--flavor-teal-muted-3); --accent-border: var(--flavor-teal-muted-4); --focus-ring: var(--flavor-teal-muted-10); --accent-bg: var(--flavor-teal-muted-11); --accent-bg-hover: var(--flavor-teal-muted-12); --accent-bg-active: var(--flavor-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-12); --text-on-accent-subtle: var(--flavor-teal-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-teal-muted-2); --success-border: var(--flavor-teal-muted-4); --success-text: var(--flavor-teal-muted-12); --success-solid: var(--flavor-teal-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-muted-2); --warning-border: var(--flavor-teal-muted-4); --warning-text: var(--flavor-teal-muted-12); --warning-solid: var(--flavor-teal-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-muted-2); --danger-border: var(--flavor-teal-muted-4); --danger-text: var(--flavor-teal-muted-12); --danger-solid: var(--flavor-teal-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-muted-2); --info-border: var(--flavor-teal-muted-4); --info-text: var(--flavor-teal-muted-12); --info-solid: var(--flavor-teal-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-teal-regular-6); --surface-1: var(--flavor-teal-regular-5); --surface-2: var(--flavor-teal-regular-4); --surface-3: var(--flavor-teal-regular-4); --surface-tint: var(--flavor-teal-regular-7); --text-primary: var(--flavor-teal-regular-12); --text-secondary: var(--flavor-teal-regular-12); --text-tertiary: var(--flavor-teal-regular-12); --text-disabled: var(--flavor-teal-regular-9); --border-subtle: var(--flavor-teal-regular-7); --border-default: var(--flavor-teal-regular-8); --border-strong: var(--flavor-teal-regular-10); --border-interactive: var(--flavor-teal-regular-10); --accent-subtle: var(--flavor-teal-regular-2); --accent-subtle-hover: var(--flavor-teal-regular-3); --accent-border: var(--flavor-teal-regular-4); --focus-ring: var(--flavor-teal-regular-10); --accent-bg: var(--flavor-teal-regular-11); --accent-bg-hover: var(--flavor-teal-regular-12); --accent-bg-active: var(--flavor-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-12); --text-on-accent-subtle: var(--flavor-teal-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-teal-regular-2); --success-border: var(--flavor-teal-regular-4); --success-text: var(--flavor-teal-regular-12); --success-solid: var(--flavor-teal-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-regular-2); --warning-border: var(--flavor-teal-regular-4); --warning-text: var(--flavor-teal-regular-12); --warning-solid: var(--flavor-teal-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-regular-2); --danger-border: var(--flavor-teal-regular-4); --danger-text: var(--flavor-teal-regular-12); --danger-solid: var(--flavor-teal-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-regular-2); --info-border: var(--flavor-teal-regular-4); --info-text: var(--flavor-teal-regular-12); --info-solid: var(--flavor-teal-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-teal-bold-5); --surface-1: var(--flavor-teal-bold-4); --surface-2: var(--flavor-teal-bold-3); --surface-3: var(--flavor-teal-bold-3); --surface-tint: var(--flavor-teal-bold-6); --text-primary: var(--flavor-teal-bold-12); --text-secondary: var(--flavor-teal-bold-12); --text-tertiary: var(--flavor-teal-bold-12); --text-disabled: var(--flavor-teal-bold-8); --border-subtle: var(--flavor-teal-bold-6); --border-default: var(--flavor-teal-bold-7); --border-strong: var(--flavor-teal-bold-10); --border-interactive: var(--flavor-teal-bold-10); --accent-subtle: var(--flavor-teal-bold-2); --accent-subtle-hover: var(--flavor-teal-bold-3); --accent-border: var(--flavor-teal-bold-4); --focus-ring: var(--flavor-teal-bold-10); --accent-bg: var(--flavor-teal-bold-11); --accent-bg-hover: var(--flavor-teal-bold-12); --accent-bg-active: var(--flavor-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-12); --text-on-accent-subtle: var(--flavor-teal-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-teal-bold-2); --success-border: var(--flavor-teal-bold-4); --success-text: var(--flavor-teal-bold-12); --success-solid: var(--flavor-teal-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-bold-2); --warning-border: var(--flavor-teal-bold-4); --warning-text: var(--flavor-teal-bold-12); --warning-solid: var(--flavor-teal-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-bold-2); --danger-border: var(--flavor-teal-bold-4); --danger-text: var(--flavor-teal-bold-12); --danger-solid: var(--flavor-teal-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-bold-2); --info-border: var(--flavor-teal-bold-4); --info-text: var(--flavor-teal-bold-12); --info-solid: var(--flavor-teal-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-cyan-muted-6); --surface-1: var(--flavor-cyan-muted-5); --surface-2: var(--flavor-cyan-muted-4); --surface-3: var(--flavor-cyan-muted-4); --surface-tint: var(--flavor-cyan-muted-7); --text-primary: var(--flavor-cyan-muted-12); --text-secondary: var(--flavor-cyan-muted-12); --text-tertiary: var(--flavor-cyan-muted-12); --text-disabled: var(--flavor-cyan-muted-9); --border-subtle: var(--flavor-cyan-muted-7); --border-default: var(--flavor-cyan-muted-8); --border-strong: var(--flavor-cyan-muted-10); --border-interactive: var(--flavor-cyan-muted-10); --accent-subtle: var(--flavor-cyan-muted-2); --accent-subtle-hover: var(--flavor-cyan-muted-3); --accent-border: var(--flavor-cyan-muted-4); --focus-ring: var(--flavor-cyan-muted-10); --accent-bg: var(--flavor-cyan-muted-11); --accent-bg-hover: var(--flavor-cyan-muted-12); --accent-bg-active: var(--flavor-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-12); --text-on-accent-subtle: var(--flavor-cyan-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-cyan-muted-2); --success-border: var(--flavor-cyan-muted-4); --success-text: var(--flavor-cyan-muted-12); --success-solid: var(--flavor-cyan-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-muted-2); --warning-border: var(--flavor-cyan-muted-4); --warning-text: var(--flavor-cyan-muted-12); --warning-solid: var(--flavor-cyan-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-muted-2); --danger-border: var(--flavor-cyan-muted-4); --danger-text: var(--flavor-cyan-muted-12); --danger-solid: var(--flavor-cyan-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-muted-2); --info-border: var(--flavor-cyan-muted-4); --info-text: var(--flavor-cyan-muted-12); --info-solid: var(--flavor-cyan-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-cyan-regular-7); --surface-1: var(--flavor-cyan-regular-6); --surface-2: var(--flavor-cyan-regular-5); --surface-3: var(--flavor-cyan-regular-5); --surface-tint: var(--flavor-cyan-regular-8); --text-primary: var(--flavor-cyan-regular-12); --text-secondary: var(--flavor-cyan-regular-12); --text-tertiary: var(--flavor-cyan-regular-12); --text-disabled: var(--flavor-cyan-regular-10); --border-subtle: var(--flavor-cyan-regular-8); --border-default: var(--flavor-cyan-regular-9); --border-strong: var(--flavor-cyan-regular-11); --border-interactive: var(--flavor-cyan-regular-11); --accent-subtle: var(--flavor-cyan-regular-2); --accent-subtle-hover: var(--flavor-cyan-regular-3); --accent-border: var(--flavor-cyan-regular-4); --focus-ring: var(--flavor-cyan-regular-11); --accent-bg: var(--flavor-cyan-regular-11); --accent-bg-hover: var(--flavor-cyan-regular-12); --accent-bg-active: var(--flavor-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-12); --text-on-accent-subtle: var(--flavor-cyan-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-cyan-regular-2); --success-border: var(--flavor-cyan-regular-4); --success-text: var(--flavor-cyan-regular-12); --success-solid: var(--flavor-cyan-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-regular-2); --warning-border: var(--flavor-cyan-regular-4); --warning-text: var(--flavor-cyan-regular-12); --warning-solid: var(--flavor-cyan-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-regular-2); --danger-border: var(--flavor-cyan-regular-4); --danger-text: var(--flavor-cyan-regular-12); --danger-solid: var(--flavor-cyan-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-regular-2); --info-border: var(--flavor-cyan-regular-4); --info-text: var(--flavor-cyan-regular-12); --info-solid: var(--flavor-cyan-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-cyan-bold-7); --surface-1: var(--flavor-cyan-bold-6); --surface-2: var(--flavor-cyan-bold-5); --surface-3: var(--flavor-cyan-bold-5); --surface-tint: var(--flavor-cyan-bold-8); --text-primary: var(--flavor-cyan-bold-12); --text-secondary: var(--flavor-cyan-bold-12); --text-tertiary: var(--flavor-cyan-bold-12); --text-disabled: var(--flavor-cyan-bold-10); --border-subtle: var(--flavor-cyan-bold-8); --border-default: var(--flavor-cyan-bold-9); --border-strong: var(--flavor-cyan-bold-11); --border-interactive: var(--flavor-cyan-bold-11); --accent-subtle: var(--flavor-cyan-bold-2); --accent-subtle-hover: var(--flavor-cyan-bold-3); --accent-border: var(--flavor-cyan-bold-4); --focus-ring: var(--flavor-cyan-bold-11); --accent-bg: var(--flavor-cyan-bold-11); --accent-bg-hover: var(--flavor-cyan-bold-12); --accent-bg-active: var(--flavor-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-12); --text-on-accent-subtle: var(--flavor-cyan-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-cyan-bold-2); --success-border: var(--flavor-cyan-bold-4); --success-text: var(--flavor-cyan-bold-12); --success-solid: var(--flavor-cyan-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-bold-2); --warning-border: var(--flavor-cyan-bold-4); --warning-text: var(--flavor-cyan-bold-12); --warning-solid: var(--flavor-cyan-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-bold-2); --danger-border: var(--flavor-cyan-bold-4); --danger-text: var(--flavor-cyan-bold-12); --danger-solid: var(--flavor-cyan-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-bold-2); --info-border: var(--flavor-cyan-bold-4); --info-text: var(--flavor-cyan-bold-12); --info-solid: var(--flavor-cyan-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-6); --surface-1: var(--flavor-blue-muted-5); --surface-2: var(--flavor-blue-muted-4); --surface-3: var(--flavor-blue-muted-4); --surface-tint: var(--flavor-blue-muted-7); --text-primary: var(--flavor-blue-muted-12); --text-secondary: var(--flavor-blue-muted-12); --text-tertiary: var(--flavor-blue-muted-12); --text-disabled: var(--flavor-blue-muted-9); --border-subtle: var(--flavor-blue-muted-7); --border-default: var(--flavor-blue-muted-8); --border-strong: var(--flavor-blue-muted-10); --border-interactive: var(--flavor-blue-muted-10); --accent-subtle: var(--flavor-blue-muted-2); --accent-subtle-hover: var(--flavor-blue-muted-3); --accent-border: var(--flavor-blue-muted-4); --focus-ring: var(--flavor-blue-muted-10); --accent-bg: var(--flavor-blue-muted-11); --accent-bg-hover: var(--flavor-blue-muted-12); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-12); --text-on-accent-subtle: var(--flavor-blue-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-blue-muted-2); --success-border: var(--flavor-blue-muted-4); --success-text: var(--flavor-blue-muted-12); --success-solid: var(--flavor-blue-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-2); --warning-border: var(--flavor-blue-muted-4); --warning-text: var(--flavor-blue-muted-12); --warning-solid: var(--flavor-blue-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-2); --danger-border: var(--flavor-blue-muted-4); --danger-text: var(--flavor-blue-muted-12); --danger-solid: var(--flavor-blue-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-2); --info-border: var(--flavor-blue-muted-4); --info-text: var(--flavor-blue-muted-12); --info-solid: var(--flavor-blue-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-blue-regular-8); --surface-1: var(--flavor-blue-regular-7); --surface-2: var(--flavor-blue-regular-6); --surface-3: var(--flavor-blue-regular-6); --surface-tint: var(--flavor-blue-regular-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-blue-regular-11); --border-subtle: var(--flavor-blue-regular-9); --border-default: var(--flavor-blue-regular-10); --border-strong: var(--flavor-blue-regular-11); --border-interactive: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-2); --accent-subtle-hover: var(--flavor-blue-regular-3); --accent-border: var(--flavor-blue-regular-4); --focus-ring: var(--flavor-blue-regular-11); --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-blue-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-blue-regular-2); --success-border: var(--flavor-blue-regular-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-blue-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-2); --warning-border: var(--flavor-blue-regular-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-blue-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-2); --danger-border: var(--flavor-blue-regular-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-blue-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-2); --info-border: var(--flavor-blue-regular-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-blue-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-8); --surface-1: var(--flavor-blue-bold-7); --surface-2: var(--flavor-blue-bold-6); --surface-3: var(--flavor-blue-bold-6); --surface-tint: var(--flavor-blue-bold-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-blue-bold-11); --border-subtle: var(--flavor-blue-bold-9); --border-default: var(--flavor-blue-bold-10); --border-strong: var(--flavor-blue-bold-11); --border-interactive: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-2); --accent-subtle-hover: var(--flavor-blue-bold-3); --accent-border: var(--flavor-blue-bold-4); --focus-ring: var(--flavor-blue-bold-11); --accent-bg: var(--flavor-blue-bold-11); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-blue-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-blue-bold-2); --success-border: var(--flavor-blue-bold-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-blue-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-2); --warning-border: var(--flavor-blue-bold-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-blue-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-2); --danger-border: var(--flavor-blue-bold-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-blue-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-2); --info-border: var(--flavor-blue-bold-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-blue-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-violet-muted-6); --surface-1: var(--flavor-violet-muted-5); --surface-2: var(--flavor-violet-muted-4); --surface-3: var(--flavor-violet-muted-4); --surface-tint: var(--flavor-violet-muted-7); --text-primary: var(--flavor-violet-muted-12); --text-secondary: var(--flavor-violet-muted-12); --text-tertiary: var(--flavor-violet-muted-12); --text-disabled: var(--flavor-violet-muted-9); --border-subtle: var(--flavor-violet-muted-7); --border-default: var(--flavor-violet-muted-8); --border-strong: var(--flavor-violet-muted-10); --border-interactive: var(--flavor-violet-muted-10); --accent-subtle: var(--flavor-violet-muted-2); --accent-subtle-hover: var(--flavor-violet-muted-3); --accent-border: var(--flavor-violet-muted-4); --focus-ring: var(--flavor-violet-muted-10); --accent-bg: var(--flavor-violet-muted-11); --accent-bg-hover: var(--flavor-violet-muted-12); --accent-bg-active: var(--flavor-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-12); --text-on-accent-subtle: var(--flavor-violet-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-violet-muted-2); --success-border: var(--flavor-violet-muted-4); --success-text: var(--flavor-violet-muted-12); --success-solid: var(--flavor-violet-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-muted-2); --warning-border: var(--flavor-violet-muted-4); --warning-text: var(--flavor-violet-muted-12); --warning-solid: var(--flavor-violet-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-muted-2); --danger-border: var(--flavor-violet-muted-4); --danger-text: var(--flavor-violet-muted-12); --danger-solid: var(--flavor-violet-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-muted-2); --info-border: var(--flavor-violet-muted-4); --info-text: var(--flavor-violet-muted-12); --info-solid: var(--flavor-violet-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-violet-regular-7); --surface-1: var(--flavor-violet-regular-6); --surface-2: var(--flavor-violet-regular-5); --surface-3: var(--flavor-violet-regular-5); --surface-tint: var(--flavor-violet-regular-8); --text-primary: var(--flavor-violet-regular-12); --text-secondary: var(--flavor-violet-regular-12); --text-tertiary: var(--flavor-violet-regular-12); --text-disabled: var(--flavor-violet-regular-10); --border-subtle: var(--flavor-violet-regular-8); --border-default: var(--flavor-violet-regular-9); --border-strong: var(--flavor-violet-regular-11); --border-interactive: var(--flavor-violet-regular-11); --accent-subtle: var(--flavor-violet-regular-2); --accent-subtle-hover: var(--flavor-violet-regular-3); --accent-border: var(--flavor-violet-regular-4); --focus-ring: var(--flavor-violet-regular-11); --accent-bg: var(--flavor-violet-regular-11); --accent-bg-hover: var(--flavor-violet-regular-12); --accent-bg-active: var(--flavor-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-12); --text-on-accent-subtle: var(--flavor-violet-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-violet-regular-2); --success-border: var(--flavor-violet-regular-4); --success-text: var(--flavor-violet-regular-12); --success-solid: var(--flavor-violet-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-regular-2); --warning-border: var(--flavor-violet-regular-4); --warning-text: var(--flavor-violet-regular-12); --warning-solid: var(--flavor-violet-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-regular-2); --danger-border: var(--flavor-violet-regular-4); --danger-text: var(--flavor-violet-regular-12); --danger-solid: var(--flavor-violet-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-regular-2); --info-border: var(--flavor-violet-regular-4); --info-text: var(--flavor-violet-regular-12); --info-solid: var(--flavor-violet-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-violet-bold-7); --surface-1: var(--flavor-violet-bold-6); --surface-2: var(--flavor-violet-bold-5); --surface-3: var(--flavor-violet-bold-5); --surface-tint: var(--flavor-violet-bold-8); --text-primary: var(--flavor-violet-bold-12); --text-secondary: var(--flavor-violet-bold-12); --text-tertiary: var(--flavor-violet-bold-12); --text-disabled: var(--flavor-violet-bold-10); --border-subtle: var(--flavor-violet-bold-8); --border-default: var(--flavor-violet-bold-9); --border-strong: var(--flavor-violet-bold-11); --border-interactive: var(--flavor-violet-bold-11); --accent-subtle: var(--flavor-violet-bold-2); --accent-subtle-hover: var(--flavor-violet-bold-3); --accent-border: var(--flavor-violet-bold-4); --focus-ring: var(--flavor-violet-bold-11); --accent-bg: var(--flavor-violet-bold-11); --accent-bg-hover: var(--flavor-violet-bold-12); --accent-bg-active: var(--flavor-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-12); --text-on-accent-subtle: var(--flavor-violet-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-violet-bold-2); --success-border: var(--flavor-violet-bold-4); --success-text: var(--flavor-violet-bold-12); --success-solid: var(--flavor-violet-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-bold-2); --warning-border: var(--flavor-violet-bold-4); --warning-text: var(--flavor-violet-bold-12); --warning-solid: var(--flavor-violet-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-bold-2); --danger-border: var(--flavor-violet-bold-4); --danger-text: var(--flavor-violet-bold-12); --danger-solid: var(--flavor-violet-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-bold-2); --info-border: var(--flavor-violet-bold-4); --info-text: var(--flavor-violet-bold-12); --info-solid: var(--flavor-violet-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-purple-muted-6); --surface-1: var(--flavor-purple-muted-5); --surface-2: var(--flavor-purple-muted-4); --surface-3: var(--flavor-purple-muted-4); --surface-tint: var(--flavor-purple-muted-7); --text-primary: var(--flavor-purple-muted-12); --text-secondary: var(--flavor-purple-muted-12); --text-tertiary: var(--flavor-purple-muted-12); --text-disabled: var(--flavor-purple-muted-9); --border-subtle: var(--flavor-purple-muted-7); --border-default: var(--flavor-purple-muted-8); --border-strong: var(--flavor-purple-muted-10); --border-interactive: var(--flavor-purple-muted-10); --accent-subtle: var(--flavor-purple-muted-2); --accent-subtle-hover: var(--flavor-purple-muted-3); --accent-border: var(--flavor-purple-muted-4); --focus-ring: var(--flavor-purple-muted-10); --accent-bg: var(--flavor-purple-muted-11); --accent-bg-hover: var(--flavor-purple-muted-12); --accent-bg-active: var(--flavor-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-12); --text-on-accent-subtle: var(--flavor-purple-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-purple-muted-2); --success-border: var(--flavor-purple-muted-4); --success-text: var(--flavor-purple-muted-12); --success-solid: var(--flavor-purple-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-muted-2); --warning-border: var(--flavor-purple-muted-4); --warning-text: var(--flavor-purple-muted-12); --warning-solid: var(--flavor-purple-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-muted-2); --danger-border: var(--flavor-purple-muted-4); --danger-text: var(--flavor-purple-muted-12); --danger-solid: var(--flavor-purple-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-muted-2); --info-border: var(--flavor-purple-muted-4); --info-text: var(--flavor-purple-muted-12); --info-solid: var(--flavor-purple-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-purple-regular-7); --surface-1: var(--flavor-purple-regular-6); --surface-2: var(--flavor-purple-regular-5); --surface-3: var(--flavor-purple-regular-5); --surface-tint: var(--flavor-purple-regular-8); --text-primary: var(--flavor-purple-regular-12); --text-secondary: var(--flavor-purple-regular-12); --text-tertiary: var(--flavor-purple-regular-12); --text-disabled: var(--flavor-purple-regular-10); --border-subtle: var(--flavor-purple-regular-8); --border-default: var(--flavor-purple-regular-9); --border-strong: var(--flavor-purple-regular-11); --border-interactive: var(--flavor-purple-regular-11); --accent-subtle: var(--flavor-purple-regular-2); --accent-subtle-hover: var(--flavor-purple-regular-3); --accent-border: var(--flavor-purple-regular-4); --focus-ring: var(--flavor-purple-regular-11); --accent-bg: var(--flavor-purple-regular-11); --accent-bg-hover: var(--flavor-purple-regular-12); --accent-bg-active: var(--flavor-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-12); --text-on-accent-subtle: var(--flavor-purple-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-purple-regular-2); --success-border: var(--flavor-purple-regular-4); --success-text: var(--flavor-purple-regular-12); --success-solid: var(--flavor-purple-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-regular-2); --warning-border: var(--flavor-purple-regular-4); --warning-text: var(--flavor-purple-regular-12); --warning-solid: var(--flavor-purple-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-regular-2); --danger-border: var(--flavor-purple-regular-4); --danger-text: var(--flavor-purple-regular-12); --danger-solid: var(--flavor-purple-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-regular-2); --info-border: var(--flavor-purple-regular-4); --info-text: var(--flavor-purple-regular-12); --info-solid: var(--flavor-purple-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-purple-bold-7); --surface-1: var(--flavor-purple-bold-6); --surface-2: var(--flavor-purple-bold-5); --surface-3: var(--flavor-purple-bold-5); --surface-tint: var(--flavor-purple-bold-8); --text-primary: var(--flavor-purple-bold-12); --text-secondary: var(--flavor-purple-bold-12); --text-tertiary: var(--flavor-purple-bold-12); --text-disabled: var(--flavor-purple-bold-10); --border-subtle: var(--flavor-purple-bold-8); --border-default: var(--flavor-purple-bold-9); --border-strong: var(--flavor-purple-bold-11); --border-interactive: var(--flavor-purple-bold-11); --accent-subtle: var(--flavor-purple-bold-2); --accent-subtle-hover: var(--flavor-purple-bold-3); --accent-border: var(--flavor-purple-bold-4); --focus-ring: var(--flavor-purple-bold-11); --accent-bg: var(--flavor-purple-bold-11); --accent-bg-hover: var(--flavor-purple-bold-12); --accent-bg-active: var(--flavor-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-12); --text-on-accent-subtle: var(--flavor-purple-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-purple-bold-2); --success-border: var(--flavor-purple-bold-4); --success-text: var(--flavor-purple-bold-12); --success-solid: var(--flavor-purple-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-bold-2); --warning-border: var(--flavor-purple-bold-4); --warning-text: var(--flavor-purple-bold-12); --warning-solid: var(--flavor-purple-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-bold-2); --danger-border: var(--flavor-purple-bold-4); --danger-text: var(--flavor-purple-bold-12); --danger-solid: var(--flavor-purple-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-bold-2); --info-border: var(--flavor-purple-bold-4); --info-text: var(--flavor-purple-bold-12); --info-solid: var(--flavor-purple-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-6); --surface-1: var(--flavor-magenta-muted-5); --surface-2: var(--flavor-magenta-muted-4); --surface-3: var(--flavor-magenta-muted-4); --surface-tint: var(--flavor-magenta-muted-7); --text-primary: var(--flavor-magenta-muted-12); --text-secondary: var(--flavor-magenta-muted-12); --text-tertiary: var(--flavor-magenta-muted-12); --text-disabled: var(--flavor-magenta-muted-9); --border-subtle: var(--flavor-magenta-muted-7); --border-default: var(--flavor-magenta-muted-8); --border-strong: var(--flavor-magenta-muted-10); --border-interactive: var(--flavor-magenta-muted-10); --accent-subtle: var(--flavor-magenta-muted-2); --accent-subtle-hover: var(--flavor-magenta-muted-3); --accent-border: var(--flavor-magenta-muted-4); --focus-ring: var(--flavor-magenta-muted-10); --accent-bg: var(--flavor-magenta-muted-11); --accent-bg-hover: var(--flavor-magenta-muted-12); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-12); --text-on-accent-subtle: var(--flavor-magenta-muted-12); --secondary-bg: var(--flavor-neutral-muted-12); --secondary-bg-hover: var(--flavor-neutral-muted-12); --secondary-bg-active: var(--flavor-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-3); --secondary-subtle-hover: var(--flavor-neutral-muted-4); --secondary-border: var(--flavor-neutral-muted-12); --secondary-text: var(--flavor-neutral-muted-12); --text-on-secondary-subtle: var(--flavor-neutral-muted-12); --success-bg: var(--flavor-magenta-muted-2); --success-border: var(--flavor-magenta-muted-4); --success-text: var(--flavor-magenta-muted-12); --success-solid: var(--flavor-magenta-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-2); --warning-border: var(--flavor-magenta-muted-4); --warning-text: var(--flavor-magenta-muted-12); --warning-solid: var(--flavor-magenta-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-2); --danger-border: var(--flavor-magenta-muted-4); --danger-text: var(--flavor-magenta-muted-12); --danger-solid: var(--flavor-magenta-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-2); --info-border: var(--flavor-magenta-muted-4); --info-text: var(--flavor-magenta-muted-12); --info-solid: var(--flavor-magenta-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-7); --surface-1: var(--flavor-magenta-regular-6); --surface-2: var(--flavor-magenta-regular-5); --surface-3: var(--flavor-magenta-regular-5); --surface-tint: var(--flavor-magenta-regular-8); --text-primary: var(--flavor-magenta-regular-12); --text-secondary: var(--flavor-magenta-regular-12); --text-tertiary: var(--flavor-magenta-regular-12); --text-disabled: var(--flavor-magenta-regular-10); --border-subtle: var(--flavor-magenta-regular-8); --border-default: var(--flavor-magenta-regular-9); --border-strong: var(--flavor-magenta-regular-11); --border-interactive: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-2); --accent-subtle-hover: var(--flavor-magenta-regular-3); --accent-border: var(--flavor-magenta-regular-4); --focus-ring: var(--flavor-magenta-regular-11); --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-12); --text-on-accent-subtle: var(--flavor-magenta-regular-12); --secondary-bg: var(--flavor-neutral-regular-12); --secondary-bg-hover: var(--flavor-neutral-regular-12); --secondary-bg-active: var(--flavor-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-3); --secondary-subtle-hover: var(--flavor-neutral-regular-4); --secondary-border: var(--flavor-neutral-regular-12); --secondary-text: var(--flavor-neutral-regular-12); --text-on-secondary-subtle: var(--flavor-neutral-regular-12); --success-bg: var(--flavor-magenta-regular-2); --success-border: var(--flavor-magenta-regular-4); --success-text: var(--flavor-magenta-regular-12); --success-solid: var(--flavor-magenta-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-2); --warning-border: var(--flavor-magenta-regular-4); --warning-text: var(--flavor-magenta-regular-12); --warning-solid: var(--flavor-magenta-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-2); --danger-border: var(--flavor-magenta-regular-4); --danger-text: var(--flavor-magenta-regular-12); --danger-solid: var(--flavor-magenta-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-2); --info-border: var(--flavor-magenta-regular-4); --info-text: var(--flavor-magenta-regular-12); --info-solid: var(--flavor-magenta-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-7); --surface-1: var(--flavor-magenta-bold-6); --surface-2: var(--flavor-magenta-bold-5); --surface-3: var(--flavor-magenta-bold-5); --surface-tint: var(--flavor-magenta-bold-8); --text-primary: var(--flavor-magenta-bold-12); --text-secondary: var(--flavor-magenta-bold-12); --text-tertiary: var(--flavor-magenta-bold-12); --text-disabled: var(--flavor-magenta-bold-10); --border-subtle: var(--flavor-magenta-bold-8); --border-default: var(--flavor-magenta-bold-9); --border-strong: var(--flavor-magenta-bold-11); --border-interactive: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-2); --accent-subtle-hover: var(--flavor-magenta-bold-3); --accent-border: var(--flavor-magenta-bold-4); --focus-ring: var(--flavor-magenta-bold-11); --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-12); --text-on-accent-subtle: var(--flavor-magenta-bold-12); --secondary-bg: var(--flavor-neutral-bold-12); --secondary-bg-hover: var(--flavor-neutral-bold-12); --secondary-bg-active: var(--flavor-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-3); --secondary-subtle-hover: var(--flavor-neutral-bold-4); --secondary-border: var(--flavor-neutral-bold-12); --secondary-text: var(--flavor-neutral-bold-12); --text-on-secondary-subtle: var(--flavor-neutral-bold-12); --success-bg: var(--flavor-magenta-bold-2); --success-border: var(--flavor-magenta-bold-4); --success-text: var(--flavor-magenta-bold-12); --success-solid: var(--flavor-magenta-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-2); --warning-border: var(--flavor-magenta-bold-4); --warning-text: var(--flavor-magenta-bold-12); --warning-solid: var(--flavor-magenta-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-2); --danger-border: var(--flavor-magenta-bold-4); --danger-text: var(--flavor-magenta-bold-12); --danger-solid: var(--flavor-magenta-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-2); --info-border: var(--flavor-magenta-bold-4); --info-text: var(--flavor-magenta-bold-12); --info-solid: var(--flavor-magenta-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-6); --surface-1: var(--flavor-blue-muted-5); --surface-2: var(--flavor-blue-muted-4); --surface-3: var(--flavor-blue-muted-4); --surface-tint: var(--flavor-blue-muted-7); --text-primary: var(--flavor-blue-muted-12); --text-secondary: var(--flavor-blue-muted-12); --text-tertiary: var(--flavor-blue-muted-12); --text-disabled: var(--flavor-blue-muted-9); --border-subtle: var(--flavor-blue-muted-7); --border-default: var(--flavor-blue-muted-8); --border-strong: var(--flavor-blue-muted-10); --border-interactive: var(--flavor-blue-muted-10); --accent-subtle: var(--flavor-blue-muted-2); --accent-subtle-hover: var(--flavor-blue-muted-3); --accent-border: var(--flavor-orange-muted-4); --focus-ring: var(--flavor-orange-muted-12); --accent-bg: var(--flavor-blue-muted-11); --accent-bg-hover: var(--flavor-blue-muted-12); --accent-bg-active: var(--flavor-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-12); --text-on-accent-subtle: var(--flavor-blue-muted-12); --secondary-bg: var(--flavor-orange-muted-12); --secondary-bg-hover: var(--flavor-orange-muted-12); --secondary-bg-active: var(--flavor-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-3); --secondary-subtle-hover: var(--flavor-orange-muted-4); --secondary-border: var(--flavor-orange-muted-12); --secondary-text: var(--flavor-orange-muted-12); --text-on-secondary-subtle: var(--flavor-orange-muted-12); --success-bg: var(--flavor-blue-muted-2); --success-border: var(--flavor-blue-muted-4); --success-text: var(--flavor-blue-muted-12); --success-solid: var(--flavor-blue-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-2); --warning-border: var(--flavor-blue-muted-4); --warning-text: var(--flavor-blue-muted-12); --warning-solid: var(--flavor-blue-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-2); --danger-border: var(--flavor-blue-muted-4); --danger-text: var(--flavor-blue-muted-12); --danger-solid: var(--flavor-blue-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-2); --info-border: var(--flavor-blue-muted-4); --info-text: var(--flavor-blue-muted-12); --info-solid: var(--flavor-blue-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="accent"], :root[data-contrast="aaa"]:not([data-hue])[data-bg="accent"] { --surface-page: var(--flavor-blue-regular-8); --surface-1: var(--flavor-blue-regular-7); --surface-2: var(--flavor-blue-regular-6); --surface-3: var(--flavor-blue-regular-6); --surface-tint: var(--flavor-blue-regular-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-blue-regular-11); --border-subtle: var(--flavor-blue-regular-9); --border-default: var(--flavor-blue-regular-10); --border-strong: var(--flavor-blue-regular-11); --border-interactive: var(--flavor-blue-regular-11); --accent-subtle: var(--flavor-blue-regular-2); --accent-subtle-hover: var(--flavor-blue-regular-3); --accent-border: var(--flavor-orange-regular-4); --focus-ring: var(--flavor-orange-regular-12); --accent-bg: var(--flavor-blue-regular-11); --accent-bg-hover: var(--flavor-blue-regular-12); --accent-bg-active: var(--flavor-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-blue-regular-12); --secondary-bg: var(--flavor-orange-regular-12); --secondary-bg-hover: var(--flavor-orange-regular-12); --secondary-bg-active: var(--flavor-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-3); --secondary-subtle-hover: var(--flavor-orange-regular-4); --secondary-border: var(--flavor-orange-regular-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-orange-regular-12); --success-bg: var(--flavor-blue-regular-2); --success-border: var(--flavor-blue-regular-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-blue-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-2); --warning-border: var(--flavor-blue-regular-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-blue-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-2); --danger-border: var(--flavor-blue-regular-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-blue-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-2); --info-border: var(--flavor-blue-regular-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-blue-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-8); --surface-1: var(--flavor-blue-bold-7); --surface-2: var(--flavor-blue-bold-6); --surface-3: var(--flavor-blue-bold-6); --surface-tint: var(--flavor-blue-bold-9); --text-primary: var(--flavor-black); --text-secondary: var(--flavor-black); --text-tertiary: var(--flavor-black); --text-disabled: var(--flavor-blue-bold-11); --border-subtle: var(--flavor-blue-bold-9); --border-default: var(--flavor-blue-bold-10); --border-strong: var(--flavor-blue-bold-11); --border-interactive: var(--flavor-blue-bold-11); --accent-subtle: var(--flavor-blue-bold-2); --accent-subtle-hover: var(--flavor-blue-bold-3); --accent-border: var(--flavor-orange-bold-4); --focus-ring: var(--flavor-orange-bold-12); --accent-bg: var(--flavor-blue-bold-11); --accent-bg-hover: var(--flavor-blue-bold-12); --accent-bg-active: var(--flavor-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-black); --text-on-accent-subtle: var(--flavor-blue-bold-12); --secondary-bg: var(--flavor-orange-bold-12); --secondary-bg-hover: var(--flavor-orange-bold-12); --secondary-bg-active: var(--flavor-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-3); --secondary-subtle-hover: var(--flavor-orange-bold-4); --secondary-border: var(--flavor-orange-bold-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-orange-bold-12); --success-bg: var(--flavor-blue-bold-2); --success-border: var(--flavor-blue-bold-4); --success-text: var(--flavor-black); --success-solid: var(--flavor-blue-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-2); --warning-border: var(--flavor-blue-bold-4); --warning-text: var(--flavor-black); --warning-solid: var(--flavor-blue-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-2); --danger-border: var(--flavor-blue-bold-4); --danger-text: var(--flavor-black); --danger-solid: var(--flavor-blue-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-2); --info-border: var(--flavor-blue-bold-4); --info-text: var(--flavor-black); --info-solid: var(--flavor-blue-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-6); --surface-1: var(--flavor-magenta-muted-5); --surface-2: var(--flavor-magenta-muted-4); --surface-3: var(--flavor-magenta-muted-4); --surface-tint: var(--flavor-magenta-muted-7); --text-primary: var(--flavor-magenta-muted-12); --text-secondary: var(--flavor-magenta-muted-12); --text-tertiary: var(--flavor-magenta-muted-12); --text-disabled: var(--flavor-magenta-muted-9); --border-subtle: var(--flavor-magenta-muted-7); --border-default: var(--flavor-magenta-muted-8); --border-strong: var(--flavor-magenta-muted-10); --border-interactive: var(--flavor-magenta-muted-10); --accent-subtle: var(--flavor-magenta-muted-2); --accent-subtle-hover: var(--flavor-magenta-muted-3); --accent-border: var(--flavor-cyan-muted-4); --focus-ring: var(--flavor-cyan-muted-12); --accent-bg: var(--flavor-magenta-muted-11); --accent-bg-hover: var(--flavor-magenta-muted-12); --accent-bg-active: var(--flavor-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-12); --text-on-accent-subtle: var(--flavor-magenta-muted-12); --secondary-bg: var(--flavor-cyan-muted-12); --secondary-bg-hover: var(--flavor-cyan-muted-12); --secondary-bg-active: var(--flavor-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-3); --secondary-subtle-hover: var(--flavor-cyan-muted-4); --secondary-border: var(--flavor-cyan-muted-12); --secondary-text: var(--flavor-cyan-muted-12); --text-on-secondary-subtle: var(--flavor-cyan-muted-12); --success-bg: var(--flavor-magenta-muted-2); --success-border: var(--flavor-magenta-muted-4); --success-text: var(--flavor-magenta-muted-12); --success-solid: var(--flavor-magenta-muted-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-2); --warning-border: var(--flavor-magenta-muted-4); --warning-text: var(--flavor-magenta-muted-12); --warning-solid: var(--flavor-magenta-muted-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-2); --danger-border: var(--flavor-magenta-muted-4); --danger-text: var(--flavor-magenta-muted-12); --danger-solid: var(--flavor-magenta-muted-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-2); --info-border: var(--flavor-magenta-muted-4); --info-text: var(--flavor-magenta-muted-12); --info-solid: var(--flavor-magenta-muted-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-7); --surface-1: var(--flavor-magenta-regular-6); --surface-2: var(--flavor-magenta-regular-5); --surface-3: var(--flavor-magenta-regular-5); --surface-tint: var(--flavor-magenta-regular-8); --text-primary: var(--flavor-magenta-regular-12); --text-secondary: var(--flavor-magenta-regular-12); --text-tertiary: var(--flavor-magenta-regular-12); --text-disabled: var(--flavor-magenta-regular-10); --border-subtle: var(--flavor-magenta-regular-8); --border-default: var(--flavor-magenta-regular-9); --border-strong: var(--flavor-magenta-regular-11); --border-interactive: var(--flavor-magenta-regular-11); --accent-subtle: var(--flavor-magenta-regular-2); --accent-subtle-hover: var(--flavor-magenta-regular-3); --accent-border: var(--flavor-cyan-regular-4); --focus-ring: var(--flavor-cyan-regular-12); --accent-bg: var(--flavor-magenta-regular-11); --accent-bg-hover: var(--flavor-magenta-regular-12); --accent-bg-active: var(--flavor-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-12); --text-on-accent-subtle: var(--flavor-magenta-regular-12); --secondary-bg: var(--flavor-cyan-regular-12); --secondary-bg-hover: var(--flavor-cyan-regular-12); --secondary-bg-active: var(--flavor-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-3); --secondary-subtle-hover: var(--flavor-cyan-regular-4); --secondary-border: var(--flavor-cyan-regular-12); --secondary-text: var(--flavor-black); --text-on-secondary-subtle: var(--flavor-cyan-regular-12); --success-bg: var(--flavor-magenta-regular-2); --success-border: var(--flavor-magenta-regular-4); --success-text: var(--flavor-magenta-regular-12); --success-solid: var(--flavor-magenta-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-2); --warning-border: var(--flavor-magenta-regular-4); --warning-text: var(--flavor-magenta-regular-12); --warning-solid: var(--flavor-magenta-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-2); --danger-border: var(--flavor-magenta-regular-4); --danger-text: var(--flavor-magenta-regular-12); --danger-solid: var(--flavor-magenta-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-2); --info-border: var(--flavor-magenta-regular-4); --info-text: var(--flavor-magenta-regular-12); --info-solid: var(--flavor-magenta-regular-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-7); --surface-1: var(--flavor-magenta-bold-6); --surface-2: var(--flavor-magenta-bold-5); --surface-3: var(--flavor-magenta-bold-5); --surface-tint: var(--flavor-magenta-bold-8); --text-primary: var(--flavor-magenta-bold-12); --text-secondary: var(--flavor-magenta-bold-12); --text-tertiary: var(--flavor-magenta-bold-12); --text-disabled: var(--flavor-magenta-bold-10); --border-subtle: var(--flavor-magenta-bold-8); --border-default: var(--flavor-magenta-bold-9); --border-strong: var(--flavor-magenta-bold-11); --border-interactive: var(--flavor-magenta-bold-11); --accent-subtle: var(--flavor-magenta-bold-2); --accent-subtle-hover: var(--flavor-magenta-bold-3); --accent-border: var(--flavor-cyan-bold-4); --focus-ring: var(--flavor-cyan-bold-12); --accent-bg: var(--flavor-magenta-bold-11); --accent-bg-hover: var(--flavor-magenta-bold-12); --accent-bg-active: var(--flavor-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-12); --text-on-accent-subtle: var(--flavor-magenta-bold-12); --secondary-bg: var(--flavor-cyan-bold-12); --secondary-bg-hover: var(--flavor-cyan-bold-12); --secondary-bg-active: var(--flavor-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-3); --secondary-subtle-hover: var(--flavor-cyan-bold-4); --secondary-border: var(--flavor-cyan-bold-12); --secondary-text: var(--flavor-cyan-bold-12); --text-on-secondary-subtle: var(--flavor-cyan-bold-12); --success-bg: var(--flavor-magenta-bold-2); --success-border: var(--flavor-magenta-bold-4); --success-text: var(--flavor-magenta-bold-12); --success-solid: var(--flavor-magenta-bold-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-2); --warning-border: var(--flavor-magenta-bold-4); --warning-text: var(--flavor-magenta-bold-12); --warning-solid: var(--flavor-magenta-bold-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-2); --danger-border: var(--flavor-magenta-bold-4); --danger-text: var(--flavor-magenta-bold-12); --danger-solid: var(--flavor-magenta-bold-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-2); --info-border: var(--flavor-magenta-bold-4); --info-text: var(--flavor-magenta-bold-12); --info-solid: var(--flavor-magenta-bold-11); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-neutral-muted-9); --surface-1: var(--flavor-neutral-muted-10); --surface-2: var(--flavor-neutral-muted-11); --surface-3: var(--flavor-neutral-muted-11); --surface-tint: var(--flavor-neutral-muted-8); --text-primary: var(--flavor-neutral-muted-1); --text-secondary: var(--flavor-neutral-muted-2); --text-tertiary: var(--flavor-neutral-muted-3); --text-disabled: var(--flavor-neutral-muted-6); --border-subtle: var(--flavor-neutral-muted-8); --border-default: var(--flavor-neutral-muted-7); --border-strong: var(--flavor-neutral-muted-6); --border-interactive: var(--flavor-neutral-muted-6); --accent-subtle: var(--flavor-neutral-muted-11); --accent-subtle-hover: var(--flavor-neutral-muted-10); --accent-border: var(--flavor-neutral-muted-9); --focus-ring: var(--flavor-neutral-muted-6); --accent-bg: var(--flavor-neutral-muted-5); --accent-bg-hover: var(--flavor-neutral-muted-4); --accent-bg-active: var(--flavor-neutral-muted-3); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-muted-2); --text-on-accent-subtle: var(--flavor-neutral-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-neutral-muted-11); --success-border: var(--flavor-neutral-muted-9); --success-text: var(--flavor-neutral-muted-1); --success-solid: var(--flavor-neutral-muted-5); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-muted-11); --warning-border: var(--flavor-neutral-muted-9); --warning-text: var(--flavor-neutral-muted-1); --warning-solid: var(--flavor-neutral-muted-5); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-muted-11); --danger-border: var(--flavor-neutral-muted-9); --danger-text: var(--flavor-neutral-muted-1); --danger-solid: var(--flavor-neutral-muted-5); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-muted-11); --info-border: var(--flavor-neutral-muted-9); --info-text: var(--flavor-neutral-muted-1); --info-solid: var(--flavor-neutral-muted-5); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-neutral-regular-9); --surface-1: var(--flavor-neutral-regular-10); --surface-2: var(--flavor-neutral-regular-11); --surface-3: var(--flavor-neutral-regular-11); --surface-tint: var(--flavor-neutral-regular-8); --text-primary: var(--flavor-neutral-regular-1); --text-secondary: var(--flavor-neutral-regular-2); --text-tertiary: var(--flavor-neutral-regular-3); --text-disabled: var(--flavor-neutral-regular-6); --border-subtle: var(--flavor-neutral-regular-8); --border-default: var(--flavor-neutral-regular-7); --border-strong: var(--flavor-neutral-regular-6); --border-interactive: var(--flavor-neutral-regular-6); --accent-subtle: var(--flavor-neutral-regular-11); --accent-subtle-hover: var(--flavor-neutral-regular-10); --accent-border: var(--flavor-neutral-regular-9); --focus-ring: var(--flavor-neutral-regular-6); --accent-bg: var(--flavor-neutral-regular-6); --accent-bg-hover: var(--flavor-neutral-regular-5); --accent-bg-active: var(--flavor-neutral-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-regular-2); --text-on-accent-subtle: var(--flavor-neutral-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-neutral-regular-11); --success-border: var(--flavor-neutral-regular-9); --success-text: var(--flavor-neutral-regular-1); --success-solid: var(--flavor-neutral-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-regular-11); --warning-border: var(--flavor-neutral-regular-9); --warning-text: var(--flavor-neutral-regular-1); --warning-solid: var(--flavor-neutral-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-regular-11); --danger-border: var(--flavor-neutral-regular-9); --danger-text: var(--flavor-neutral-regular-1); --danger-solid: var(--flavor-neutral-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-regular-11); --info-border: var(--flavor-neutral-regular-9); --info-text: var(--flavor-neutral-regular-1); --info-solid: var(--flavor-neutral-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-neutral-bold-9); --surface-1: var(--flavor-neutral-bold-10); --surface-2: var(--flavor-neutral-bold-11); --surface-3: var(--flavor-neutral-bold-11); --surface-tint: var(--flavor-neutral-bold-8); --text-primary: var(--flavor-neutral-bold-1); --text-secondary: var(--flavor-neutral-bold-2); --text-tertiary: var(--flavor-neutral-bold-3); --text-disabled: var(--flavor-neutral-bold-6); --border-subtle: var(--flavor-neutral-bold-8); --border-default: var(--flavor-neutral-bold-7); --border-strong: var(--flavor-neutral-bold-6); --border-interactive: var(--flavor-neutral-bold-6); --accent-subtle: var(--flavor-neutral-bold-11); --accent-subtle-hover: var(--flavor-neutral-bold-10); --accent-border: var(--flavor-neutral-bold-9); --focus-ring: var(--flavor-neutral-bold-6); --accent-bg: var(--flavor-neutral-bold-6); --accent-bg-hover: var(--flavor-neutral-bold-5); --accent-bg-active: var(--flavor-neutral-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-bold-2); --text-on-accent-subtle: var(--flavor-neutral-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-neutral-bold-11); --success-border: var(--flavor-neutral-bold-9); --success-text: var(--flavor-neutral-bold-1); --success-solid: var(--flavor-neutral-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-bold-11); --warning-border: var(--flavor-neutral-bold-9); --warning-text: var(--flavor-neutral-bold-1); --warning-solid: var(--flavor-neutral-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-bold-11); --danger-border: var(--flavor-neutral-bold-9); --danger-text: var(--flavor-neutral-bold-1); --danger-solid: var(--flavor-neutral-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-bold-11); --info-border: var(--flavor-neutral-bold-9); --info-text: var(--flavor-neutral-bold-1); --info-solid: var(--flavor-neutral-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="red"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-red-muted-9); --surface-1: var(--flavor-red-muted-10); --surface-2: var(--flavor-red-muted-11); --surface-3: var(--flavor-red-muted-11); --surface-tint: var(--flavor-red-muted-8); --text-primary: var(--flavor-red-muted-1); --text-secondary: var(--flavor-red-muted-2); --text-tertiary: var(--flavor-red-muted-3); --text-disabled: var(--flavor-red-muted-6); --border-subtle: var(--flavor-red-muted-8); --border-default: var(--flavor-red-muted-7); --border-strong: var(--flavor-red-muted-6); --border-interactive: var(--flavor-red-muted-6); --accent-subtle: var(--flavor-red-muted-11); --accent-subtle-hover: var(--flavor-red-muted-10); --accent-border: var(--flavor-red-muted-9); --focus-ring: var(--flavor-red-muted-6); --accent-bg: var(--flavor-red-muted-6); --accent-bg-hover: var(--flavor-red-muted-5); --accent-bg-active: var(--flavor-red-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-2); --text-on-accent-subtle: var(--flavor-red-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-red-muted-11); --success-border: var(--flavor-red-muted-9); --success-text: var(--flavor-red-muted-1); --success-solid: var(--flavor-red-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-muted-11); --warning-border: var(--flavor-red-muted-9); --warning-text: var(--flavor-red-muted-1); --warning-solid: var(--flavor-red-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-muted-11); --danger-border: var(--flavor-red-muted-9); --danger-text: var(--flavor-red-muted-1); --danger-solid: var(--flavor-red-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-muted-11); --info-border: var(--flavor-red-muted-9); --info-text: var(--flavor-red-muted-1); --info-solid: var(--flavor-red-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="red"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-red-regular-9); --surface-1: var(--flavor-red-regular-10); --surface-2: var(--flavor-red-regular-11); --surface-3: var(--flavor-red-regular-11); --surface-tint: var(--flavor-red-regular-8); --text-primary: var(--flavor-red-regular-1); --text-secondary: var(--flavor-red-regular-2); --text-tertiary: var(--flavor-red-regular-3); --text-disabled: var(--flavor-red-regular-6); --border-subtle: var(--flavor-red-regular-8); --border-default: var(--flavor-red-regular-7); --border-strong: var(--flavor-red-regular-6); --border-interactive: var(--flavor-red-regular-6); --accent-subtle: var(--flavor-red-regular-11); --accent-subtle-hover: var(--flavor-red-regular-10); --accent-border: var(--flavor-red-regular-9); --focus-ring: var(--flavor-red-regular-6); --accent-bg: var(--flavor-red-regular-6); --accent-bg-hover: var(--flavor-red-regular-5); --accent-bg-active: var(--flavor-red-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-2); --text-on-accent-subtle: var(--flavor-red-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-red-regular-11); --success-border: var(--flavor-red-regular-9); --success-text: var(--flavor-red-regular-1); --success-solid: var(--flavor-red-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-regular-11); --warning-border: var(--flavor-red-regular-9); --warning-text: var(--flavor-red-regular-1); --warning-solid: var(--flavor-red-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-11); --danger-border: var(--flavor-red-regular-9); --danger-text: var(--flavor-red-regular-1); --danger-solid: var(--flavor-red-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-regular-11); --info-border: var(--flavor-red-regular-9); --info-text: var(--flavor-red-regular-1); --info-solid: var(--flavor-red-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="red"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-red-bold-9); --surface-1: var(--flavor-red-bold-10); --surface-2: var(--flavor-red-bold-11); --surface-3: var(--flavor-red-bold-11); --surface-tint: var(--flavor-red-bold-8); --text-primary: var(--flavor-red-bold-1); --text-secondary: var(--flavor-red-bold-2); --text-tertiary: var(--flavor-red-bold-3); --text-disabled: var(--flavor-red-bold-6); --border-subtle: var(--flavor-red-bold-8); --border-default: var(--flavor-red-bold-7); --border-strong: var(--flavor-red-bold-6); --border-interactive: var(--flavor-red-bold-6); --accent-subtle: var(--flavor-red-bold-11); --accent-subtle-hover: var(--flavor-red-bold-10); --accent-border: var(--flavor-red-bold-9); --focus-ring: var(--flavor-red-bold-6); --accent-bg: var(--flavor-red-bold-6); --accent-bg-hover: var(--flavor-red-bold-5); --accent-bg-active: var(--flavor-red-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-2); --text-on-accent-subtle: var(--flavor-red-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-red-bold-11); --success-border: var(--flavor-red-bold-9); --success-text: var(--flavor-red-bold-1); --success-solid: var(--flavor-red-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-bold-11); --warning-border: var(--flavor-red-bold-9); --warning-text: var(--flavor-red-bold-1); --warning-solid: var(--flavor-red-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-bold-11); --danger-border: var(--flavor-red-bold-9); --danger-text: var(--flavor-red-bold-1); --danger-solid: var(--flavor-red-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-bold-11); --info-border: var(--flavor-red-bold-9); --info-text: var(--flavor-red-bold-1); --info-solid: var(--flavor-red-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-muted-9); --surface-1: var(--flavor-scarlet-muted-10); --surface-2: var(--flavor-scarlet-muted-11); --surface-3: var(--flavor-scarlet-muted-11); --surface-tint: var(--flavor-scarlet-muted-8); --text-primary: var(--flavor-scarlet-muted-1); --text-secondary: var(--flavor-scarlet-muted-2); --text-tertiary: var(--flavor-scarlet-muted-3); --text-disabled: var(--flavor-scarlet-muted-6); --border-subtle: var(--flavor-scarlet-muted-8); --border-default: var(--flavor-scarlet-muted-7); --border-strong: var(--flavor-scarlet-muted-6); --border-interactive: var(--flavor-scarlet-muted-6); --accent-subtle: var(--flavor-scarlet-muted-11); --accent-subtle-hover: var(--flavor-scarlet-muted-10); --accent-border: var(--flavor-scarlet-muted-9); --focus-ring: var(--flavor-scarlet-muted-6); --accent-bg: var(--flavor-scarlet-muted-6); --accent-bg-hover: var(--flavor-scarlet-muted-5); --accent-bg-active: var(--flavor-scarlet-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-2); --text-on-accent-subtle: var(--flavor-scarlet-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-scarlet-muted-11); --success-border: var(--flavor-scarlet-muted-9); --success-text: var(--flavor-scarlet-muted-1); --success-solid: var(--flavor-scarlet-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-muted-11); --warning-border: var(--flavor-scarlet-muted-9); --warning-text: var(--flavor-scarlet-muted-1); --warning-solid: var(--flavor-scarlet-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-muted-11); --danger-border: var(--flavor-scarlet-muted-9); --danger-text: var(--flavor-scarlet-muted-1); --danger-solid: var(--flavor-scarlet-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-muted-11); --info-border: var(--flavor-scarlet-muted-9); --info-text: var(--flavor-scarlet-muted-1); --info-solid: var(--flavor-scarlet-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-regular-9); --surface-1: var(--flavor-scarlet-regular-10); --surface-2: var(--flavor-scarlet-regular-11); --surface-3: var(--flavor-scarlet-regular-11); --surface-tint: var(--flavor-scarlet-regular-8); --text-primary: var(--flavor-scarlet-regular-1); --text-secondary: var(--flavor-scarlet-regular-2); --text-tertiary: var(--flavor-scarlet-regular-3); --text-disabled: var(--flavor-scarlet-regular-6); --border-subtle: var(--flavor-scarlet-regular-8); --border-default: var(--flavor-scarlet-regular-7); --border-strong: var(--flavor-scarlet-regular-6); --border-interactive: var(--flavor-scarlet-regular-6); --accent-subtle: var(--flavor-scarlet-regular-11); --accent-subtle-hover: var(--flavor-scarlet-regular-10); --accent-border: var(--flavor-scarlet-regular-9); --focus-ring: var(--flavor-scarlet-regular-6); --accent-bg: var(--flavor-scarlet-regular-6); --accent-bg-hover: var(--flavor-scarlet-regular-5); --accent-bg-active: var(--flavor-scarlet-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-2); --text-on-accent-subtle: var(--flavor-scarlet-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-scarlet-regular-11); --success-border: var(--flavor-scarlet-regular-9); --success-text: var(--flavor-scarlet-regular-1); --success-solid: var(--flavor-scarlet-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-regular-11); --warning-border: var(--flavor-scarlet-regular-9); --warning-text: var(--flavor-scarlet-regular-1); --warning-solid: var(--flavor-scarlet-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-regular-11); --danger-border: var(--flavor-scarlet-regular-9); --danger-text: var(--flavor-scarlet-regular-1); --danger-solid: var(--flavor-scarlet-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-regular-11); --info-border: var(--flavor-scarlet-regular-9); --info-text: var(--flavor-scarlet-regular-1); --info-solid: var(--flavor-scarlet-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-bold-9); --surface-1: var(--flavor-scarlet-bold-10); --surface-2: var(--flavor-scarlet-bold-11); --surface-3: var(--flavor-scarlet-bold-11); --surface-tint: var(--flavor-scarlet-bold-8); --text-primary: var(--flavor-scarlet-bold-1); --text-secondary: var(--flavor-scarlet-bold-2); --text-tertiary: var(--flavor-scarlet-bold-3); --text-disabled: var(--flavor-scarlet-bold-6); --border-subtle: var(--flavor-scarlet-bold-8); --border-default: var(--flavor-scarlet-bold-7); --border-strong: var(--flavor-scarlet-bold-6); --border-interactive: var(--flavor-scarlet-bold-6); --accent-subtle: var(--flavor-scarlet-bold-11); --accent-subtle-hover: var(--flavor-scarlet-bold-10); --accent-border: var(--flavor-scarlet-bold-9); --focus-ring: var(--flavor-scarlet-bold-6); --accent-bg: var(--flavor-scarlet-bold-6); --accent-bg-hover: var(--flavor-scarlet-bold-5); --accent-bg-active: var(--flavor-scarlet-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-2); --text-on-accent-subtle: var(--flavor-scarlet-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-scarlet-bold-11); --success-border: var(--flavor-scarlet-bold-9); --success-text: var(--flavor-scarlet-bold-1); --success-solid: var(--flavor-scarlet-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-bold-11); --warning-border: var(--flavor-scarlet-bold-9); --warning-text: var(--flavor-scarlet-bold-1); --warning-solid: var(--flavor-scarlet-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-bold-11); --danger-border: var(--flavor-scarlet-bold-9); --danger-text: var(--flavor-scarlet-bold-1); --danger-solid: var(--flavor-scarlet-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-bold-11); --info-border: var(--flavor-scarlet-bold-9); --info-text: var(--flavor-scarlet-bold-1); --info-solid: var(--flavor-scarlet-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="orange"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-orange-muted-9); --surface-1: var(--flavor-orange-muted-10); --surface-2: var(--flavor-orange-muted-11); --surface-3: var(--flavor-orange-muted-11); --surface-tint: var(--flavor-orange-muted-8); --text-primary: var(--flavor-orange-muted-1); --text-secondary: var(--flavor-orange-muted-2); --text-tertiary: var(--flavor-orange-muted-3); --text-disabled: var(--flavor-orange-muted-6); --border-subtle: var(--flavor-orange-muted-8); --border-default: var(--flavor-orange-muted-7); --border-strong: var(--flavor-orange-muted-6); --border-interactive: var(--flavor-orange-muted-6); --accent-subtle: var(--flavor-orange-muted-11); --accent-subtle-hover: var(--flavor-orange-muted-10); --accent-border: var(--flavor-orange-muted-9); --focus-ring: var(--flavor-orange-muted-6); --accent-bg: var(--flavor-orange-muted-6); --accent-bg-hover: var(--flavor-orange-muted-5); --accent-bg-active: var(--flavor-orange-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-2); --text-on-accent-subtle: var(--flavor-orange-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-orange-muted-11); --success-border: var(--flavor-orange-muted-9); --success-text: var(--flavor-orange-muted-1); --success-solid: var(--flavor-orange-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-muted-11); --warning-border: var(--flavor-orange-muted-9); --warning-text: var(--flavor-orange-muted-1); --warning-solid: var(--flavor-orange-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-muted-11); --danger-border: var(--flavor-orange-muted-9); --danger-text: var(--flavor-orange-muted-1); --danger-solid: var(--flavor-orange-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-muted-11); --info-border: var(--flavor-orange-muted-9); --info-text: var(--flavor-orange-muted-1); --info-solid: var(--flavor-orange-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="orange"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-orange-regular-9); --surface-1: var(--flavor-orange-regular-10); --surface-2: var(--flavor-orange-regular-11); --surface-3: var(--flavor-orange-regular-11); --surface-tint: var(--flavor-orange-regular-8); --text-primary: var(--flavor-orange-regular-1); --text-secondary: var(--flavor-orange-regular-2); --text-tertiary: var(--flavor-orange-regular-3); --text-disabled: var(--flavor-orange-regular-6); --border-subtle: var(--flavor-orange-regular-8); --border-default: var(--flavor-orange-regular-7); --border-strong: var(--flavor-orange-regular-6); --border-interactive: var(--flavor-orange-regular-6); --accent-subtle: var(--flavor-orange-regular-11); --accent-subtle-hover: var(--flavor-orange-regular-10); --accent-border: var(--flavor-orange-regular-9); --focus-ring: var(--flavor-orange-regular-6); --accent-bg: var(--flavor-orange-regular-6); --accent-bg-hover: var(--flavor-orange-regular-5); --accent-bg-active: var(--flavor-orange-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-2); --text-on-accent-subtle: var(--flavor-orange-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-orange-regular-11); --success-border: var(--flavor-orange-regular-9); --success-text: var(--flavor-orange-regular-1); --success-solid: var(--flavor-orange-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-11); --warning-border: var(--flavor-orange-regular-9); --warning-text: var(--flavor-orange-regular-1); --warning-solid: var(--flavor-orange-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-regular-11); --danger-border: var(--flavor-orange-regular-9); --danger-text: var(--flavor-orange-regular-1); --danger-solid: var(--flavor-orange-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-regular-11); --info-border: var(--flavor-orange-regular-9); --info-text: var(--flavor-orange-regular-1); --info-solid: var(--flavor-orange-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="orange"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-orange-bold-10); --surface-1: var(--flavor-orange-bold-11); --surface-2: var(--flavor-orange-bold-12); --surface-3: var(--flavor-orange-bold-12); --surface-tint: var(--flavor-orange-bold-9); --text-primary: var(--flavor-orange-bold-1); --text-secondary: var(--flavor-orange-bold-2); --text-tertiary: var(--flavor-orange-bold-3); --text-disabled: var(--flavor-orange-bold-7); --border-subtle: var(--flavor-orange-bold-9); --border-default: var(--flavor-orange-bold-8); --border-strong: var(--flavor-orange-bold-7); --border-interactive: var(--flavor-orange-bold-7); --accent-subtle: var(--flavor-orange-bold-11); --accent-subtle-hover: var(--flavor-orange-bold-10); --accent-border: var(--flavor-orange-bold-9); --focus-ring: var(--flavor-orange-bold-7); --accent-bg: var(--flavor-orange-bold-7); --accent-bg-hover: var(--flavor-orange-bold-6); --accent-bg-active: var(--flavor-orange-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-2); --text-on-accent-subtle: var(--flavor-orange-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-orange-bold-11); --success-border: var(--flavor-orange-bold-9); --success-text: var(--flavor-orange-bold-1); --success-solid: var(--flavor-orange-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-bold-11); --warning-border: var(--flavor-orange-bold-9); --warning-text: var(--flavor-orange-bold-1); --warning-solid: var(--flavor-orange-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-bold-11); --danger-border: var(--flavor-orange-bold-9); --danger-text: var(--flavor-orange-bold-1); --danger-solid: var(--flavor-orange-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-bold-11); --info-border: var(--flavor-orange-bold-9); --info-text: var(--flavor-orange-bold-1); --info-solid: var(--flavor-orange-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-muted-9); --surface-1: var(--flavor-tangerine-muted-10); --surface-2: var(--flavor-tangerine-muted-11); --surface-3: var(--flavor-tangerine-muted-11); --surface-tint: var(--flavor-tangerine-muted-8); --text-primary: var(--flavor-tangerine-muted-1); --text-secondary: var(--flavor-tangerine-muted-2); --text-tertiary: var(--flavor-tangerine-muted-3); --text-disabled: var(--flavor-tangerine-muted-6); --border-subtle: var(--flavor-tangerine-muted-8); --border-default: var(--flavor-tangerine-muted-7); --border-strong: var(--flavor-tangerine-muted-6); --border-interactive: var(--flavor-tangerine-muted-6); --accent-subtle: var(--flavor-tangerine-muted-11); --accent-subtle-hover: var(--flavor-tangerine-muted-10); --accent-border: var(--flavor-tangerine-muted-9); --focus-ring: var(--flavor-tangerine-muted-6); --accent-bg: var(--flavor-tangerine-muted-6); --accent-bg-hover: var(--flavor-tangerine-muted-5); --accent-bg-active: var(--flavor-tangerine-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-2); --text-on-accent-subtle: var(--flavor-tangerine-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-tangerine-muted-11); --success-border: var(--flavor-tangerine-muted-9); --success-text: var(--flavor-tangerine-muted-1); --success-solid: var(--flavor-tangerine-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-muted-11); --warning-border: var(--flavor-tangerine-muted-9); --warning-text: var(--flavor-tangerine-muted-1); --warning-solid: var(--flavor-tangerine-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-muted-11); --danger-border: var(--flavor-tangerine-muted-9); --danger-text: var(--flavor-tangerine-muted-1); --danger-solid: var(--flavor-tangerine-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-muted-11); --info-border: var(--flavor-tangerine-muted-9); --info-text: var(--flavor-tangerine-muted-1); --info-solid: var(--flavor-tangerine-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-regular-10); --surface-1: var(--flavor-tangerine-regular-11); --surface-2: var(--flavor-tangerine-regular-12); --surface-3: var(--flavor-tangerine-regular-12); --surface-tint: var(--flavor-tangerine-regular-9); --text-primary: var(--flavor-tangerine-regular-1); --text-secondary: var(--flavor-tangerine-regular-2); --text-tertiary: var(--flavor-tangerine-regular-3); --text-disabled: var(--flavor-tangerine-regular-7); --border-subtle: var(--flavor-tangerine-regular-9); --border-default: var(--flavor-tangerine-regular-8); --border-strong: var(--flavor-tangerine-regular-7); --border-interactive: var(--flavor-tangerine-regular-7); --accent-subtle: var(--flavor-tangerine-regular-11); --accent-subtle-hover: var(--flavor-tangerine-regular-10); --accent-border: var(--flavor-tangerine-regular-9); --focus-ring: var(--flavor-tangerine-regular-7); --accent-bg: var(--flavor-tangerine-regular-7); --accent-bg-hover: var(--flavor-tangerine-regular-6); --accent-bg-active: var(--flavor-tangerine-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-2); --text-on-accent-subtle: var(--flavor-tangerine-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-tangerine-regular-11); --success-border: var(--flavor-tangerine-regular-9); --success-text: var(--flavor-tangerine-regular-1); --success-solid: var(--flavor-tangerine-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-regular-11); --warning-border: var(--flavor-tangerine-regular-9); --warning-text: var(--flavor-tangerine-regular-1); --warning-solid: var(--flavor-tangerine-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-regular-11); --danger-border: var(--flavor-tangerine-regular-9); --danger-text: var(--flavor-tangerine-regular-1); --danger-solid: var(--flavor-tangerine-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-regular-11); --info-border: var(--flavor-tangerine-regular-9); --info-text: var(--flavor-tangerine-regular-1); --info-solid: var(--flavor-tangerine-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-bold-10); --surface-1: var(--flavor-tangerine-bold-11); --surface-2: var(--flavor-tangerine-bold-12); --surface-3: var(--flavor-tangerine-bold-12); --surface-tint: var(--flavor-tangerine-bold-9); --text-primary: var(--flavor-tangerine-bold-1); --text-secondary: var(--flavor-tangerine-bold-2); --text-tertiary: var(--flavor-tangerine-bold-3); --text-disabled: var(--flavor-tangerine-bold-7); --border-subtle: var(--flavor-tangerine-bold-9); --border-default: var(--flavor-tangerine-bold-8); --border-strong: var(--flavor-tangerine-bold-7); --border-interactive: var(--flavor-tangerine-bold-7); --accent-subtle: var(--flavor-tangerine-bold-11); --accent-subtle-hover: var(--flavor-tangerine-bold-10); --accent-border: var(--flavor-tangerine-bold-9); --focus-ring: var(--flavor-tangerine-bold-7); --accent-bg: var(--flavor-tangerine-bold-7); --accent-bg-hover: var(--flavor-tangerine-bold-6); --accent-bg-active: var(--flavor-tangerine-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-2); --text-on-accent-subtle: var(--flavor-tangerine-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-tangerine-bold-11); --success-border: var(--flavor-tangerine-bold-9); --success-text: var(--flavor-tangerine-bold-1); --success-solid: var(--flavor-tangerine-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-bold-11); --warning-border: var(--flavor-tangerine-bold-9); --warning-text: var(--flavor-tangerine-bold-1); --warning-solid: var(--flavor-tangerine-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-bold-11); --danger-border: var(--flavor-tangerine-bold-9); --danger-text: var(--flavor-tangerine-bold-1); --danger-solid: var(--flavor-tangerine-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-bold-11); --info-border: var(--flavor-tangerine-bold-9); --info-text: var(--flavor-tangerine-bold-1); --info-solid: var(--flavor-tangerine-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-yellow-muted-9); --surface-1: var(--flavor-yellow-muted-10); --surface-2: var(--flavor-yellow-muted-11); --surface-3: var(--flavor-yellow-muted-11); --surface-tint: var(--flavor-yellow-muted-8); --text-primary: var(--flavor-yellow-muted-1); --text-secondary: var(--flavor-yellow-muted-2); --text-tertiary: var(--flavor-yellow-muted-3); --text-disabled: var(--flavor-yellow-muted-6); --border-subtle: var(--flavor-yellow-muted-8); --border-default: var(--flavor-yellow-muted-7); --border-strong: var(--flavor-yellow-muted-6); --border-interactive: var(--flavor-yellow-muted-6); --accent-subtle: var(--flavor-yellow-muted-11); --accent-subtle-hover: var(--flavor-yellow-muted-10); --accent-border: var(--flavor-yellow-muted-9); --focus-ring: var(--flavor-yellow-muted-6); --accent-bg: var(--flavor-yellow-muted-6); --accent-bg-hover: var(--flavor-yellow-muted-5); --accent-bg-active: var(--flavor-yellow-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-2); --text-on-accent-subtle: var(--flavor-yellow-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-yellow-muted-11); --success-border: var(--flavor-yellow-muted-9); --success-text: var(--flavor-yellow-muted-1); --success-solid: var(--flavor-yellow-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-muted-11); --warning-border: var(--flavor-yellow-muted-9); --warning-text: var(--flavor-yellow-muted-1); --warning-solid: var(--flavor-yellow-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-muted-11); --danger-border: var(--flavor-yellow-muted-9); --danger-text: var(--flavor-yellow-muted-1); --danger-solid: var(--flavor-yellow-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-muted-11); --info-border: var(--flavor-yellow-muted-9); --info-text: var(--flavor-yellow-muted-1); --info-solid: var(--flavor-yellow-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-yellow-regular-10); --surface-1: var(--flavor-yellow-regular-11); --surface-2: var(--flavor-yellow-regular-12); --surface-3: var(--flavor-yellow-regular-12); --surface-tint: var(--flavor-yellow-regular-9); --text-primary: var(--flavor-yellow-regular-1); --text-secondary: var(--flavor-yellow-regular-2); --text-tertiary: var(--flavor-yellow-regular-3); --text-disabled: var(--flavor-yellow-regular-7); --border-subtle: var(--flavor-yellow-regular-9); --border-default: var(--flavor-yellow-regular-8); --border-strong: var(--flavor-yellow-regular-7); --border-interactive: var(--flavor-yellow-regular-7); --accent-subtle: var(--flavor-yellow-regular-11); --accent-subtle-hover: var(--flavor-yellow-regular-10); --accent-border: var(--flavor-yellow-regular-9); --focus-ring: var(--flavor-yellow-regular-7); --accent-bg: var(--flavor-yellow-regular-7); --accent-bg-hover: var(--flavor-yellow-regular-6); --accent-bg-active: var(--flavor-yellow-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-2); --text-on-accent-subtle: var(--flavor-yellow-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-yellow-regular-11); --success-border: var(--flavor-yellow-regular-9); --success-text: var(--flavor-yellow-regular-1); --success-solid: var(--flavor-yellow-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-regular-11); --warning-border: var(--flavor-yellow-regular-9); --warning-text: var(--flavor-yellow-regular-1); --warning-solid: var(--flavor-yellow-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-regular-11); --danger-border: var(--flavor-yellow-regular-9); --danger-text: var(--flavor-yellow-regular-1); --danger-solid: var(--flavor-yellow-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-regular-11); --info-border: var(--flavor-yellow-regular-9); --info-text: var(--flavor-yellow-regular-1); --info-solid: var(--flavor-yellow-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-yellow-bold-11); --surface-1: var(--flavor-yellow-bold-12); --surface-2: var(--flavor-yellow-bold-12); --surface-3: var(--flavor-yellow-bold-12); --surface-tint: var(--flavor-yellow-bold-10); --text-primary: var(--flavor-yellow-bold-1); --text-secondary: var(--flavor-yellow-bold-2); --text-tertiary: var(--flavor-yellow-bold-3); --text-disabled: var(--flavor-yellow-bold-8); --border-subtle: var(--flavor-yellow-bold-10); --border-default: var(--flavor-yellow-bold-9); --border-strong: var(--flavor-yellow-bold-8); --border-interactive: var(--flavor-yellow-bold-8); --accent-subtle: var(--flavor-yellow-bold-11); --accent-subtle-hover: var(--flavor-yellow-bold-10); --accent-border: var(--flavor-yellow-bold-9); --focus-ring: var(--flavor-yellow-bold-8); --accent-bg: var(--flavor-yellow-bold-8); --accent-bg-hover: var(--flavor-yellow-bold-7); --accent-bg-active: var(--flavor-yellow-bold-6); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-2); --text-on-accent-subtle: var(--flavor-yellow-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-yellow-bold-11); --success-border: var(--flavor-yellow-bold-9); --success-text: var(--flavor-yellow-bold-1); --success-solid: var(--flavor-yellow-bold-8); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-bold-11); --warning-border: var(--flavor-yellow-bold-9); --warning-text: var(--flavor-yellow-bold-1); --warning-solid: var(--flavor-yellow-bold-8); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-bold-11); --danger-border: var(--flavor-yellow-bold-9); --danger-text: var(--flavor-yellow-bold-1); --danger-solid: var(--flavor-yellow-bold-8); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-bold-11); --info-border: var(--flavor-yellow-bold-9); --info-text: var(--flavor-yellow-bold-1); --info-solid: var(--flavor-yellow-bold-8); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="lime"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-lime-muted-9); --surface-1: var(--flavor-lime-muted-10); --surface-2: var(--flavor-lime-muted-11); --surface-3: var(--flavor-lime-muted-11); --surface-tint: var(--flavor-lime-muted-8); --text-primary: var(--flavor-lime-muted-1); --text-secondary: var(--flavor-lime-muted-2); --text-tertiary: var(--flavor-lime-muted-3); --text-disabled: var(--flavor-lime-muted-6); --border-subtle: var(--flavor-lime-muted-8); --border-default: var(--flavor-lime-muted-7); --border-strong: var(--flavor-lime-muted-6); --border-interactive: var(--flavor-lime-muted-6); --accent-subtle: var(--flavor-lime-muted-11); --accent-subtle-hover: var(--flavor-lime-muted-10); --accent-border: var(--flavor-lime-muted-9); --focus-ring: var(--flavor-lime-muted-6); --accent-bg: var(--flavor-lime-muted-6); --accent-bg-hover: var(--flavor-lime-muted-5); --accent-bg-active: var(--flavor-lime-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-2); --text-on-accent-subtle: var(--flavor-lime-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-lime-muted-11); --success-border: var(--flavor-lime-muted-9); --success-text: var(--flavor-lime-muted-1); --success-solid: var(--flavor-lime-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-muted-11); --warning-border: var(--flavor-lime-muted-9); --warning-text: var(--flavor-lime-muted-1); --warning-solid: var(--flavor-lime-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-muted-11); --danger-border: var(--flavor-lime-muted-9); --danger-text: var(--flavor-lime-muted-1); --danger-solid: var(--flavor-lime-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-muted-11); --info-border: var(--flavor-lime-muted-9); --info-text: var(--flavor-lime-muted-1); --info-solid: var(--flavor-lime-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="lime"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-lime-regular-9); --surface-1: var(--flavor-lime-regular-10); --surface-2: var(--flavor-lime-regular-11); --surface-3: var(--flavor-lime-regular-11); --surface-tint: var(--flavor-lime-regular-8); --text-primary: var(--flavor-lime-regular-1); --text-secondary: var(--flavor-lime-regular-2); --text-tertiary: var(--flavor-lime-regular-3); --text-disabled: var(--flavor-lime-regular-6); --border-subtle: var(--flavor-lime-regular-8); --border-default: var(--flavor-lime-regular-7); --border-strong: var(--flavor-lime-regular-6); --border-interactive: var(--flavor-lime-regular-6); --accent-subtle: var(--flavor-lime-regular-11); --accent-subtle-hover: var(--flavor-lime-regular-10); --accent-border: var(--flavor-lime-regular-9); --focus-ring: var(--flavor-lime-regular-6); --accent-bg: var(--flavor-lime-regular-6); --accent-bg-hover: var(--flavor-lime-regular-5); --accent-bg-active: var(--flavor-lime-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-2); --text-on-accent-subtle: var(--flavor-lime-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-lime-regular-11); --success-border: var(--flavor-lime-regular-9); --success-text: var(--flavor-lime-regular-1); --success-solid: var(--flavor-lime-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-regular-11); --warning-border: var(--flavor-lime-regular-9); --warning-text: var(--flavor-lime-regular-1); --warning-solid: var(--flavor-lime-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-regular-11); --danger-border: var(--flavor-lime-regular-9); --danger-text: var(--flavor-lime-regular-1); --danger-solid: var(--flavor-lime-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-regular-11); --info-border: var(--flavor-lime-regular-9); --info-text: var(--flavor-lime-regular-1); --info-solid: var(--flavor-lime-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="lime"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-lime-bold-11); --surface-1: var(--flavor-lime-bold-12); --surface-2: var(--flavor-lime-bold-12); --surface-3: var(--flavor-lime-bold-12); --surface-tint: var(--flavor-lime-bold-10); --text-primary: var(--flavor-lime-bold-1); --text-secondary: var(--flavor-lime-bold-2); --text-tertiary: var(--flavor-lime-bold-3); --text-disabled: var(--flavor-lime-bold-8); --border-subtle: var(--flavor-lime-bold-10); --border-default: var(--flavor-lime-bold-9); --border-strong: var(--flavor-lime-bold-8); --border-interactive: var(--flavor-lime-bold-8); --accent-subtle: var(--flavor-lime-bold-11); --accent-subtle-hover: var(--flavor-lime-bold-10); --accent-border: var(--flavor-lime-bold-9); --focus-ring: var(--flavor-lime-bold-8); --accent-bg: var(--flavor-lime-bold-8); --accent-bg-hover: var(--flavor-lime-bold-7); --accent-bg-active: var(--flavor-lime-bold-6); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-2); --text-on-accent-subtle: var(--flavor-lime-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-lime-bold-11); --success-border: var(--flavor-lime-bold-9); --success-text: var(--flavor-lime-bold-1); --success-solid: var(--flavor-lime-bold-8); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-bold-11); --warning-border: var(--flavor-lime-bold-9); --warning-text: var(--flavor-lime-bold-1); --warning-solid: var(--flavor-lime-bold-8); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-bold-11); --danger-border: var(--flavor-lime-bold-9); --danger-text: var(--flavor-lime-bold-1); --danger-solid: var(--flavor-lime-bold-8); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-bold-11); --info-border: var(--flavor-lime-bold-9); --info-text: var(--flavor-lime-bold-1); --info-solid: var(--flavor-lime-bold-8); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="green"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-green-muted-9); --surface-1: var(--flavor-green-muted-10); --surface-2: var(--flavor-green-muted-11); --surface-3: var(--flavor-green-muted-11); --surface-tint: var(--flavor-green-muted-8); --text-primary: var(--flavor-green-muted-1); --text-secondary: var(--flavor-green-muted-2); --text-tertiary: var(--flavor-green-muted-3); --text-disabled: var(--flavor-green-muted-6); --border-subtle: var(--flavor-green-muted-8); --border-default: var(--flavor-green-muted-7); --border-strong: var(--flavor-green-muted-6); --border-interactive: var(--flavor-green-muted-6); --accent-subtle: var(--flavor-green-muted-11); --accent-subtle-hover: var(--flavor-green-muted-10); --accent-border: var(--flavor-green-muted-9); --focus-ring: var(--flavor-green-muted-6); --accent-bg: var(--flavor-green-muted-6); --accent-bg-hover: var(--flavor-green-muted-5); --accent-bg-active: var(--flavor-green-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-2); --text-on-accent-subtle: var(--flavor-green-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-green-muted-11); --success-border: var(--flavor-green-muted-9); --success-text: var(--flavor-green-muted-1); --success-solid: var(--flavor-green-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-muted-11); --warning-border: var(--flavor-green-muted-9); --warning-text: var(--flavor-green-muted-1); --warning-solid: var(--flavor-green-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-muted-11); --danger-border: var(--flavor-green-muted-9); --danger-text: var(--flavor-green-muted-1); --danger-solid: var(--flavor-green-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-muted-11); --info-border: var(--flavor-green-muted-9); --info-text: var(--flavor-green-muted-1); --info-solid: var(--flavor-green-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="green"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-green-regular-9); --surface-1: var(--flavor-green-regular-10); --surface-2: var(--flavor-green-regular-11); --surface-3: var(--flavor-green-regular-11); --surface-tint: var(--flavor-green-regular-8); --text-primary: var(--flavor-green-regular-1); --text-secondary: var(--flavor-green-regular-2); --text-tertiary: var(--flavor-green-regular-3); --text-disabled: var(--flavor-green-regular-6); --border-subtle: var(--flavor-green-regular-8); --border-default: var(--flavor-green-regular-7); --border-strong: var(--flavor-green-regular-6); --border-interactive: var(--flavor-green-regular-6); --accent-subtle: var(--flavor-green-regular-11); --accent-subtle-hover: var(--flavor-green-regular-10); --accent-border: var(--flavor-green-regular-9); --focus-ring: var(--flavor-green-regular-6); --accent-bg: var(--flavor-green-regular-6); --accent-bg-hover: var(--flavor-green-regular-5); --accent-bg-active: var(--flavor-green-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-2); --text-on-accent-subtle: var(--flavor-green-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-green-regular-11); --success-border: var(--flavor-green-regular-9); --success-text: var(--flavor-green-regular-1); --success-solid: var(--flavor-green-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-regular-11); --warning-border: var(--flavor-green-regular-9); --warning-text: var(--flavor-green-regular-1); --warning-solid: var(--flavor-green-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-regular-11); --danger-border: var(--flavor-green-regular-9); --danger-text: var(--flavor-green-regular-1); --danger-solid: var(--flavor-green-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-regular-11); --info-border: var(--flavor-green-regular-9); --info-text: var(--flavor-green-regular-1); --info-solid: var(--flavor-green-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="green"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-green-bold-10); --surface-1: var(--flavor-green-bold-11); --surface-2: var(--flavor-green-bold-12); --surface-3: var(--flavor-green-bold-12); --surface-tint: var(--flavor-green-bold-9); --text-primary: var(--flavor-green-bold-1); --text-secondary: var(--flavor-green-bold-2); --text-tertiary: var(--flavor-green-bold-3); --text-disabled: var(--flavor-green-bold-7); --border-subtle: var(--flavor-green-bold-9); --border-default: var(--flavor-green-bold-8); --border-strong: var(--flavor-green-bold-7); --border-interactive: var(--flavor-green-bold-7); --accent-subtle: var(--flavor-green-bold-11); --accent-subtle-hover: var(--flavor-green-bold-10); --accent-border: var(--flavor-green-bold-9); --focus-ring: var(--flavor-green-bold-7); --accent-bg: var(--flavor-green-bold-7); --accent-bg-hover: var(--flavor-green-bold-6); --accent-bg-active: var(--flavor-green-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-2); --text-on-accent-subtle: var(--flavor-green-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-green-bold-11); --success-border: var(--flavor-green-bold-9); --success-text: var(--flavor-green-bold-1); --success-solid: var(--flavor-green-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-bold-11); --warning-border: var(--flavor-green-bold-9); --warning-text: var(--flavor-green-bold-1); --warning-solid: var(--flavor-green-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-bold-11); --danger-border: var(--flavor-green-bold-9); --danger-text: var(--flavor-green-bold-1); --danger-solid: var(--flavor-green-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-bold-11); --info-border: var(--flavor-green-bold-9); --info-text: var(--flavor-green-bold-1); --info-solid: var(--flavor-green-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="teal"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-teal-muted-9); --surface-1: var(--flavor-teal-muted-10); --surface-2: var(--flavor-teal-muted-11); --surface-3: var(--flavor-teal-muted-11); --surface-tint: var(--flavor-teal-muted-8); --text-primary: var(--flavor-teal-muted-1); --text-secondary: var(--flavor-teal-muted-2); --text-tertiary: var(--flavor-teal-muted-3); --text-disabled: var(--flavor-teal-muted-6); --border-subtle: var(--flavor-teal-muted-8); --border-default: var(--flavor-teal-muted-7); --border-strong: var(--flavor-teal-muted-6); --border-interactive: var(--flavor-teal-muted-6); --accent-subtle: var(--flavor-teal-muted-11); --accent-subtle-hover: var(--flavor-teal-muted-10); --accent-border: var(--flavor-teal-muted-9); --focus-ring: var(--flavor-teal-muted-6); --accent-bg: var(--flavor-teal-muted-6); --accent-bg-hover: var(--flavor-teal-muted-5); --accent-bg-active: var(--flavor-teal-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-2); --text-on-accent-subtle: var(--flavor-teal-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-teal-muted-11); --success-border: var(--flavor-teal-muted-9); --success-text: var(--flavor-teal-muted-1); --success-solid: var(--flavor-teal-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-muted-11); --warning-border: var(--flavor-teal-muted-9); --warning-text: var(--flavor-teal-muted-1); --warning-solid: var(--flavor-teal-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-muted-11); --danger-border: var(--flavor-teal-muted-9); --danger-text: var(--flavor-teal-muted-1); --danger-solid: var(--flavor-teal-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-muted-11); --info-border: var(--flavor-teal-muted-9); --info-text: var(--flavor-teal-muted-1); --info-solid: var(--flavor-teal-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="teal"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-teal-regular-10); --surface-1: var(--flavor-teal-regular-11); --surface-2: var(--flavor-teal-regular-12); --surface-3: var(--flavor-teal-regular-12); --surface-tint: var(--flavor-teal-regular-9); --text-primary: var(--flavor-teal-regular-1); --text-secondary: var(--flavor-teal-regular-2); --text-tertiary: var(--flavor-teal-regular-3); --text-disabled: var(--flavor-teal-regular-7); --border-subtle: var(--flavor-teal-regular-9); --border-default: var(--flavor-teal-regular-8); --border-strong: var(--flavor-teal-regular-7); --border-interactive: var(--flavor-teal-regular-7); --accent-subtle: var(--flavor-teal-regular-11); --accent-subtle-hover: var(--flavor-teal-regular-10); --accent-border: var(--flavor-teal-regular-9); --focus-ring: var(--flavor-teal-regular-7); --accent-bg: var(--flavor-teal-regular-7); --accent-bg-hover: var(--flavor-teal-regular-6); --accent-bg-active: var(--flavor-teal-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-2); --text-on-accent-subtle: var(--flavor-teal-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-teal-regular-11); --success-border: var(--flavor-teal-regular-9); --success-text: var(--flavor-teal-regular-1); --success-solid: var(--flavor-teal-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-regular-11); --warning-border: var(--flavor-teal-regular-9); --warning-text: var(--flavor-teal-regular-1); --warning-solid: var(--flavor-teal-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-regular-11); --danger-border: var(--flavor-teal-regular-9); --danger-text: var(--flavor-teal-regular-1); --danger-solid: var(--flavor-teal-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-regular-11); --info-border: var(--flavor-teal-regular-9); --info-text: var(--flavor-teal-regular-1); --info-solid: var(--flavor-teal-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="teal"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-teal-bold-11); --surface-1: var(--flavor-teal-bold-12); --surface-2: var(--flavor-teal-bold-12); --surface-3: var(--flavor-teal-bold-12); --surface-tint: var(--flavor-teal-bold-10); --text-primary: var(--flavor-teal-bold-1); --text-secondary: var(--flavor-teal-bold-2); --text-tertiary: var(--flavor-teal-bold-3); --text-disabled: var(--flavor-teal-bold-8); --border-subtle: var(--flavor-teal-bold-10); --border-default: var(--flavor-teal-bold-9); --border-strong: var(--flavor-teal-bold-8); --border-interactive: var(--flavor-teal-bold-8); --accent-subtle: var(--flavor-teal-bold-11); --accent-subtle-hover: var(--flavor-teal-bold-10); --accent-border: var(--flavor-teal-bold-9); --focus-ring: var(--flavor-teal-bold-8); --accent-bg: var(--flavor-teal-bold-8); --accent-bg-hover: var(--flavor-teal-bold-7); --accent-bg-active: var(--flavor-teal-bold-6); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-2); --text-on-accent-subtle: var(--flavor-teal-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-teal-bold-11); --success-border: var(--flavor-teal-bold-9); --success-text: var(--flavor-teal-bold-1); --success-solid: var(--flavor-teal-bold-8); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-bold-11); --warning-border: var(--flavor-teal-bold-9); --warning-text: var(--flavor-teal-bold-1); --warning-solid: var(--flavor-teal-bold-8); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-bold-11); --danger-border: var(--flavor-teal-bold-9); --danger-text: var(--flavor-teal-bold-1); --danger-solid: var(--flavor-teal-bold-8); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-bold-11); --info-border: var(--flavor-teal-bold-9); --info-text: var(--flavor-teal-bold-1); --info-solid: var(--flavor-teal-bold-8); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-cyan-muted-9); --surface-1: var(--flavor-cyan-muted-10); --surface-2: var(--flavor-cyan-muted-11); --surface-3: var(--flavor-cyan-muted-11); --surface-tint: var(--flavor-cyan-muted-8); --text-primary: var(--flavor-cyan-muted-1); --text-secondary: var(--flavor-cyan-muted-2); --text-tertiary: var(--flavor-cyan-muted-3); --text-disabled: var(--flavor-cyan-muted-6); --border-subtle: var(--flavor-cyan-muted-8); --border-default: var(--flavor-cyan-muted-7); --border-strong: var(--flavor-cyan-muted-6); --border-interactive: var(--flavor-cyan-muted-6); --accent-subtle: var(--flavor-cyan-muted-11); --accent-subtle-hover: var(--flavor-cyan-muted-10); --accent-border: var(--flavor-cyan-muted-9); --focus-ring: var(--flavor-cyan-muted-6); --accent-bg: var(--flavor-cyan-muted-6); --accent-bg-hover: var(--flavor-cyan-muted-5); --accent-bg-active: var(--flavor-cyan-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-2); --text-on-accent-subtle: var(--flavor-cyan-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-cyan-muted-11); --success-border: var(--flavor-cyan-muted-9); --success-text: var(--flavor-cyan-muted-1); --success-solid: var(--flavor-cyan-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-muted-11); --warning-border: var(--flavor-cyan-muted-9); --warning-text: var(--flavor-cyan-muted-1); --warning-solid: var(--flavor-cyan-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-muted-11); --danger-border: var(--flavor-cyan-muted-9); --danger-text: var(--flavor-cyan-muted-1); --danger-solid: var(--flavor-cyan-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-muted-11); --info-border: var(--flavor-cyan-muted-9); --info-text: var(--flavor-cyan-muted-1); --info-solid: var(--flavor-cyan-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-cyan-regular-10); --surface-1: var(--flavor-cyan-regular-11); --surface-2: var(--flavor-cyan-regular-12); --surface-3: var(--flavor-cyan-regular-12); --surface-tint: var(--flavor-cyan-regular-9); --text-primary: var(--flavor-cyan-regular-1); --text-secondary: var(--flavor-cyan-regular-2); --text-tertiary: var(--flavor-cyan-regular-3); --text-disabled: var(--flavor-cyan-regular-7); --border-subtle: var(--flavor-cyan-regular-9); --border-default: var(--flavor-cyan-regular-8); --border-strong: var(--flavor-cyan-regular-7); --border-interactive: var(--flavor-cyan-regular-7); --accent-subtle: var(--flavor-cyan-regular-11); --accent-subtle-hover: var(--flavor-cyan-regular-10); --accent-border: var(--flavor-cyan-regular-9); --focus-ring: var(--flavor-cyan-regular-7); --accent-bg: var(--flavor-cyan-regular-7); --accent-bg-hover: var(--flavor-cyan-regular-6); --accent-bg-active: var(--flavor-cyan-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-2); --text-on-accent-subtle: var(--flavor-cyan-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-cyan-regular-11); --success-border: var(--flavor-cyan-regular-9); --success-text: var(--flavor-cyan-regular-1); --success-solid: var(--flavor-cyan-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-regular-11); --warning-border: var(--flavor-cyan-regular-9); --warning-text: var(--flavor-cyan-regular-1); --warning-solid: var(--flavor-cyan-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-regular-11); --danger-border: var(--flavor-cyan-regular-9); --danger-text: var(--flavor-cyan-regular-1); --danger-solid: var(--flavor-cyan-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-regular-11); --info-border: var(--flavor-cyan-regular-9); --info-text: var(--flavor-cyan-regular-1); --info-solid: var(--flavor-cyan-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-cyan-bold-10); --surface-1: var(--flavor-cyan-bold-11); --surface-2: var(--flavor-cyan-bold-12); --surface-3: var(--flavor-cyan-bold-12); --surface-tint: var(--flavor-cyan-bold-9); --text-primary: var(--flavor-cyan-bold-1); --text-secondary: var(--flavor-cyan-bold-2); --text-tertiary: var(--flavor-cyan-bold-3); --text-disabled: var(--flavor-cyan-bold-7); --border-subtle: var(--flavor-cyan-bold-9); --border-default: var(--flavor-cyan-bold-8); --border-strong: var(--flavor-cyan-bold-7); --border-interactive: var(--flavor-cyan-bold-7); --accent-subtle: var(--flavor-cyan-bold-11); --accent-subtle-hover: var(--flavor-cyan-bold-10); --accent-border: var(--flavor-cyan-bold-9); --focus-ring: var(--flavor-cyan-bold-7); --accent-bg: var(--flavor-cyan-bold-7); --accent-bg-hover: var(--flavor-cyan-bold-6); --accent-bg-active: var(--flavor-cyan-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-2); --text-on-accent-subtle: var(--flavor-cyan-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-cyan-bold-11); --success-border: var(--flavor-cyan-bold-9); --success-text: var(--flavor-cyan-bold-1); --success-solid: var(--flavor-cyan-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-bold-11); --warning-border: var(--flavor-cyan-bold-9); --warning-text: var(--flavor-cyan-bold-1); --warning-solid: var(--flavor-cyan-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-bold-11); --danger-border: var(--flavor-cyan-bold-9); --danger-text: var(--flavor-cyan-bold-1); --danger-solid: var(--flavor-cyan-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-bold-11); --info-border: var(--flavor-cyan-bold-9); --info-text: var(--flavor-cyan-bold-1); --info-solid: var(--flavor-cyan-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="blue"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-9); --surface-1: var(--flavor-blue-muted-10); --surface-2: var(--flavor-blue-muted-11); --surface-3: var(--flavor-blue-muted-11); --surface-tint: var(--flavor-blue-muted-8); --text-primary: var(--flavor-blue-muted-1); --text-secondary: var(--flavor-blue-muted-2); --text-tertiary: var(--flavor-blue-muted-3); --text-disabled: var(--flavor-blue-muted-6); --border-subtle: var(--flavor-blue-muted-8); --border-default: var(--flavor-blue-muted-7); --border-strong: var(--flavor-blue-muted-6); --border-interactive: var(--flavor-blue-muted-6); --accent-subtle: var(--flavor-blue-muted-11); --accent-subtle-hover: var(--flavor-blue-muted-10); --accent-border: var(--flavor-blue-muted-9); --focus-ring: var(--flavor-blue-muted-6); --accent-bg: var(--flavor-blue-muted-6); --accent-bg-hover: var(--flavor-blue-muted-5); --accent-bg-active: var(--flavor-blue-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-2); --text-on-accent-subtle: var(--flavor-blue-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-blue-muted-11); --success-border: var(--flavor-blue-muted-9); --success-text: var(--flavor-blue-muted-1); --success-solid: var(--flavor-blue-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-11); --warning-border: var(--flavor-blue-muted-9); --warning-text: var(--flavor-blue-muted-1); --warning-solid: var(--flavor-blue-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-11); --danger-border: var(--flavor-blue-muted-9); --danger-text: var(--flavor-blue-muted-1); --danger-solid: var(--flavor-blue-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-11); --info-border: var(--flavor-blue-muted-9); --info-text: var(--flavor-blue-muted-1); --info-solid: var(--flavor-blue-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="blue"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-blue-regular-9); --surface-1: var(--flavor-blue-regular-10); --surface-2: var(--flavor-blue-regular-11); --surface-3: var(--flavor-blue-regular-11); --surface-tint: var(--flavor-blue-regular-8); --text-primary: var(--flavor-blue-regular-1); --text-secondary: var(--flavor-blue-regular-2); --text-tertiary: var(--flavor-blue-regular-3); --text-disabled: var(--flavor-blue-regular-6); --border-subtle: var(--flavor-blue-regular-8); --border-default: var(--flavor-blue-regular-7); --border-strong: var(--flavor-blue-regular-6); --border-interactive: var(--flavor-blue-regular-6); --accent-subtle: var(--flavor-blue-regular-11); --accent-subtle-hover: var(--flavor-blue-regular-10); --accent-border: var(--flavor-blue-regular-9); --focus-ring: var(--flavor-blue-regular-6); --accent-bg: var(--flavor-blue-regular-6); --accent-bg-hover: var(--flavor-blue-regular-5); --accent-bg-active: var(--flavor-blue-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-2); --text-on-accent-subtle: var(--flavor-blue-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-blue-regular-11); --success-border: var(--flavor-blue-regular-9); --success-text: var(--flavor-blue-regular-1); --success-solid: var(--flavor-blue-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-11); --warning-border: var(--flavor-blue-regular-9); --warning-text: var(--flavor-blue-regular-1); --warning-solid: var(--flavor-blue-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-11); --danger-border: var(--flavor-blue-regular-9); --danger-text: var(--flavor-blue-regular-1); --danger-solid: var(--flavor-blue-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-11); --info-border: var(--flavor-blue-regular-9); --info-text: var(--flavor-blue-regular-1); --info-solid: var(--flavor-blue-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="blue"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-9); --surface-1: var(--flavor-blue-bold-10); --surface-2: var(--flavor-blue-bold-11); --surface-3: var(--flavor-blue-bold-11); --surface-tint: var(--flavor-blue-bold-8); --text-primary: var(--flavor-blue-bold-1); --text-secondary: var(--flavor-blue-bold-2); --text-tertiary: var(--flavor-blue-bold-3); --text-disabled: var(--flavor-blue-bold-6); --border-subtle: var(--flavor-blue-bold-8); --border-default: var(--flavor-blue-bold-7); --border-strong: var(--flavor-blue-bold-6); --border-interactive: var(--flavor-blue-bold-6); --accent-subtle: var(--flavor-blue-bold-11); --accent-subtle-hover: var(--flavor-blue-bold-10); --accent-border: var(--flavor-blue-bold-9); --focus-ring: var(--flavor-blue-bold-6); --accent-bg: var(--flavor-blue-bold-6); --accent-bg-hover: var(--flavor-blue-bold-5); --accent-bg-active: var(--flavor-blue-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-2); --text-on-accent-subtle: var(--flavor-blue-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-blue-bold-11); --success-border: var(--flavor-blue-bold-9); --success-text: var(--flavor-blue-bold-1); --success-solid: var(--flavor-blue-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-11); --warning-border: var(--flavor-blue-bold-9); --warning-text: var(--flavor-blue-bold-1); --warning-solid: var(--flavor-blue-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-11); --danger-border: var(--flavor-blue-bold-9); --danger-text: var(--flavor-blue-bold-1); --danger-solid: var(--flavor-blue-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-11); --info-border: var(--flavor-blue-bold-9); --info-text: var(--flavor-blue-bold-1); --info-solid: var(--flavor-blue-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="violet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-violet-muted-9); --surface-1: var(--flavor-violet-muted-10); --surface-2: var(--flavor-violet-muted-11); --surface-3: var(--flavor-violet-muted-11); --surface-tint: var(--flavor-violet-muted-8); --text-primary: var(--flavor-violet-muted-1); --text-secondary: var(--flavor-violet-muted-2); --text-tertiary: var(--flavor-violet-muted-3); --text-disabled: var(--flavor-violet-muted-6); --border-subtle: var(--flavor-violet-muted-8); --border-default: var(--flavor-violet-muted-7); --border-strong: var(--flavor-violet-muted-6); --border-interactive: var(--flavor-violet-muted-6); --accent-subtle: var(--flavor-violet-muted-11); --accent-subtle-hover: var(--flavor-violet-muted-10); --accent-border: var(--flavor-violet-muted-9); --focus-ring: var(--flavor-violet-muted-6); --accent-bg: var(--flavor-violet-muted-6); --accent-bg-hover: var(--flavor-violet-muted-5); --accent-bg-active: var(--flavor-violet-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-2); --text-on-accent-subtle: var(--flavor-violet-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-violet-muted-11); --success-border: var(--flavor-violet-muted-9); --success-text: var(--flavor-violet-muted-1); --success-solid: var(--flavor-violet-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-muted-11); --warning-border: var(--flavor-violet-muted-9); --warning-text: var(--flavor-violet-muted-1); --warning-solid: var(--flavor-violet-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-muted-11); --danger-border: var(--flavor-violet-muted-9); --danger-text: var(--flavor-violet-muted-1); --danger-solid: var(--flavor-violet-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-muted-11); --info-border: var(--flavor-violet-muted-9); --info-text: var(--flavor-violet-muted-1); --info-solid: var(--flavor-violet-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="violet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-violet-regular-9); --surface-1: var(--flavor-violet-regular-10); --surface-2: var(--flavor-violet-regular-11); --surface-3: var(--flavor-violet-regular-11); --surface-tint: var(--flavor-violet-regular-8); --text-primary: var(--flavor-violet-regular-1); --text-secondary: var(--flavor-violet-regular-2); --text-tertiary: var(--flavor-violet-regular-3); --text-disabled: var(--flavor-violet-regular-6); --border-subtle: var(--flavor-violet-regular-8); --border-default: var(--flavor-violet-regular-7); --border-strong: var(--flavor-violet-regular-6); --border-interactive: var(--flavor-violet-regular-6); --accent-subtle: var(--flavor-violet-regular-11); --accent-subtle-hover: var(--flavor-violet-regular-10); --accent-border: var(--flavor-violet-regular-9); --focus-ring: var(--flavor-violet-regular-6); --accent-bg: var(--flavor-violet-regular-6); --accent-bg-hover: var(--flavor-violet-regular-5); --accent-bg-active: var(--flavor-violet-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-2); --text-on-accent-subtle: var(--flavor-violet-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-violet-regular-11); --success-border: var(--flavor-violet-regular-9); --success-text: var(--flavor-violet-regular-1); --success-solid: var(--flavor-violet-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-regular-11); --warning-border: var(--flavor-violet-regular-9); --warning-text: var(--flavor-violet-regular-1); --warning-solid: var(--flavor-violet-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-regular-11); --danger-border: var(--flavor-violet-regular-9); --danger-text: var(--flavor-violet-regular-1); --danger-solid: var(--flavor-violet-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-regular-11); --info-border: var(--flavor-violet-regular-9); --info-text: var(--flavor-violet-regular-1); --info-solid: var(--flavor-violet-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="violet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-violet-bold-9); --surface-1: var(--flavor-violet-bold-10); --surface-2: var(--flavor-violet-bold-11); --surface-3: var(--flavor-violet-bold-11); --surface-tint: var(--flavor-violet-bold-8); --text-primary: var(--flavor-violet-bold-1); --text-secondary: var(--flavor-violet-bold-2); --text-tertiary: var(--flavor-violet-bold-3); --text-disabled: var(--flavor-violet-bold-6); --border-subtle: var(--flavor-violet-bold-8); --border-default: var(--flavor-violet-bold-7); --border-strong: var(--flavor-violet-bold-6); --border-interactive: var(--flavor-violet-bold-6); --accent-subtle: var(--flavor-violet-bold-11); --accent-subtle-hover: var(--flavor-violet-bold-10); --accent-border: var(--flavor-violet-bold-9); --focus-ring: var(--flavor-violet-bold-6); --accent-bg: var(--flavor-violet-bold-7); --accent-bg-hover: var(--flavor-violet-bold-6); --accent-bg-active: var(--flavor-violet-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-2); --text-on-accent-subtle: var(--flavor-violet-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-violet-bold-11); --success-border: var(--flavor-violet-bold-9); --success-text: var(--flavor-violet-bold-1); --success-solid: var(--flavor-violet-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-bold-11); --warning-border: var(--flavor-violet-bold-9); --warning-text: var(--flavor-violet-bold-1); --warning-solid: var(--flavor-violet-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-bold-11); --danger-border: var(--flavor-violet-bold-9); --danger-text: var(--flavor-violet-bold-1); --danger-solid: var(--flavor-violet-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-bold-11); --info-border: var(--flavor-violet-bold-9); --info-text: var(--flavor-violet-bold-1); --info-solid: var(--flavor-violet-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="purple"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-purple-muted-9); --surface-1: var(--flavor-purple-muted-10); --surface-2: var(--flavor-purple-muted-11); --surface-3: var(--flavor-purple-muted-11); --surface-tint: var(--flavor-purple-muted-8); --text-primary: var(--flavor-purple-muted-1); --text-secondary: var(--flavor-purple-muted-2); --text-tertiary: var(--flavor-purple-muted-3); --text-disabled: var(--flavor-purple-muted-6); --border-subtle: var(--flavor-purple-muted-8); --border-default: var(--flavor-purple-muted-7); --border-strong: var(--flavor-purple-muted-6); --border-interactive: var(--flavor-purple-muted-6); --accent-subtle: var(--flavor-purple-muted-11); --accent-subtle-hover: var(--flavor-purple-muted-10); --accent-border: var(--flavor-purple-muted-9); --focus-ring: var(--flavor-purple-muted-6); --accent-bg: var(--flavor-purple-muted-6); --accent-bg-hover: var(--flavor-purple-muted-5); --accent-bg-active: var(--flavor-purple-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-2); --text-on-accent-subtle: var(--flavor-purple-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-purple-muted-11); --success-border: var(--flavor-purple-muted-9); --success-text: var(--flavor-purple-muted-1); --success-solid: var(--flavor-purple-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-muted-11); --warning-border: var(--flavor-purple-muted-9); --warning-text: var(--flavor-purple-muted-1); --warning-solid: var(--flavor-purple-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-muted-11); --danger-border: var(--flavor-purple-muted-9); --danger-text: var(--flavor-purple-muted-1); --danger-solid: var(--flavor-purple-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-muted-11); --info-border: var(--flavor-purple-muted-9); --info-text: var(--flavor-purple-muted-1); --info-solid: var(--flavor-purple-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="purple"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-purple-regular-9); --surface-1: var(--flavor-purple-regular-10); --surface-2: var(--flavor-purple-regular-11); --surface-3: var(--flavor-purple-regular-11); --surface-tint: var(--flavor-purple-regular-8); --text-primary: var(--flavor-purple-regular-1); --text-secondary: var(--flavor-purple-regular-2); --text-tertiary: var(--flavor-purple-regular-3); --text-disabled: var(--flavor-purple-regular-6); --border-subtle: var(--flavor-purple-regular-8); --border-default: var(--flavor-purple-regular-7); --border-strong: var(--flavor-purple-regular-6); --border-interactive: var(--flavor-purple-regular-6); --accent-subtle: var(--flavor-purple-regular-11); --accent-subtle-hover: var(--flavor-purple-regular-10); --accent-border: var(--flavor-purple-regular-9); --focus-ring: var(--flavor-purple-regular-6); --accent-bg: var(--flavor-purple-regular-6); --accent-bg-hover: var(--flavor-purple-regular-5); --accent-bg-active: var(--flavor-purple-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-2); --text-on-accent-subtle: var(--flavor-purple-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-purple-regular-11); --success-border: var(--flavor-purple-regular-9); --success-text: var(--flavor-purple-regular-1); --success-solid: var(--flavor-purple-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-regular-11); --warning-border: var(--flavor-purple-regular-9); --warning-text: var(--flavor-purple-regular-1); --warning-solid: var(--flavor-purple-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-regular-11); --danger-border: var(--flavor-purple-regular-9); --danger-text: var(--flavor-purple-regular-1); --danger-solid: var(--flavor-purple-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-regular-11); --info-border: var(--flavor-purple-regular-9); --info-text: var(--flavor-purple-regular-1); --info-solid: var(--flavor-purple-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="purple"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-purple-bold-9); --surface-1: var(--flavor-purple-bold-10); --surface-2: var(--flavor-purple-bold-11); --surface-3: var(--flavor-purple-bold-11); --surface-tint: var(--flavor-purple-bold-8); --text-primary: var(--flavor-purple-bold-1); --text-secondary: var(--flavor-purple-bold-2); --text-tertiary: var(--flavor-purple-bold-3); --text-disabled: var(--flavor-purple-bold-6); --border-subtle: var(--flavor-purple-bold-8); --border-default: var(--flavor-purple-bold-7); --border-strong: var(--flavor-purple-bold-6); --border-interactive: var(--flavor-purple-bold-6); --accent-subtle: var(--flavor-purple-bold-11); --accent-subtle-hover: var(--flavor-purple-bold-10); --accent-border: var(--flavor-purple-bold-9); --focus-ring: var(--flavor-purple-bold-6); --accent-bg: var(--flavor-purple-bold-7); --accent-bg-hover: var(--flavor-purple-bold-6); --accent-bg-active: var(--flavor-purple-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-2); --text-on-accent-subtle: var(--flavor-purple-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-purple-bold-11); --success-border: var(--flavor-purple-bold-9); --success-text: var(--flavor-purple-bold-1); --success-solid: var(--flavor-purple-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-bold-11); --warning-border: var(--flavor-purple-bold-9); --warning-text: var(--flavor-purple-bold-1); --warning-solid: var(--flavor-purple-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-bold-11); --danger-border: var(--flavor-purple-bold-9); --danger-text: var(--flavor-purple-bold-1); --danger-solid: var(--flavor-purple-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-bold-11); --info-border: var(--flavor-purple-bold-9); --info-text: var(--flavor-purple-bold-1); --info-solid: var(--flavor-purple-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-9); --surface-1: var(--flavor-magenta-muted-10); --surface-2: var(--flavor-magenta-muted-11); --surface-3: var(--flavor-magenta-muted-11); --surface-tint: var(--flavor-magenta-muted-8); --text-primary: var(--flavor-magenta-muted-1); --text-secondary: var(--flavor-magenta-muted-2); --text-tertiary: var(--flavor-magenta-muted-3); --text-disabled: var(--flavor-magenta-muted-6); --border-subtle: var(--flavor-magenta-muted-8); --border-default: var(--flavor-magenta-muted-7); --border-strong: var(--flavor-magenta-muted-6); --border-interactive: var(--flavor-magenta-muted-6); --accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle-hover: var(--flavor-magenta-muted-10); --accent-border: var(--flavor-magenta-muted-9); --focus-ring: var(--flavor-magenta-muted-6); --accent-bg: var(--flavor-magenta-muted-6); --accent-bg-hover: var(--flavor-magenta-muted-5); --accent-bg-active: var(--flavor-magenta-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-2); --text-on-accent-subtle: var(--flavor-magenta-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-magenta-muted-11); --success-border: var(--flavor-magenta-muted-9); --success-text: var(--flavor-magenta-muted-1); --success-solid: var(--flavor-magenta-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-11); --warning-border: var(--flavor-magenta-muted-9); --warning-text: var(--flavor-magenta-muted-1); --warning-solid: var(--flavor-magenta-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-11); --danger-border: var(--flavor-magenta-muted-9); --danger-text: var(--flavor-magenta-muted-1); --danger-solid: var(--flavor-magenta-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-11); --info-border: var(--flavor-magenta-muted-9); --info-text: var(--flavor-magenta-muted-1); --info-solid: var(--flavor-magenta-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-9); --surface-1: var(--flavor-magenta-regular-10); --surface-2: var(--flavor-magenta-regular-11); --surface-3: var(--flavor-magenta-regular-11); --surface-tint: var(--flavor-magenta-regular-8); --text-primary: var(--flavor-magenta-regular-1); --text-secondary: var(--flavor-magenta-regular-2); --text-tertiary: var(--flavor-magenta-regular-3); --text-disabled: var(--flavor-magenta-regular-6); --border-subtle: var(--flavor-magenta-regular-8); --border-default: var(--flavor-magenta-regular-7); --border-strong: var(--flavor-magenta-regular-6); --border-interactive: var(--flavor-magenta-regular-6); --accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle-hover: var(--flavor-magenta-regular-10); --accent-border: var(--flavor-magenta-regular-9); --focus-ring: var(--flavor-magenta-regular-6); --accent-bg: var(--flavor-magenta-regular-6); --accent-bg-hover: var(--flavor-magenta-regular-5); --accent-bg-active: var(--flavor-magenta-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-2); --text-on-accent-subtle: var(--flavor-magenta-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-magenta-regular-11); --success-border: var(--flavor-magenta-regular-9); --success-text: var(--flavor-magenta-regular-1); --success-solid: var(--flavor-magenta-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-11); --warning-border: var(--flavor-magenta-regular-9); --warning-text: var(--flavor-magenta-regular-1); --warning-solid: var(--flavor-magenta-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-11); --danger-border: var(--flavor-magenta-regular-9); --danger-text: var(--flavor-magenta-regular-1); --danger-solid: var(--flavor-magenta-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-11); --info-border: var(--flavor-magenta-regular-9); --info-text: var(--flavor-magenta-regular-1); --info-solid: var(--flavor-magenta-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-9); --surface-1: var(--flavor-magenta-bold-10); --surface-2: var(--flavor-magenta-bold-11); --surface-3: var(--flavor-magenta-bold-11); --surface-tint: var(--flavor-magenta-bold-8); --text-primary: var(--flavor-magenta-bold-1); --text-secondary: var(--flavor-magenta-bold-2); --text-tertiary: var(--flavor-magenta-bold-3); --text-disabled: var(--flavor-magenta-bold-6); --border-subtle: var(--flavor-magenta-bold-8); --border-default: var(--flavor-magenta-bold-7); --border-strong: var(--flavor-magenta-bold-6); --border-interactive: var(--flavor-magenta-bold-6); --accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle-hover: var(--flavor-magenta-bold-10); --accent-border: var(--flavor-magenta-bold-9); --focus-ring: var(--flavor-magenta-bold-6); --accent-bg: var(--flavor-magenta-bold-6); --accent-bg-hover: var(--flavor-magenta-bold-5); --accent-bg-active: var(--flavor-magenta-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-2); --text-on-accent-subtle: var(--flavor-magenta-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-magenta-bold-11); --success-border: var(--flavor-magenta-bold-9); --success-text: var(--flavor-magenta-bold-1); --success-solid: var(--flavor-magenta-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-11); --warning-border: var(--flavor-magenta-bold-9); --warning-text: var(--flavor-magenta-bold-1); --warning-solid: var(--flavor-magenta-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-11); --danger-border: var(--flavor-magenta-bold-9); --danger-text: var(--flavor-magenta-bold-1); --danger-solid: var(--flavor-magenta-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-11); --info-border: var(--flavor-magenta-bold-9); --info-text: var(--flavor-magenta-bold-1); --info-solid: var(--flavor-magenta-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="brand"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-9); --surface-1: var(--flavor-blue-muted-10); --surface-2: var(--flavor-blue-muted-11); --surface-3: var(--flavor-blue-muted-11); --surface-tint: var(--flavor-blue-muted-8); --text-primary: var(--flavor-blue-muted-1); --text-secondary: var(--flavor-blue-muted-2); --text-tertiary: var(--flavor-blue-muted-3); --text-disabled: var(--flavor-blue-muted-6); --border-subtle: var(--flavor-blue-muted-8); --border-default: var(--flavor-blue-muted-7); --border-strong: var(--flavor-blue-muted-6); --border-interactive: var(--flavor-blue-muted-6); --accent-subtle: var(--flavor-blue-muted-11); --accent-subtle-hover: var(--flavor-blue-muted-10); --accent-border: var(--flavor-orange-muted-9); --focus-ring: var(--flavor-orange-muted-1); --accent-bg: var(--flavor-blue-muted-6); --accent-bg-hover: var(--flavor-blue-muted-5); --accent-bg-active: var(--flavor-blue-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-2); --text-on-accent-subtle: var(--flavor-blue-muted-1); --secondary-bg: var(--flavor-orange-muted-1); --secondary-bg-hover: var(--flavor-orange-muted-1); --secondary-bg-active: var(--flavor-orange-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-10); --secondary-subtle-hover: var(--flavor-orange-muted-9); --secondary-border: var(--flavor-orange-muted-1); --secondary-text: var(--flavor-orange-muted-1); --text-on-secondary-subtle: var(--flavor-orange-muted-1); --success-bg: var(--flavor-blue-muted-11); --success-border: var(--flavor-blue-muted-9); --success-text: var(--flavor-blue-muted-1); --success-solid: var(--flavor-blue-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-11); --warning-border: var(--flavor-blue-muted-9); --warning-text: var(--flavor-blue-muted-1); --warning-solid: var(--flavor-blue-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-11); --danger-border: var(--flavor-blue-muted-9); --danger-text: var(--flavor-blue-muted-1); --danger-solid: var(--flavor-blue-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-11); --info-border: var(--flavor-blue-muted-9); --info-text: var(--flavor-blue-muted-1); --info-solid: var(--flavor-blue-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="brand"][data-sat="regular"][data-bg="accent"], :root[data-mode="dark"]:not([data-hue])[data-bg="accent"] { --surface-page: var(--flavor-blue-regular-9); --surface-1: var(--flavor-blue-regular-10); --surface-2: var(--flavor-blue-regular-11); --surface-3: var(--flavor-blue-regular-11); --surface-tint: var(--flavor-blue-regular-8); --text-primary: var(--flavor-blue-regular-1); --text-secondary: var(--flavor-blue-regular-2); --text-tertiary: var(--flavor-blue-regular-3); --text-disabled: var(--flavor-blue-regular-6); --border-subtle: var(--flavor-blue-regular-8); --border-default: var(--flavor-blue-regular-7); --border-strong: var(--flavor-blue-regular-6); --border-interactive: var(--flavor-blue-regular-6); --accent-subtle: var(--flavor-blue-regular-11); --accent-subtle-hover: var(--flavor-blue-regular-10); --accent-border: var(--flavor-orange-regular-9); --focus-ring: var(--flavor-orange-regular-1); --accent-bg: var(--flavor-blue-regular-6); --accent-bg-hover: var(--flavor-blue-regular-5); --accent-bg-active: var(--flavor-blue-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-2); --text-on-accent-subtle: var(--flavor-blue-regular-1); --secondary-bg: var(--flavor-orange-regular-1); --secondary-bg-hover: var(--flavor-orange-regular-1); --secondary-bg-active: var(--flavor-orange-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-10); --secondary-subtle-hover: var(--flavor-orange-regular-9); --secondary-border: var(--flavor-orange-regular-1); --secondary-text: var(--flavor-orange-regular-1); --text-on-secondary-subtle: var(--flavor-orange-regular-1); --success-bg: var(--flavor-blue-regular-11); --success-border: var(--flavor-blue-regular-9); --success-text: var(--flavor-blue-regular-1); --success-solid: var(--flavor-blue-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-11); --warning-border: var(--flavor-blue-regular-9); --warning-text: var(--flavor-blue-regular-1); --warning-solid: var(--flavor-blue-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-11); --danger-border: var(--flavor-blue-regular-9); --danger-text: var(--flavor-blue-regular-1); --danger-solid: var(--flavor-blue-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-11); --info-border: var(--flavor-blue-regular-9); --info-text: var(--flavor-blue-regular-1); --info-solid: var(--flavor-blue-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="brand"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-9); --surface-1: var(--flavor-blue-bold-10); --surface-2: var(--flavor-blue-bold-11); --surface-3: var(--flavor-blue-bold-11); --surface-tint: var(--flavor-blue-bold-8); --text-primary: var(--flavor-blue-bold-1); --text-secondary: var(--flavor-blue-bold-2); --text-tertiary: var(--flavor-blue-bold-3); --text-disabled: var(--flavor-blue-bold-6); --border-subtle: var(--flavor-blue-bold-8); --border-default: var(--flavor-blue-bold-7); --border-strong: var(--flavor-blue-bold-6); --border-interactive: var(--flavor-blue-bold-6); --accent-subtle: var(--flavor-blue-bold-11); --accent-subtle-hover: var(--flavor-blue-bold-10); --accent-border: var(--flavor-orange-bold-9); --focus-ring: var(--flavor-orange-bold-1); --accent-bg: var(--flavor-blue-bold-6); --accent-bg-hover: var(--flavor-blue-bold-5); --accent-bg-active: var(--flavor-blue-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-2); --text-on-accent-subtle: var(--flavor-blue-bold-1); --secondary-bg: var(--flavor-orange-bold-1); --secondary-bg-hover: var(--flavor-orange-bold-1); --secondary-bg-active: var(--flavor-orange-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-10); --secondary-subtle-hover: var(--flavor-orange-bold-9); --secondary-border: var(--flavor-orange-bold-1); --secondary-text: var(--flavor-orange-bold-1); --text-on-secondary-subtle: var(--flavor-orange-bold-1); --success-bg: var(--flavor-blue-bold-11); --success-border: var(--flavor-blue-bold-9); --success-text: var(--flavor-blue-bold-1); --success-solid: var(--flavor-blue-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-11); --warning-border: var(--flavor-blue-bold-9); --warning-text: var(--flavor-blue-bold-1); --warning-solid: var(--flavor-blue-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-11); --danger-border: var(--flavor-blue-bold-9); --danger-text: var(--flavor-blue-bold-1); --danger-solid: var(--flavor-blue-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-11); --info-border: var(--flavor-blue-bold-9); --info-text: var(--flavor-blue-bold-1); --info-solid: var(--flavor-blue-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-9); --surface-1: var(--flavor-magenta-muted-10); --surface-2: var(--flavor-magenta-muted-11); --surface-3: var(--flavor-magenta-muted-11); --surface-tint: var(--flavor-magenta-muted-8); --text-primary: var(--flavor-magenta-muted-1); --text-secondary: var(--flavor-magenta-muted-2); --text-tertiary: var(--flavor-magenta-muted-3); --text-disabled: var(--flavor-magenta-muted-6); --border-subtle: var(--flavor-magenta-muted-8); --border-default: var(--flavor-magenta-muted-7); --border-strong: var(--flavor-magenta-muted-6); --border-interactive: var(--flavor-magenta-muted-6); --accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle-hover: var(--flavor-magenta-muted-10); --accent-border: var(--flavor-cyan-muted-9); --focus-ring: var(--flavor-cyan-muted-1); --accent-bg: var(--flavor-magenta-muted-6); --accent-bg-hover: var(--flavor-magenta-muted-5); --accent-bg-active: var(--flavor-magenta-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-2); --text-on-accent-subtle: var(--flavor-magenta-muted-1); --secondary-bg: var(--flavor-cyan-muted-1); --secondary-bg-hover: var(--flavor-cyan-muted-1); --secondary-bg-active: var(--flavor-cyan-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-10); --secondary-subtle-hover: var(--flavor-cyan-muted-9); --secondary-border: var(--flavor-cyan-muted-1); --secondary-text: var(--flavor-cyan-muted-1); --text-on-secondary-subtle: var(--flavor-cyan-muted-1); --success-bg: var(--flavor-magenta-muted-11); --success-border: var(--flavor-magenta-muted-9); --success-text: var(--flavor-magenta-muted-1); --success-solid: var(--flavor-magenta-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-11); --warning-border: var(--flavor-magenta-muted-9); --warning-text: var(--flavor-magenta-muted-1); --warning-solid: var(--flavor-magenta-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-11); --danger-border: var(--flavor-magenta-muted-9); --danger-text: var(--flavor-magenta-muted-1); --danger-solid: var(--flavor-magenta-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-11); --info-border: var(--flavor-magenta-muted-9); --info-text: var(--flavor-magenta-muted-1); --info-solid: var(--flavor-magenta-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-9); --surface-1: var(--flavor-magenta-regular-10); --surface-2: var(--flavor-magenta-regular-11); --surface-3: var(--flavor-magenta-regular-11); --surface-tint: var(--flavor-magenta-regular-8); --text-primary: var(--flavor-magenta-regular-1); --text-secondary: var(--flavor-magenta-regular-2); --text-tertiary: var(--flavor-magenta-regular-3); --text-disabled: var(--flavor-magenta-regular-6); --border-subtle: var(--flavor-magenta-regular-8); --border-default: var(--flavor-magenta-regular-7); --border-strong: var(--flavor-magenta-regular-6); --border-interactive: var(--flavor-magenta-regular-6); --accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle-hover: var(--flavor-magenta-regular-10); --accent-border: var(--flavor-cyan-regular-9); --focus-ring: var(--flavor-cyan-regular-1); --accent-bg: var(--flavor-magenta-regular-6); --accent-bg-hover: var(--flavor-magenta-regular-5); --accent-bg-active: var(--flavor-magenta-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-2); --text-on-accent-subtle: var(--flavor-magenta-regular-1); --secondary-bg: var(--flavor-cyan-regular-1); --secondary-bg-hover: var(--flavor-cyan-regular-1); --secondary-bg-active: var(--flavor-cyan-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-10); --secondary-subtle-hover: var(--flavor-cyan-regular-9); --secondary-border: var(--flavor-cyan-regular-1); --secondary-text: var(--flavor-cyan-regular-1); --text-on-secondary-subtle: var(--flavor-cyan-regular-1); --success-bg: var(--flavor-magenta-regular-11); --success-border: var(--flavor-magenta-regular-9); --success-text: var(--flavor-magenta-regular-1); --success-solid: var(--flavor-magenta-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-11); --warning-border: var(--flavor-magenta-regular-9); --warning-text: var(--flavor-magenta-regular-1); --warning-solid: var(--flavor-magenta-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-11); --danger-border: var(--flavor-magenta-regular-9); --danger-text: var(--flavor-magenta-regular-1); --danger-solid: var(--flavor-magenta-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-11); --info-border: var(--flavor-magenta-regular-9); --info-text: var(--flavor-magenta-regular-1); --info-solid: var(--flavor-magenta-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-9); --surface-1: var(--flavor-magenta-bold-10); --surface-2: var(--flavor-magenta-bold-11); --surface-3: var(--flavor-magenta-bold-11); --surface-tint: var(--flavor-magenta-bold-8); --text-primary: var(--flavor-magenta-bold-1); --text-secondary: var(--flavor-magenta-bold-2); --text-tertiary: var(--flavor-magenta-bold-3); --text-disabled: var(--flavor-magenta-bold-6); --border-subtle: var(--flavor-magenta-bold-8); --border-default: var(--flavor-magenta-bold-7); --border-strong: var(--flavor-magenta-bold-6); --border-interactive: var(--flavor-magenta-bold-6); --accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle-hover: var(--flavor-magenta-bold-10); --accent-border: var(--flavor-cyan-bold-9); --focus-ring: var(--flavor-cyan-bold-1); --accent-bg: var(--flavor-magenta-bold-6); --accent-bg-hover: var(--flavor-magenta-bold-5); --accent-bg-active: var(--flavor-magenta-bold-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-2); --text-on-accent-subtle: var(--flavor-magenta-bold-1); --secondary-bg: var(--flavor-cyan-bold-1); --secondary-bg-hover: var(--flavor-cyan-bold-1); --secondary-bg-active: var(--flavor-cyan-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-10); --secondary-subtle-hover: var(--flavor-cyan-bold-9); --secondary-border: var(--flavor-cyan-bold-1); --secondary-text: var(--flavor-cyan-bold-1); --text-on-secondary-subtle: var(--flavor-cyan-bold-1); --success-bg: var(--flavor-magenta-bold-11); --success-border: var(--flavor-magenta-bold-9); --success-text: var(--flavor-magenta-bold-1); --success-solid: var(--flavor-magenta-bold-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-11); --warning-border: var(--flavor-magenta-bold-9); --warning-text: var(--flavor-magenta-bold-1); --warning-solid: var(--flavor-magenta-bold-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-11); --danger-border: var(--flavor-magenta-bold-9); --danger-text: var(--flavor-magenta-bold-1); --danger-solid: var(--flavor-magenta-bold-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-11); --info-border: var(--flavor-magenta-bold-9); --info-text: var(--flavor-magenta-bold-1); --info-solid: var(--flavor-magenta-bold-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-neutral-muted-10); --surface-1: var(--flavor-neutral-muted-11); --surface-2: var(--flavor-neutral-muted-12); --surface-3: var(--flavor-neutral-muted-12); --surface-tint: var(--flavor-neutral-muted-9); --text-primary: var(--flavor-neutral-muted-1); --text-secondary: var(--flavor-neutral-muted-2); --text-tertiary: var(--flavor-neutral-muted-3); --text-disabled: var(--flavor-neutral-muted-7); --border-subtle: var(--flavor-neutral-muted-9); --border-default: var(--flavor-neutral-muted-8); --border-strong: var(--flavor-neutral-muted-7); --border-interactive: var(--flavor-neutral-muted-7); --accent-subtle: var(--flavor-neutral-muted-11); --accent-subtle-hover: var(--flavor-neutral-muted-10); --accent-border: var(--flavor-neutral-muted-9); --focus-ring: var(--flavor-neutral-muted-7); --accent-bg: var(--flavor-neutral-muted-7); --accent-bg-hover: var(--flavor-neutral-muted-6); --accent-bg-active: var(--flavor-neutral-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-muted-2); --text-on-accent-subtle: var(--flavor-neutral-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-neutral-muted-11); --success-border: var(--flavor-neutral-muted-9); --success-text: var(--flavor-neutral-muted-1); --success-solid: var(--flavor-neutral-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-muted-11); --warning-border: var(--flavor-neutral-muted-9); --warning-text: var(--flavor-neutral-muted-1); --warning-solid: var(--flavor-neutral-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-muted-11); --danger-border: var(--flavor-neutral-muted-9); --danger-text: var(--flavor-neutral-muted-1); --danger-solid: var(--flavor-neutral-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-muted-11); --info-border: var(--flavor-neutral-muted-9); --info-text: var(--flavor-neutral-muted-1); --info-solid: var(--flavor-neutral-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-neutral-regular-10); --surface-1: var(--flavor-neutral-regular-11); --surface-2: var(--flavor-neutral-regular-12); --surface-3: var(--flavor-neutral-regular-12); --surface-tint: var(--flavor-neutral-regular-9); --text-primary: var(--flavor-neutral-regular-1); --text-secondary: var(--flavor-neutral-regular-2); --text-tertiary: var(--flavor-neutral-regular-3); --text-disabled: var(--flavor-neutral-regular-7); --border-subtle: var(--flavor-neutral-regular-9); --border-default: var(--flavor-neutral-regular-8); --border-strong: var(--flavor-neutral-regular-7); --border-interactive: var(--flavor-neutral-regular-7); --accent-subtle: var(--flavor-neutral-regular-11); --accent-subtle-hover: var(--flavor-neutral-regular-10); --accent-border: var(--flavor-neutral-regular-9); --focus-ring: var(--flavor-neutral-regular-7); --accent-bg: var(--flavor-neutral-regular-7); --accent-bg-hover: var(--flavor-neutral-regular-6); --accent-bg-active: var(--flavor-neutral-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-regular-2); --text-on-accent-subtle: var(--flavor-neutral-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-neutral-regular-11); --success-border: var(--flavor-neutral-regular-9); --success-text: var(--flavor-neutral-regular-1); --success-solid: var(--flavor-neutral-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-regular-11); --warning-border: var(--flavor-neutral-regular-9); --warning-text: var(--flavor-neutral-regular-1); --warning-solid: var(--flavor-neutral-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-regular-11); --danger-border: var(--flavor-neutral-regular-9); --danger-text: var(--flavor-neutral-regular-1); --danger-solid: var(--flavor-neutral-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-regular-11); --info-border: var(--flavor-neutral-regular-9); --info-text: var(--flavor-neutral-regular-1); --info-solid: var(--flavor-neutral-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-neutral-bold-10); --surface-1: var(--flavor-neutral-bold-11); --surface-2: var(--flavor-neutral-bold-12); --surface-3: var(--flavor-neutral-bold-12); --surface-tint: var(--flavor-neutral-bold-9); --text-primary: var(--flavor-neutral-bold-1); --text-secondary: var(--flavor-neutral-bold-2); --text-tertiary: var(--flavor-neutral-bold-3); --text-disabled: var(--flavor-neutral-bold-7); --border-subtle: var(--flavor-neutral-bold-9); --border-default: var(--flavor-neutral-bold-8); --border-strong: var(--flavor-neutral-bold-7); --border-interactive: var(--flavor-neutral-bold-7); --accent-subtle: var(--flavor-neutral-bold-11); --accent-subtle-hover: var(--flavor-neutral-bold-10); --accent-border: var(--flavor-neutral-bold-9); --focus-ring: var(--flavor-neutral-bold-7); --accent-bg: var(--flavor-neutral-bold-7); --accent-bg-hover: var(--flavor-neutral-bold-6); --accent-bg-active: var(--flavor-neutral-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-neutral-bold-2); --text-on-accent-subtle: var(--flavor-neutral-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-neutral-bold-11); --success-border: var(--flavor-neutral-bold-9); --success-text: var(--flavor-neutral-bold-1); --success-solid: var(--flavor-neutral-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-neutral-bold-11); --warning-border: var(--flavor-neutral-bold-9); --warning-text: var(--flavor-neutral-bold-1); --warning-solid: var(--flavor-neutral-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-neutral-bold-11); --danger-border: var(--flavor-neutral-bold-9); --danger-text: var(--flavor-neutral-bold-1); --danger-solid: var(--flavor-neutral-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-neutral-bold-11); --info-border: var(--flavor-neutral-bold-9); --info-text: var(--flavor-neutral-bold-1); --info-solid: var(--flavor-neutral-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-red-muted-10); --surface-1: var(--flavor-red-muted-11); --surface-2: var(--flavor-red-muted-12); --surface-3: var(--flavor-red-muted-12); --surface-tint: var(--flavor-red-muted-9); --text-primary: var(--flavor-red-muted-1); --text-secondary: var(--flavor-red-muted-2); --text-tertiary: var(--flavor-red-muted-3); --text-disabled: var(--flavor-red-muted-7); --border-subtle: var(--flavor-red-muted-9); --border-default: var(--flavor-red-muted-8); --border-strong: var(--flavor-red-muted-7); --border-interactive: var(--flavor-red-muted-7); --accent-subtle: var(--flavor-red-muted-11); --accent-subtle-hover: var(--flavor-red-muted-10); --accent-border: var(--flavor-red-muted-9); --focus-ring: var(--flavor-red-muted-7); --accent-bg: var(--flavor-red-muted-7); --accent-bg-hover: var(--flavor-red-muted-6); --accent-bg-active: var(--flavor-red-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-muted-2); --text-on-accent-subtle: var(--flavor-red-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-red-muted-11); --success-border: var(--flavor-red-muted-9); --success-text: var(--flavor-red-muted-1); --success-solid: var(--flavor-red-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-muted-11); --warning-border: var(--flavor-red-muted-9); --warning-text: var(--flavor-red-muted-1); --warning-solid: var(--flavor-red-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-muted-11); --danger-border: var(--flavor-red-muted-9); --danger-text: var(--flavor-red-muted-1); --danger-solid: var(--flavor-red-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-muted-11); --info-border: var(--flavor-red-muted-9); --info-text: var(--flavor-red-muted-1); --info-solid: var(--flavor-red-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-red-regular-10); --surface-1: var(--flavor-red-regular-11); --surface-2: var(--flavor-red-regular-12); --surface-3: var(--flavor-red-regular-12); --surface-tint: var(--flavor-red-regular-9); --text-primary: var(--flavor-red-regular-1); --text-secondary: var(--flavor-red-regular-2); --text-tertiary: var(--flavor-red-regular-3); --text-disabled: var(--flavor-red-regular-7); --border-subtle: var(--flavor-red-regular-9); --border-default: var(--flavor-red-regular-8); --border-strong: var(--flavor-red-regular-7); --border-interactive: var(--flavor-red-regular-7); --accent-subtle: var(--flavor-red-regular-11); --accent-subtle-hover: var(--flavor-red-regular-10); --accent-border: var(--flavor-red-regular-9); --focus-ring: var(--flavor-red-regular-7); --accent-bg: var(--flavor-red-regular-7); --accent-bg-hover: var(--flavor-red-regular-6); --accent-bg-active: var(--flavor-red-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-regular-2); --text-on-accent-subtle: var(--flavor-red-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-red-regular-11); --success-border: var(--flavor-red-regular-9); --success-text: var(--flavor-red-regular-1); --success-solid: var(--flavor-red-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-regular-11); --warning-border: var(--flavor-red-regular-9); --warning-text: var(--flavor-red-regular-1); --warning-solid: var(--flavor-red-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-11); --danger-border: var(--flavor-red-regular-9); --danger-text: var(--flavor-red-regular-1); --danger-solid: var(--flavor-red-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-regular-11); --info-border: var(--flavor-red-regular-9); --info-text: var(--flavor-red-regular-1); --info-solid: var(--flavor-red-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-red-bold-10); --surface-1: var(--flavor-red-bold-11); --surface-2: var(--flavor-red-bold-12); --surface-3: var(--flavor-red-bold-12); --surface-tint: var(--flavor-red-bold-9); --text-primary: var(--flavor-red-bold-1); --text-secondary: var(--flavor-red-bold-2); --text-tertiary: var(--flavor-red-bold-3); --text-disabled: var(--flavor-red-bold-7); --border-subtle: var(--flavor-red-bold-9); --border-default: var(--flavor-red-bold-8); --border-strong: var(--flavor-red-bold-7); --border-interactive: var(--flavor-red-bold-7); --accent-subtle: var(--flavor-red-bold-11); --accent-subtle-hover: var(--flavor-red-bold-10); --accent-border: var(--flavor-red-bold-9); --focus-ring: var(--flavor-red-bold-7); --accent-bg: var(--flavor-red-bold-7); --accent-bg-hover: var(--flavor-red-bold-6); --accent-bg-active: var(--flavor-red-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-red-bold-2); --text-on-accent-subtle: var(--flavor-red-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-red-bold-11); --success-border: var(--flavor-red-bold-9); --success-text: var(--flavor-red-bold-1); --success-solid: var(--flavor-red-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-red-bold-11); --warning-border: var(--flavor-red-bold-9); --warning-text: var(--flavor-red-bold-1); --warning-solid: var(--flavor-red-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-bold-11); --danger-border: var(--flavor-red-bold-9); --danger-text: var(--flavor-red-bold-1); --danger-solid: var(--flavor-red-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-red-bold-11); --info-border: var(--flavor-red-bold-9); --info-text: var(--flavor-red-bold-1); --info-solid: var(--flavor-red-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-muted-10); --surface-1: var(--flavor-scarlet-muted-11); --surface-2: var(--flavor-scarlet-muted-12); --surface-3: var(--flavor-scarlet-muted-12); --surface-tint: var(--flavor-scarlet-muted-9); --text-primary: var(--flavor-scarlet-muted-1); --text-secondary: var(--flavor-scarlet-muted-2); --text-tertiary: var(--flavor-scarlet-muted-3); --text-disabled: var(--flavor-scarlet-muted-7); --border-subtle: var(--flavor-scarlet-muted-9); --border-default: var(--flavor-scarlet-muted-8); --border-strong: var(--flavor-scarlet-muted-7); --border-interactive: var(--flavor-scarlet-muted-7); --accent-subtle: var(--flavor-scarlet-muted-11); --accent-subtle-hover: var(--flavor-scarlet-muted-10); --accent-border: var(--flavor-scarlet-muted-9); --focus-ring: var(--flavor-scarlet-muted-7); --accent-bg: var(--flavor-scarlet-muted-7); --accent-bg-hover: var(--flavor-scarlet-muted-6); --accent-bg-active: var(--flavor-scarlet-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-muted-2); --text-on-accent-subtle: var(--flavor-scarlet-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-scarlet-muted-11); --success-border: var(--flavor-scarlet-muted-9); --success-text: var(--flavor-scarlet-muted-1); --success-solid: var(--flavor-scarlet-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-muted-11); --warning-border: var(--flavor-scarlet-muted-9); --warning-text: var(--flavor-scarlet-muted-1); --warning-solid: var(--flavor-scarlet-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-muted-11); --danger-border: var(--flavor-scarlet-muted-9); --danger-text: var(--flavor-scarlet-muted-1); --danger-solid: var(--flavor-scarlet-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-muted-11); --info-border: var(--flavor-scarlet-muted-9); --info-text: var(--flavor-scarlet-muted-1); --info-solid: var(--flavor-scarlet-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-regular-10); --surface-1: var(--flavor-scarlet-regular-11); --surface-2: var(--flavor-scarlet-regular-12); --surface-3: var(--flavor-scarlet-regular-12); --surface-tint: var(--flavor-scarlet-regular-9); --text-primary: var(--flavor-scarlet-regular-1); --text-secondary: var(--flavor-scarlet-regular-2); --text-tertiary: var(--flavor-scarlet-regular-3); --text-disabled: var(--flavor-scarlet-regular-7); --border-subtle: var(--flavor-scarlet-regular-9); --border-default: var(--flavor-scarlet-regular-8); --border-strong: var(--flavor-scarlet-regular-7); --border-interactive: var(--flavor-scarlet-regular-7); --accent-subtle: var(--flavor-scarlet-regular-11); --accent-subtle-hover: var(--flavor-scarlet-regular-10); --accent-border: var(--flavor-scarlet-regular-9); --focus-ring: var(--flavor-scarlet-regular-7); --accent-bg: var(--flavor-scarlet-regular-7); --accent-bg-hover: var(--flavor-scarlet-regular-6); --accent-bg-active: var(--flavor-scarlet-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-regular-2); --text-on-accent-subtle: var(--flavor-scarlet-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-scarlet-regular-11); --success-border: var(--flavor-scarlet-regular-9); --success-text: var(--flavor-scarlet-regular-1); --success-solid: var(--flavor-scarlet-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-regular-11); --warning-border: var(--flavor-scarlet-regular-9); --warning-text: var(--flavor-scarlet-regular-1); --warning-solid: var(--flavor-scarlet-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-regular-11); --danger-border: var(--flavor-scarlet-regular-9); --danger-text: var(--flavor-scarlet-regular-1); --danger-solid: var(--flavor-scarlet-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-regular-11); --info-border: var(--flavor-scarlet-regular-9); --info-text: var(--flavor-scarlet-regular-1); --info-solid: var(--flavor-scarlet-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-scarlet-bold-10); --surface-1: var(--flavor-scarlet-bold-11); --surface-2: var(--flavor-scarlet-bold-12); --surface-3: var(--flavor-scarlet-bold-12); --surface-tint: var(--flavor-scarlet-bold-9); --text-primary: var(--flavor-scarlet-bold-1); --text-secondary: var(--flavor-scarlet-bold-2); --text-tertiary: var(--flavor-scarlet-bold-3); --text-disabled: var(--flavor-scarlet-bold-7); --border-subtle: var(--flavor-scarlet-bold-9); --border-default: var(--flavor-scarlet-bold-8); --border-strong: var(--flavor-scarlet-bold-7); --border-interactive: var(--flavor-scarlet-bold-7); --accent-subtle: var(--flavor-scarlet-bold-11); --accent-subtle-hover: var(--flavor-scarlet-bold-10); --accent-border: var(--flavor-scarlet-bold-9); --focus-ring: var(--flavor-scarlet-bold-7); --accent-bg: var(--flavor-scarlet-bold-7); --accent-bg-hover: var(--flavor-scarlet-bold-6); --accent-bg-active: var(--flavor-scarlet-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-scarlet-bold-2); --text-on-accent-subtle: var(--flavor-scarlet-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-scarlet-bold-11); --success-border: var(--flavor-scarlet-bold-9); --success-text: var(--flavor-scarlet-bold-1); --success-solid: var(--flavor-scarlet-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-scarlet-bold-11); --warning-border: var(--flavor-scarlet-bold-9); --warning-text: var(--flavor-scarlet-bold-1); --warning-solid: var(--flavor-scarlet-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-scarlet-bold-11); --danger-border: var(--flavor-scarlet-bold-9); --danger-text: var(--flavor-scarlet-bold-1); --danger-solid: var(--flavor-scarlet-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-scarlet-bold-11); --info-border: var(--flavor-scarlet-bold-9); --info-text: var(--flavor-scarlet-bold-1); --info-solid: var(--flavor-scarlet-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-orange-muted-10); --surface-1: var(--flavor-orange-muted-11); --surface-2: var(--flavor-orange-muted-12); --surface-3: var(--flavor-orange-muted-12); --surface-tint: var(--flavor-orange-muted-9); --text-primary: var(--flavor-orange-muted-1); --text-secondary: var(--flavor-orange-muted-2); --text-tertiary: var(--flavor-orange-muted-3); --text-disabled: var(--flavor-orange-muted-7); --border-subtle: var(--flavor-orange-muted-9); --border-default: var(--flavor-orange-muted-8); --border-strong: var(--flavor-orange-muted-7); --border-interactive: var(--flavor-orange-muted-7); --accent-subtle: var(--flavor-orange-muted-11); --accent-subtle-hover: var(--flavor-orange-muted-10); --accent-border: var(--flavor-orange-muted-9); --focus-ring: var(--flavor-orange-muted-7); --accent-bg: var(--flavor-orange-muted-7); --accent-bg-hover: var(--flavor-orange-muted-6); --accent-bg-active: var(--flavor-orange-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-muted-2); --text-on-accent-subtle: var(--flavor-orange-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-orange-muted-11); --success-border: var(--flavor-orange-muted-9); --success-text: var(--flavor-orange-muted-1); --success-solid: var(--flavor-orange-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-muted-11); --warning-border: var(--flavor-orange-muted-9); --warning-text: var(--flavor-orange-muted-1); --warning-solid: var(--flavor-orange-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-muted-11); --danger-border: var(--flavor-orange-muted-9); --danger-text: var(--flavor-orange-muted-1); --danger-solid: var(--flavor-orange-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-muted-11); --info-border: var(--flavor-orange-muted-9); --info-text: var(--flavor-orange-muted-1); --info-solid: var(--flavor-orange-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-orange-regular-10); --surface-1: var(--flavor-orange-regular-11); --surface-2: var(--flavor-orange-regular-12); --surface-3: var(--flavor-orange-regular-12); --surface-tint: var(--flavor-orange-regular-9); --text-primary: var(--flavor-orange-regular-1); --text-secondary: var(--flavor-orange-regular-2); --text-tertiary: var(--flavor-orange-regular-3); --text-disabled: var(--flavor-orange-regular-7); --border-subtle: var(--flavor-orange-regular-9); --border-default: var(--flavor-orange-regular-8); --border-strong: var(--flavor-orange-regular-7); --border-interactive: var(--flavor-orange-regular-7); --accent-subtle: var(--flavor-orange-regular-11); --accent-subtle-hover: var(--flavor-orange-regular-10); --accent-border: var(--flavor-orange-regular-9); --focus-ring: var(--flavor-orange-regular-7); --accent-bg: var(--flavor-orange-regular-7); --accent-bg-hover: var(--flavor-orange-regular-6); --accent-bg-active: var(--flavor-orange-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-regular-2); --text-on-accent-subtle: var(--flavor-orange-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-orange-regular-11); --success-border: var(--flavor-orange-regular-9); --success-text: var(--flavor-orange-regular-1); --success-solid: var(--flavor-orange-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-11); --warning-border: var(--flavor-orange-regular-9); --warning-text: var(--flavor-orange-regular-1); --warning-solid: var(--flavor-orange-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-regular-11); --danger-border: var(--flavor-orange-regular-9); --danger-text: var(--flavor-orange-regular-1); --danger-solid: var(--flavor-orange-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-regular-11); --info-border: var(--flavor-orange-regular-9); --info-text: var(--flavor-orange-regular-1); --info-solid: var(--flavor-orange-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-orange-bold-10); --surface-1: var(--flavor-orange-bold-11); --surface-2: var(--flavor-orange-bold-12); --surface-3: var(--flavor-orange-bold-12); --surface-tint: var(--flavor-orange-bold-9); --text-primary: var(--flavor-orange-bold-1); --text-secondary: var(--flavor-orange-bold-2); --text-tertiary: var(--flavor-orange-bold-3); --text-disabled: var(--flavor-orange-bold-7); --border-subtle: var(--flavor-orange-bold-9); --border-default: var(--flavor-orange-bold-8); --border-strong: var(--flavor-orange-bold-7); --border-interactive: var(--flavor-orange-bold-7); --accent-subtle: var(--flavor-orange-bold-11); --accent-subtle-hover: var(--flavor-orange-bold-10); --accent-border: var(--flavor-orange-bold-9); --focus-ring: var(--flavor-orange-bold-7); --accent-bg: var(--flavor-orange-bold-7); --accent-bg-hover: var(--flavor-orange-bold-6); --accent-bg-active: var(--flavor-orange-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-orange-bold-2); --text-on-accent-subtle: var(--flavor-orange-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-orange-bold-11); --success-border: var(--flavor-orange-bold-9); --success-text: var(--flavor-orange-bold-1); --success-solid: var(--flavor-orange-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-bold-11); --warning-border: var(--flavor-orange-bold-9); --warning-text: var(--flavor-orange-bold-1); --warning-solid: var(--flavor-orange-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-orange-bold-11); --danger-border: var(--flavor-orange-bold-9); --danger-text: var(--flavor-orange-bold-1); --danger-solid: var(--flavor-orange-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-orange-bold-11); --info-border: var(--flavor-orange-bold-9); --info-text: var(--flavor-orange-bold-1); --info-solid: var(--flavor-orange-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-muted-10); --surface-1: var(--flavor-tangerine-muted-11); --surface-2: var(--flavor-tangerine-muted-12); --surface-3: var(--flavor-tangerine-muted-12); --surface-tint: var(--flavor-tangerine-muted-9); --text-primary: var(--flavor-tangerine-muted-1); --text-secondary: var(--flavor-tangerine-muted-2); --text-tertiary: var(--flavor-tangerine-muted-3); --text-disabled: var(--flavor-tangerine-muted-7); --border-subtle: var(--flavor-tangerine-muted-9); --border-default: var(--flavor-tangerine-muted-8); --border-strong: var(--flavor-tangerine-muted-7); --border-interactive: var(--flavor-tangerine-muted-7); --accent-subtle: var(--flavor-tangerine-muted-11); --accent-subtle-hover: var(--flavor-tangerine-muted-10); --accent-border: var(--flavor-tangerine-muted-9); --focus-ring: var(--flavor-tangerine-muted-7); --accent-bg: var(--flavor-tangerine-muted-7); --accent-bg-hover: var(--flavor-tangerine-muted-6); --accent-bg-active: var(--flavor-tangerine-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-muted-2); --text-on-accent-subtle: var(--flavor-tangerine-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-tangerine-muted-11); --success-border: var(--flavor-tangerine-muted-9); --success-text: var(--flavor-tangerine-muted-1); --success-solid: var(--flavor-tangerine-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-muted-11); --warning-border: var(--flavor-tangerine-muted-9); --warning-text: var(--flavor-tangerine-muted-1); --warning-solid: var(--flavor-tangerine-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-muted-11); --danger-border: var(--flavor-tangerine-muted-9); --danger-text: var(--flavor-tangerine-muted-1); --danger-solid: var(--flavor-tangerine-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-muted-11); --info-border: var(--flavor-tangerine-muted-9); --info-text: var(--flavor-tangerine-muted-1); --info-solid: var(--flavor-tangerine-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-regular-10); --surface-1: var(--flavor-tangerine-regular-11); --surface-2: var(--flavor-tangerine-regular-12); --surface-3: var(--flavor-tangerine-regular-12); --surface-tint: var(--flavor-tangerine-regular-9); --text-primary: var(--flavor-tangerine-regular-1); --text-secondary: var(--flavor-tangerine-regular-2); --text-tertiary: var(--flavor-tangerine-regular-3); --text-disabled: var(--flavor-tangerine-regular-7); --border-subtle: var(--flavor-tangerine-regular-9); --border-default: var(--flavor-tangerine-regular-8); --border-strong: var(--flavor-tangerine-regular-7); --border-interactive: var(--flavor-tangerine-regular-7); --accent-subtle: var(--flavor-tangerine-regular-11); --accent-subtle-hover: var(--flavor-tangerine-regular-10); --accent-border: var(--flavor-tangerine-regular-9); --focus-ring: var(--flavor-tangerine-regular-7); --accent-bg: var(--flavor-tangerine-regular-7); --accent-bg-hover: var(--flavor-tangerine-regular-6); --accent-bg-active: var(--flavor-tangerine-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-regular-2); --text-on-accent-subtle: var(--flavor-tangerine-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-tangerine-regular-11); --success-border: var(--flavor-tangerine-regular-9); --success-text: var(--flavor-tangerine-regular-1); --success-solid: var(--flavor-tangerine-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-regular-11); --warning-border: var(--flavor-tangerine-regular-9); --warning-text: var(--flavor-tangerine-regular-1); --warning-solid: var(--flavor-tangerine-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-regular-11); --danger-border: var(--flavor-tangerine-regular-9); --danger-text: var(--flavor-tangerine-regular-1); --danger-solid: var(--flavor-tangerine-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-regular-11); --info-border: var(--flavor-tangerine-regular-9); --info-text: var(--flavor-tangerine-regular-1); --info-solid: var(--flavor-tangerine-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-tangerine-bold-10); --surface-1: var(--flavor-tangerine-bold-11); --surface-2: var(--flavor-tangerine-bold-12); --surface-3: var(--flavor-tangerine-bold-12); --surface-tint: var(--flavor-tangerine-bold-9); --text-primary: var(--flavor-tangerine-bold-1); --text-secondary: var(--flavor-tangerine-bold-2); --text-tertiary: var(--flavor-tangerine-bold-3); --text-disabled: var(--flavor-tangerine-bold-7); --border-subtle: var(--flavor-tangerine-bold-9); --border-default: var(--flavor-tangerine-bold-8); --border-strong: var(--flavor-tangerine-bold-7); --border-interactive: var(--flavor-tangerine-bold-7); --accent-subtle: var(--flavor-tangerine-bold-11); --accent-subtle-hover: var(--flavor-tangerine-bold-10); --accent-border: var(--flavor-tangerine-bold-9); --focus-ring: var(--flavor-tangerine-bold-7); --accent-bg: var(--flavor-tangerine-bold-7); --accent-bg-hover: var(--flavor-tangerine-bold-6); --accent-bg-active: var(--flavor-tangerine-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-tangerine-bold-2); --text-on-accent-subtle: var(--flavor-tangerine-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-tangerine-bold-11); --success-border: var(--flavor-tangerine-bold-9); --success-text: var(--flavor-tangerine-bold-1); --success-solid: var(--flavor-tangerine-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-tangerine-bold-11); --warning-border: var(--flavor-tangerine-bold-9); --warning-text: var(--flavor-tangerine-bold-1); --warning-solid: var(--flavor-tangerine-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-tangerine-bold-11); --danger-border: var(--flavor-tangerine-bold-9); --danger-text: var(--flavor-tangerine-bold-1); --danger-solid: var(--flavor-tangerine-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-tangerine-bold-11); --info-border: var(--flavor-tangerine-bold-9); --info-text: var(--flavor-tangerine-bold-1); --info-solid: var(--flavor-tangerine-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-yellow-muted-10); --surface-1: var(--flavor-yellow-muted-11); --surface-2: var(--flavor-yellow-muted-12); --surface-3: var(--flavor-yellow-muted-12); --surface-tint: var(--flavor-yellow-muted-9); --text-primary: var(--flavor-yellow-muted-1); --text-secondary: var(--flavor-yellow-muted-2); --text-tertiary: var(--flavor-yellow-muted-3); --text-disabled: var(--flavor-yellow-muted-7); --border-subtle: var(--flavor-yellow-muted-9); --border-default: var(--flavor-yellow-muted-8); --border-strong: var(--flavor-yellow-muted-7); --border-interactive: var(--flavor-yellow-muted-7); --accent-subtle: var(--flavor-yellow-muted-11); --accent-subtle-hover: var(--flavor-yellow-muted-10); --accent-border: var(--flavor-yellow-muted-9); --focus-ring: var(--flavor-yellow-muted-7); --accent-bg: var(--flavor-yellow-muted-7); --accent-bg-hover: var(--flavor-yellow-muted-6); --accent-bg-active: var(--flavor-yellow-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-muted-2); --text-on-accent-subtle: var(--flavor-yellow-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-yellow-muted-11); --success-border: var(--flavor-yellow-muted-9); --success-text: var(--flavor-yellow-muted-1); --success-solid: var(--flavor-yellow-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-muted-11); --warning-border: var(--flavor-yellow-muted-9); --warning-text: var(--flavor-yellow-muted-1); --warning-solid: var(--flavor-yellow-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-muted-11); --danger-border: var(--flavor-yellow-muted-9); --danger-text: var(--flavor-yellow-muted-1); --danger-solid: var(--flavor-yellow-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-muted-11); --info-border: var(--flavor-yellow-muted-9); --info-text: var(--flavor-yellow-muted-1); --info-solid: var(--flavor-yellow-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-yellow-regular-10); --surface-1: var(--flavor-yellow-regular-11); --surface-2: var(--flavor-yellow-regular-12); --surface-3: var(--flavor-yellow-regular-12); --surface-tint: var(--flavor-yellow-regular-9); --text-primary: var(--flavor-yellow-regular-1); --text-secondary: var(--flavor-yellow-regular-2); --text-tertiary: var(--flavor-yellow-regular-3); --text-disabled: var(--flavor-yellow-regular-7); --border-subtle: var(--flavor-yellow-regular-9); --border-default: var(--flavor-yellow-regular-8); --border-strong: var(--flavor-yellow-regular-7); --border-interactive: var(--flavor-yellow-regular-7); --accent-subtle: var(--flavor-yellow-regular-11); --accent-subtle-hover: var(--flavor-yellow-regular-10); --accent-border: var(--flavor-yellow-regular-9); --focus-ring: var(--flavor-yellow-regular-7); --accent-bg: var(--flavor-yellow-regular-7); --accent-bg-hover: var(--flavor-yellow-regular-6); --accent-bg-active: var(--flavor-yellow-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-regular-2); --text-on-accent-subtle: var(--flavor-yellow-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-yellow-regular-11); --success-border: var(--flavor-yellow-regular-9); --success-text: var(--flavor-yellow-regular-1); --success-solid: var(--flavor-yellow-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-regular-11); --warning-border: var(--flavor-yellow-regular-9); --warning-text: var(--flavor-yellow-regular-1); --warning-solid: var(--flavor-yellow-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-regular-11); --danger-border: var(--flavor-yellow-regular-9); --danger-text: var(--flavor-yellow-regular-1); --danger-solid: var(--flavor-yellow-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-regular-11); --info-border: var(--flavor-yellow-regular-9); --info-text: var(--flavor-yellow-regular-1); --info-solid: var(--flavor-yellow-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-yellow-bold-11); --surface-1: var(--flavor-yellow-bold-12); --surface-2: var(--flavor-yellow-bold-12); --surface-3: var(--flavor-yellow-bold-12); --surface-tint: var(--flavor-yellow-bold-10); --text-primary: var(--flavor-yellow-bold-1); --text-secondary: var(--flavor-yellow-bold-2); --text-tertiary: var(--flavor-yellow-bold-3); --text-disabled: var(--flavor-yellow-bold-8); --border-subtle: var(--flavor-yellow-bold-10); --border-default: var(--flavor-yellow-bold-9); --border-strong: var(--flavor-yellow-bold-8); --border-interactive: var(--flavor-yellow-bold-8); --accent-subtle: var(--flavor-yellow-bold-11); --accent-subtle-hover: var(--flavor-yellow-bold-10); --accent-border: var(--flavor-yellow-bold-9); --focus-ring: var(--flavor-yellow-bold-8); --accent-bg: var(--flavor-yellow-bold-7); --accent-bg-hover: var(--flavor-yellow-bold-6); --accent-bg-active: var(--flavor-yellow-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-yellow-bold-2); --text-on-accent-subtle: var(--flavor-yellow-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-yellow-bold-11); --success-border: var(--flavor-yellow-bold-9); --success-text: var(--flavor-yellow-bold-1); --success-solid: var(--flavor-yellow-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-yellow-bold-11); --warning-border: var(--flavor-yellow-bold-9); --warning-text: var(--flavor-yellow-bold-1); --warning-solid: var(--flavor-yellow-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-yellow-bold-11); --danger-border: var(--flavor-yellow-bold-9); --danger-text: var(--flavor-yellow-bold-1); --danger-solid: var(--flavor-yellow-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-yellow-bold-11); --info-border: var(--flavor-yellow-bold-9); --info-text: var(--flavor-yellow-bold-1); --info-solid: var(--flavor-yellow-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-lime-muted-10); --surface-1: var(--flavor-lime-muted-11); --surface-2: var(--flavor-lime-muted-12); --surface-3: var(--flavor-lime-muted-12); --surface-tint: var(--flavor-lime-muted-9); --text-primary: var(--flavor-lime-muted-1); --text-secondary: var(--flavor-lime-muted-2); --text-tertiary: var(--flavor-lime-muted-3); --text-disabled: var(--flavor-lime-muted-7); --border-subtle: var(--flavor-lime-muted-9); --border-default: var(--flavor-lime-muted-8); --border-strong: var(--flavor-lime-muted-7); --border-interactive: var(--flavor-lime-muted-7); --accent-subtle: var(--flavor-lime-muted-11); --accent-subtle-hover: var(--flavor-lime-muted-10); --accent-border: var(--flavor-lime-muted-9); --focus-ring: var(--flavor-lime-muted-7); --accent-bg: var(--flavor-lime-muted-7); --accent-bg-hover: var(--flavor-lime-muted-6); --accent-bg-active: var(--flavor-lime-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-muted-2); --text-on-accent-subtle: var(--flavor-lime-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-lime-muted-11); --success-border: var(--flavor-lime-muted-9); --success-text: var(--flavor-lime-muted-1); --success-solid: var(--flavor-lime-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-muted-11); --warning-border: var(--flavor-lime-muted-9); --warning-text: var(--flavor-lime-muted-1); --warning-solid: var(--flavor-lime-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-muted-11); --danger-border: var(--flavor-lime-muted-9); --danger-text: var(--flavor-lime-muted-1); --danger-solid: var(--flavor-lime-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-muted-11); --info-border: var(--flavor-lime-muted-9); --info-text: var(--flavor-lime-muted-1); --info-solid: var(--flavor-lime-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-lime-regular-9); --surface-1: var(--flavor-lime-regular-10); --surface-2: var(--flavor-lime-regular-11); --surface-3: var(--flavor-lime-regular-11); --surface-tint: var(--flavor-lime-regular-8); --text-primary: var(--flavor-lime-regular-1); --text-secondary: var(--flavor-lime-regular-1); --text-tertiary: var(--flavor-lime-regular-1); --text-disabled: var(--flavor-lime-regular-6); --border-subtle: var(--flavor-lime-regular-8); --border-default: var(--flavor-lime-regular-7); --border-strong: var(--flavor-lime-regular-6); --border-interactive: var(--flavor-lime-regular-6); --accent-subtle: var(--flavor-lime-regular-11); --accent-subtle-hover: var(--flavor-lime-regular-10); --accent-border: var(--flavor-lime-regular-9); --focus-ring: var(--flavor-lime-regular-6); --accent-bg: var(--flavor-lime-regular-6); --accent-bg-hover: var(--flavor-lime-regular-5); --accent-bg-active: var(--flavor-lime-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-regular-1); --text-on-accent-subtle: var(--flavor-lime-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-lime-regular-11); --success-border: var(--flavor-lime-regular-9); --success-text: var(--flavor-lime-regular-1); --success-solid: var(--flavor-lime-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-regular-11); --warning-border: var(--flavor-lime-regular-9); --warning-text: var(--flavor-lime-regular-1); --warning-solid: var(--flavor-lime-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-regular-11); --danger-border: var(--flavor-lime-regular-9); --danger-text: var(--flavor-lime-regular-1); --danger-solid: var(--flavor-lime-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-regular-11); --info-border: var(--flavor-lime-regular-9); --info-text: var(--flavor-lime-regular-1); --info-solid: var(--flavor-lime-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-lime-bold-11); --surface-1: var(--flavor-lime-bold-12); --surface-2: var(--flavor-lime-bold-12); --surface-3: var(--flavor-lime-bold-12); --surface-tint: var(--flavor-lime-bold-10); --text-primary: var(--flavor-lime-bold-1); --text-secondary: var(--flavor-lime-bold-2); --text-tertiary: var(--flavor-lime-bold-3); --text-disabled: var(--flavor-lime-bold-8); --border-subtle: var(--flavor-lime-bold-10); --border-default: var(--flavor-lime-bold-9); --border-strong: var(--flavor-lime-bold-8); --border-interactive: var(--flavor-lime-bold-8); --accent-subtle: var(--flavor-lime-bold-11); --accent-subtle-hover: var(--flavor-lime-bold-10); --accent-border: var(--flavor-lime-bold-9); --focus-ring: var(--flavor-lime-bold-8); --accent-bg: var(--flavor-lime-bold-7); --accent-bg-hover: var(--flavor-lime-bold-6); --accent-bg-active: var(--flavor-lime-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-lime-bold-2); --text-on-accent-subtle: var(--flavor-lime-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-lime-bold-11); --success-border: var(--flavor-lime-bold-9); --success-text: var(--flavor-lime-bold-1); --success-solid: var(--flavor-lime-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-lime-bold-11); --warning-border: var(--flavor-lime-bold-9); --warning-text: var(--flavor-lime-bold-1); --warning-solid: var(--flavor-lime-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-lime-bold-11); --danger-border: var(--flavor-lime-bold-9); --danger-text: var(--flavor-lime-bold-1); --danger-solid: var(--flavor-lime-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-lime-bold-11); --info-border: var(--flavor-lime-bold-9); --info-text: var(--flavor-lime-bold-1); --info-solid: var(--flavor-lime-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-green-muted-9); --surface-1: var(--flavor-green-muted-10); --surface-2: var(--flavor-green-muted-11); --surface-3: var(--flavor-green-muted-11); --surface-tint: var(--flavor-green-muted-8); --text-primary: var(--flavor-green-muted-1); --text-secondary: var(--flavor-green-muted-1); --text-tertiary: var(--flavor-green-muted-1); --text-disabled: var(--flavor-green-muted-6); --border-subtle: var(--flavor-green-muted-8); --border-default: var(--flavor-green-muted-7); --border-strong: var(--flavor-green-muted-6); --border-interactive: var(--flavor-green-muted-6); --accent-subtle: var(--flavor-green-muted-11); --accent-subtle-hover: var(--flavor-green-muted-10); --accent-border: var(--flavor-green-muted-9); --focus-ring: var(--flavor-green-muted-6); --accent-bg: var(--flavor-green-muted-6); --accent-bg-hover: var(--flavor-green-muted-5); --accent-bg-active: var(--flavor-green-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-muted-1); --text-on-accent-subtle: var(--flavor-green-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-green-muted-11); --success-border: var(--flavor-green-muted-9); --success-text: var(--flavor-green-muted-1); --success-solid: var(--flavor-green-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-muted-11); --warning-border: var(--flavor-green-muted-9); --warning-text: var(--flavor-green-muted-1); --warning-solid: var(--flavor-green-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-muted-11); --danger-border: var(--flavor-green-muted-9); --danger-text: var(--flavor-green-muted-1); --danger-solid: var(--flavor-green-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-muted-11); --info-border: var(--flavor-green-muted-9); --info-text: var(--flavor-green-muted-1); --info-solid: var(--flavor-green-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-green-regular-9); --surface-1: var(--flavor-green-regular-10); --surface-2: var(--flavor-green-regular-11); --surface-3: var(--flavor-green-regular-11); --surface-tint: var(--flavor-green-regular-8); --text-primary: var(--flavor-green-regular-1); --text-secondary: var(--flavor-green-regular-1); --text-tertiary: var(--flavor-green-regular-1); --text-disabled: var(--flavor-green-regular-6); --border-subtle: var(--flavor-green-regular-8); --border-default: var(--flavor-green-regular-7); --border-strong: var(--flavor-green-regular-6); --border-interactive: var(--flavor-green-regular-6); --accent-subtle: var(--flavor-green-regular-11); --accent-subtle-hover: var(--flavor-green-regular-10); --accent-border: var(--flavor-green-regular-9); --focus-ring: var(--flavor-green-regular-6); --accent-bg: var(--flavor-green-regular-6); --accent-bg-hover: var(--flavor-green-regular-5); --accent-bg-active: var(--flavor-green-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-regular-1); --text-on-accent-subtle: var(--flavor-green-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-green-regular-11); --success-border: var(--flavor-green-regular-9); --success-text: var(--flavor-green-regular-1); --success-solid: var(--flavor-green-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-regular-11); --warning-border: var(--flavor-green-regular-9); --warning-text: var(--flavor-green-regular-1); --warning-solid: var(--flavor-green-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-regular-11); --danger-border: var(--flavor-green-regular-9); --danger-text: var(--flavor-green-regular-1); --danger-solid: var(--flavor-green-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-regular-11); --info-border: var(--flavor-green-regular-9); --info-text: var(--flavor-green-regular-1); --info-solid: var(--flavor-green-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-green-bold-10); --surface-1: var(--flavor-green-bold-11); --surface-2: var(--flavor-green-bold-12); --surface-3: var(--flavor-green-bold-12); --surface-tint: var(--flavor-green-bold-9); --text-primary: var(--flavor-green-bold-1); --text-secondary: var(--flavor-green-bold-2); --text-tertiary: var(--flavor-green-bold-3); --text-disabled: var(--flavor-green-bold-7); --border-subtle: var(--flavor-green-bold-9); --border-default: var(--flavor-green-bold-8); --border-strong: var(--flavor-green-bold-7); --border-interactive: var(--flavor-green-bold-7); --accent-subtle: var(--flavor-green-bold-11); --accent-subtle-hover: var(--flavor-green-bold-10); --accent-border: var(--flavor-green-bold-9); --focus-ring: var(--flavor-green-bold-7); --accent-bg: var(--flavor-green-bold-7); --accent-bg-hover: var(--flavor-green-bold-6); --accent-bg-active: var(--flavor-green-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-green-bold-2); --text-on-accent-subtle: var(--flavor-green-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-green-bold-11); --success-border: var(--flavor-green-bold-9); --success-text: var(--flavor-green-bold-1); --success-solid: var(--flavor-green-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-green-bold-11); --warning-border: var(--flavor-green-bold-9); --warning-text: var(--flavor-green-bold-1); --warning-solid: var(--flavor-green-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-green-bold-11); --danger-border: var(--flavor-green-bold-9); --danger-text: var(--flavor-green-bold-1); --danger-solid: var(--flavor-green-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-green-bold-11); --info-border: var(--flavor-green-bold-9); --info-text: var(--flavor-green-bold-1); --info-solid: var(--flavor-green-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-teal-muted-10); --surface-1: var(--flavor-teal-muted-11); --surface-2: var(--flavor-teal-muted-12); --surface-3: var(--flavor-teal-muted-12); --surface-tint: var(--flavor-teal-muted-9); --text-primary: var(--flavor-teal-muted-1); --text-secondary: var(--flavor-teal-muted-2); --text-tertiary: var(--flavor-teal-muted-3); --text-disabled: var(--flavor-teal-muted-7); --border-subtle: var(--flavor-teal-muted-9); --border-default: var(--flavor-teal-muted-8); --border-strong: var(--flavor-teal-muted-7); --border-interactive: var(--flavor-teal-muted-7); --accent-subtle: var(--flavor-teal-muted-11); --accent-subtle-hover: var(--flavor-teal-muted-10); --accent-border: var(--flavor-teal-muted-9); --focus-ring: var(--flavor-teal-muted-7); --accent-bg: var(--flavor-teal-muted-6); --accent-bg-hover: var(--flavor-teal-muted-5); --accent-bg-active: var(--flavor-teal-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-muted-2); --text-on-accent-subtle: var(--flavor-teal-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-teal-muted-11); --success-border: var(--flavor-teal-muted-9); --success-text: var(--flavor-teal-muted-1); --success-solid: var(--flavor-teal-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-muted-11); --warning-border: var(--flavor-teal-muted-9); --warning-text: var(--flavor-teal-muted-1); --warning-solid: var(--flavor-teal-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-muted-11); --danger-border: var(--flavor-teal-muted-9); --danger-text: var(--flavor-teal-muted-1); --danger-solid: var(--flavor-teal-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-muted-11); --info-border: var(--flavor-teal-muted-9); --info-text: var(--flavor-teal-muted-1); --info-solid: var(--flavor-teal-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-teal-regular-10); --surface-1: var(--flavor-teal-regular-11); --surface-2: var(--flavor-teal-regular-12); --surface-3: var(--flavor-teal-regular-12); --surface-tint: var(--flavor-teal-regular-9); --text-primary: var(--flavor-teal-regular-1); --text-secondary: var(--flavor-teal-regular-2); --text-tertiary: var(--flavor-teal-regular-3); --text-disabled: var(--flavor-teal-regular-7); --border-subtle: var(--flavor-teal-regular-9); --border-default: var(--flavor-teal-regular-8); --border-strong: var(--flavor-teal-regular-7); --border-interactive: var(--flavor-teal-regular-7); --accent-subtle: var(--flavor-teal-regular-11); --accent-subtle-hover: var(--flavor-teal-regular-10); --accent-border: var(--flavor-teal-regular-9); --focus-ring: var(--flavor-teal-regular-7); --accent-bg: var(--flavor-teal-regular-7); --accent-bg-hover: var(--flavor-teal-regular-6); --accent-bg-active: var(--flavor-teal-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-regular-2); --text-on-accent-subtle: var(--flavor-teal-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-teal-regular-11); --success-border: var(--flavor-teal-regular-9); --success-text: var(--flavor-teal-regular-1); --success-solid: var(--flavor-teal-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-regular-11); --warning-border: var(--flavor-teal-regular-9); --warning-text: var(--flavor-teal-regular-1); --warning-solid: var(--flavor-teal-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-regular-11); --danger-border: var(--flavor-teal-regular-9); --danger-text: var(--flavor-teal-regular-1); --danger-solid: var(--flavor-teal-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-regular-11); --info-border: var(--flavor-teal-regular-9); --info-text: var(--flavor-teal-regular-1); --info-solid: var(--flavor-teal-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-teal-bold-11); --surface-1: var(--flavor-teal-bold-12); --surface-2: var(--flavor-teal-bold-12); --surface-3: var(--flavor-teal-bold-12); --surface-tint: var(--flavor-teal-bold-10); --text-primary: var(--flavor-teal-bold-1); --text-secondary: var(--flavor-teal-bold-2); --text-tertiary: var(--flavor-teal-bold-3); --text-disabled: var(--flavor-teal-bold-8); --border-subtle: var(--flavor-teal-bold-10); --border-default: var(--flavor-teal-bold-9); --border-strong: var(--flavor-teal-bold-8); --border-interactive: var(--flavor-teal-bold-8); --accent-subtle: var(--flavor-teal-bold-11); --accent-subtle-hover: var(--flavor-teal-bold-10); --accent-border: var(--flavor-teal-bold-9); --focus-ring: var(--flavor-teal-bold-8); --accent-bg: var(--flavor-teal-bold-7); --accent-bg-hover: var(--flavor-teal-bold-6); --accent-bg-active: var(--flavor-teal-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-teal-bold-2); --text-on-accent-subtle: var(--flavor-teal-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-teal-bold-11); --success-border: var(--flavor-teal-bold-9); --success-text: var(--flavor-teal-bold-1); --success-solid: var(--flavor-teal-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-teal-bold-11); --warning-border: var(--flavor-teal-bold-9); --warning-text: var(--flavor-teal-bold-1); --warning-solid: var(--flavor-teal-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-teal-bold-11); --danger-border: var(--flavor-teal-bold-9); --danger-text: var(--flavor-teal-bold-1); --danger-solid: var(--flavor-teal-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-teal-bold-11); --info-border: var(--flavor-teal-bold-9); --info-text: var(--flavor-teal-bold-1); --info-solid: var(--flavor-teal-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-cyan-muted-10); --surface-1: var(--flavor-cyan-muted-11); --surface-2: var(--flavor-cyan-muted-12); --surface-3: var(--flavor-cyan-muted-12); --surface-tint: var(--flavor-cyan-muted-9); --text-primary: var(--flavor-cyan-muted-1); --text-secondary: var(--flavor-cyan-muted-2); --text-tertiary: var(--flavor-cyan-muted-3); --text-disabled: var(--flavor-cyan-muted-7); --border-subtle: var(--flavor-cyan-muted-9); --border-default: var(--flavor-cyan-muted-8); --border-strong: var(--flavor-cyan-muted-7); --border-interactive: var(--flavor-cyan-muted-7); --accent-subtle: var(--flavor-cyan-muted-11); --accent-subtle-hover: var(--flavor-cyan-muted-10); --accent-border: var(--flavor-cyan-muted-9); --focus-ring: var(--flavor-cyan-muted-7); --accent-bg: var(--flavor-cyan-muted-6); --accent-bg-hover: var(--flavor-cyan-muted-5); --accent-bg-active: var(--flavor-cyan-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-muted-2); --text-on-accent-subtle: var(--flavor-cyan-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-cyan-muted-11); --success-border: var(--flavor-cyan-muted-9); --success-text: var(--flavor-cyan-muted-1); --success-solid: var(--flavor-cyan-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-muted-11); --warning-border: var(--flavor-cyan-muted-9); --warning-text: var(--flavor-cyan-muted-1); --warning-solid: var(--flavor-cyan-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-muted-11); --danger-border: var(--flavor-cyan-muted-9); --danger-text: var(--flavor-cyan-muted-1); --danger-solid: var(--flavor-cyan-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-muted-11); --info-border: var(--flavor-cyan-muted-9); --info-text: var(--flavor-cyan-muted-1); --info-solid: var(--flavor-cyan-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-cyan-regular-10); --surface-1: var(--flavor-cyan-regular-11); --surface-2: var(--flavor-cyan-regular-12); --surface-3: var(--flavor-cyan-regular-12); --surface-tint: var(--flavor-cyan-regular-9); --text-primary: var(--flavor-cyan-regular-1); --text-secondary: var(--flavor-cyan-regular-2); --text-tertiary: var(--flavor-cyan-regular-3); --text-disabled: var(--flavor-cyan-regular-7); --border-subtle: var(--flavor-cyan-regular-9); --border-default: var(--flavor-cyan-regular-8); --border-strong: var(--flavor-cyan-regular-7); --border-interactive: var(--flavor-cyan-regular-7); --accent-subtle: var(--flavor-cyan-regular-11); --accent-subtle-hover: var(--flavor-cyan-regular-10); --accent-border: var(--flavor-cyan-regular-9); --focus-ring: var(--flavor-cyan-regular-7); --accent-bg: var(--flavor-cyan-regular-7); --accent-bg-hover: var(--flavor-cyan-regular-6); --accent-bg-active: var(--flavor-cyan-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-regular-2); --text-on-accent-subtle: var(--flavor-cyan-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-cyan-regular-11); --success-border: var(--flavor-cyan-regular-9); --success-text: var(--flavor-cyan-regular-1); --success-solid: var(--flavor-cyan-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-regular-11); --warning-border: var(--flavor-cyan-regular-9); --warning-text: var(--flavor-cyan-regular-1); --warning-solid: var(--flavor-cyan-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-regular-11); --danger-border: var(--flavor-cyan-regular-9); --danger-text: var(--flavor-cyan-regular-1); --danger-solid: var(--flavor-cyan-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-regular-11); --info-border: var(--flavor-cyan-regular-9); --info-text: var(--flavor-cyan-regular-1); --info-solid: var(--flavor-cyan-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-cyan-bold-10); --surface-1: var(--flavor-cyan-bold-11); --surface-2: var(--flavor-cyan-bold-12); --surface-3: var(--flavor-cyan-bold-12); --surface-tint: var(--flavor-cyan-bold-9); --text-primary: var(--flavor-cyan-bold-1); --text-secondary: var(--flavor-cyan-bold-2); --text-tertiary: var(--flavor-cyan-bold-3); --text-disabled: var(--flavor-cyan-bold-7); --border-subtle: var(--flavor-cyan-bold-9); --border-default: var(--flavor-cyan-bold-8); --border-strong: var(--flavor-cyan-bold-7); --border-interactive: var(--flavor-cyan-bold-7); --accent-subtle: var(--flavor-cyan-bold-11); --accent-subtle-hover: var(--flavor-cyan-bold-10); --accent-border: var(--flavor-cyan-bold-9); --focus-ring: var(--flavor-cyan-bold-7); --accent-bg: var(--flavor-cyan-bold-7); --accent-bg-hover: var(--flavor-cyan-bold-6); --accent-bg-active: var(--flavor-cyan-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-cyan-bold-2); --text-on-accent-subtle: var(--flavor-cyan-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-cyan-bold-11); --success-border: var(--flavor-cyan-bold-9); --success-text: var(--flavor-cyan-bold-1); --success-solid: var(--flavor-cyan-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-cyan-bold-11); --warning-border: var(--flavor-cyan-bold-9); --warning-text: var(--flavor-cyan-bold-1); --warning-solid: var(--flavor-cyan-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-cyan-bold-11); --danger-border: var(--flavor-cyan-bold-9); --danger-text: var(--flavor-cyan-bold-1); --danger-solid: var(--flavor-cyan-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-cyan-bold-11); --info-border: var(--flavor-cyan-bold-9); --info-text: var(--flavor-cyan-bold-1); --info-solid: var(--flavor-cyan-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-10); --surface-1: var(--flavor-blue-muted-11); --surface-2: var(--flavor-blue-muted-12); --surface-3: var(--flavor-blue-muted-12); --surface-tint: var(--flavor-blue-muted-9); --text-primary: var(--flavor-blue-muted-1); --text-secondary: var(--flavor-blue-muted-2); --text-tertiary: var(--flavor-blue-muted-3); --text-disabled: var(--flavor-blue-muted-7); --border-subtle: var(--flavor-blue-muted-9); --border-default: var(--flavor-blue-muted-8); --border-strong: var(--flavor-blue-muted-7); --border-interactive: var(--flavor-blue-muted-7); --accent-subtle: var(--flavor-blue-muted-11); --accent-subtle-hover: var(--flavor-blue-muted-10); --accent-border: var(--flavor-blue-muted-9); --focus-ring: var(--flavor-blue-muted-7); --accent-bg: var(--flavor-blue-muted-7); --accent-bg-hover: var(--flavor-blue-muted-6); --accent-bg-active: var(--flavor-blue-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-2); --text-on-accent-subtle: var(--flavor-blue-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-blue-muted-11); --success-border: var(--flavor-blue-muted-9); --success-text: var(--flavor-blue-muted-1); --success-solid: var(--flavor-blue-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-11); --warning-border: var(--flavor-blue-muted-9); --warning-text: var(--flavor-blue-muted-1); --warning-solid: var(--flavor-blue-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-11); --danger-border: var(--flavor-blue-muted-9); --danger-text: var(--flavor-blue-muted-1); --danger-solid: var(--flavor-blue-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-11); --info-border: var(--flavor-blue-muted-9); --info-text: var(--flavor-blue-muted-1); --info-solid: var(--flavor-blue-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-blue-regular-10); --surface-1: var(--flavor-blue-regular-11); --surface-2: var(--flavor-blue-regular-12); --surface-3: var(--flavor-blue-regular-12); --surface-tint: var(--flavor-blue-regular-9); --text-primary: var(--flavor-blue-regular-1); --text-secondary: var(--flavor-blue-regular-2); --text-tertiary: var(--flavor-blue-regular-3); --text-disabled: var(--flavor-blue-regular-7); --border-subtle: var(--flavor-blue-regular-9); --border-default: var(--flavor-blue-regular-8); --border-strong: var(--flavor-blue-regular-7); --border-interactive: var(--flavor-blue-regular-7); --accent-subtle: var(--flavor-blue-regular-11); --accent-subtle-hover: var(--flavor-blue-regular-10); --accent-border: var(--flavor-blue-regular-9); --focus-ring: var(--flavor-blue-regular-7); --accent-bg: var(--flavor-blue-regular-7); --accent-bg-hover: var(--flavor-blue-regular-6); --accent-bg-active: var(--flavor-blue-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-2); --text-on-accent-subtle: var(--flavor-blue-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-blue-regular-11); --success-border: var(--flavor-blue-regular-9); --success-text: var(--flavor-blue-regular-1); --success-solid: var(--flavor-blue-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-11); --warning-border: var(--flavor-blue-regular-9); --warning-text: var(--flavor-blue-regular-1); --warning-solid: var(--flavor-blue-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-11); --danger-border: var(--flavor-blue-regular-9); --danger-text: var(--flavor-blue-regular-1); --danger-solid: var(--flavor-blue-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-11); --info-border: var(--flavor-blue-regular-9); --info-text: var(--flavor-blue-regular-1); --info-solid: var(--flavor-blue-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-10); --surface-1: var(--flavor-blue-bold-11); --surface-2: var(--flavor-blue-bold-12); --surface-3: var(--flavor-blue-bold-12); --surface-tint: var(--flavor-blue-bold-9); --text-primary: var(--flavor-blue-bold-1); --text-secondary: var(--flavor-blue-bold-2); --text-tertiary: var(--flavor-blue-bold-3); --text-disabled: var(--flavor-blue-bold-7); --border-subtle: var(--flavor-blue-bold-9); --border-default: var(--flavor-blue-bold-8); --border-strong: var(--flavor-blue-bold-7); --border-interactive: var(--flavor-blue-bold-7); --accent-subtle: var(--flavor-blue-bold-11); --accent-subtle-hover: var(--flavor-blue-bold-10); --accent-border: var(--flavor-blue-bold-9); --focus-ring: var(--flavor-blue-bold-7); --accent-bg: var(--flavor-blue-bold-7); --accent-bg-hover: var(--flavor-blue-bold-6); --accent-bg-active: var(--flavor-blue-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-2); --text-on-accent-subtle: var(--flavor-blue-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-blue-bold-11); --success-border: var(--flavor-blue-bold-9); --success-text: var(--flavor-blue-bold-1); --success-solid: var(--flavor-blue-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-11); --warning-border: var(--flavor-blue-bold-9); --warning-text: var(--flavor-blue-bold-1); --warning-solid: var(--flavor-blue-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-11); --danger-border: var(--flavor-blue-bold-9); --danger-text: var(--flavor-blue-bold-1); --danger-solid: var(--flavor-blue-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-11); --info-border: var(--flavor-blue-bold-9); --info-text: var(--flavor-blue-bold-1); --info-solid: var(--flavor-blue-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-violet-muted-10); --surface-1: var(--flavor-violet-muted-11); --surface-2: var(--flavor-violet-muted-12); --surface-3: var(--flavor-violet-muted-12); --surface-tint: var(--flavor-violet-muted-9); --text-primary: var(--flavor-violet-muted-1); --text-secondary: var(--flavor-violet-muted-2); --text-tertiary: var(--flavor-violet-muted-3); --text-disabled: var(--flavor-violet-muted-7); --border-subtle: var(--flavor-violet-muted-9); --border-default: var(--flavor-violet-muted-8); --border-strong: var(--flavor-violet-muted-7); --border-interactive: var(--flavor-violet-muted-7); --accent-subtle: var(--flavor-violet-muted-11); --accent-subtle-hover: var(--flavor-violet-muted-10); --accent-border: var(--flavor-violet-muted-9); --focus-ring: var(--flavor-violet-muted-7); --accent-bg: var(--flavor-violet-muted-7); --accent-bg-hover: var(--flavor-violet-muted-6); --accent-bg-active: var(--flavor-violet-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-muted-2); --text-on-accent-subtle: var(--flavor-violet-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-violet-muted-11); --success-border: var(--flavor-violet-muted-9); --success-text: var(--flavor-violet-muted-1); --success-solid: var(--flavor-violet-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-muted-11); --warning-border: var(--flavor-violet-muted-9); --warning-text: var(--flavor-violet-muted-1); --warning-solid: var(--flavor-violet-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-muted-11); --danger-border: var(--flavor-violet-muted-9); --danger-text: var(--flavor-violet-muted-1); --danger-solid: var(--flavor-violet-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-muted-11); --info-border: var(--flavor-violet-muted-9); --info-text: var(--flavor-violet-muted-1); --info-solid: var(--flavor-violet-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-violet-regular-10); --surface-1: var(--flavor-violet-regular-11); --surface-2: var(--flavor-violet-regular-12); --surface-3: var(--flavor-violet-regular-12); --surface-tint: var(--flavor-violet-regular-9); --text-primary: var(--flavor-violet-regular-1); --text-secondary: var(--flavor-violet-regular-2); --text-tertiary: var(--flavor-violet-regular-3); --text-disabled: var(--flavor-violet-regular-7); --border-subtle: var(--flavor-violet-regular-9); --border-default: var(--flavor-violet-regular-8); --border-strong: var(--flavor-violet-regular-7); --border-interactive: var(--flavor-violet-regular-7); --accent-subtle: var(--flavor-violet-regular-11); --accent-subtle-hover: var(--flavor-violet-regular-10); --accent-border: var(--flavor-violet-regular-9); --focus-ring: var(--flavor-violet-regular-7); --accent-bg: var(--flavor-violet-regular-7); --accent-bg-hover: var(--flavor-violet-regular-6); --accent-bg-active: var(--flavor-violet-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-regular-2); --text-on-accent-subtle: var(--flavor-violet-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-violet-regular-11); --success-border: var(--flavor-violet-regular-9); --success-text: var(--flavor-violet-regular-1); --success-solid: var(--flavor-violet-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-regular-11); --warning-border: var(--flavor-violet-regular-9); --warning-text: var(--flavor-violet-regular-1); --warning-solid: var(--flavor-violet-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-regular-11); --danger-border: var(--flavor-violet-regular-9); --danger-text: var(--flavor-violet-regular-1); --danger-solid: var(--flavor-violet-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-regular-11); --info-border: var(--flavor-violet-regular-9); --info-text: var(--flavor-violet-regular-1); --info-solid: var(--flavor-violet-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-violet-bold-10); --surface-1: var(--flavor-violet-bold-11); --surface-2: var(--flavor-violet-bold-12); --surface-3: var(--flavor-violet-bold-12); --surface-tint: var(--flavor-violet-bold-9); --text-primary: var(--flavor-violet-bold-1); --text-secondary: var(--flavor-violet-bold-2); --text-tertiary: var(--flavor-violet-bold-3); --text-disabled: var(--flavor-violet-bold-7); --border-subtle: var(--flavor-violet-bold-9); --border-default: var(--flavor-violet-bold-8); --border-strong: var(--flavor-violet-bold-7); --border-interactive: var(--flavor-violet-bold-7); --accent-subtle: var(--flavor-violet-bold-11); --accent-subtle-hover: var(--flavor-violet-bold-10); --accent-border: var(--flavor-violet-bold-9); --focus-ring: var(--flavor-violet-bold-7); --accent-bg: var(--flavor-violet-bold-7); --accent-bg-hover: var(--flavor-violet-bold-6); --accent-bg-active: var(--flavor-violet-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-violet-bold-2); --text-on-accent-subtle: var(--flavor-violet-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-violet-bold-11); --success-border: var(--flavor-violet-bold-9); --success-text: var(--flavor-violet-bold-1); --success-solid: var(--flavor-violet-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-violet-bold-11); --warning-border: var(--flavor-violet-bold-9); --warning-text: var(--flavor-violet-bold-1); --warning-solid: var(--flavor-violet-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-violet-bold-11); --danger-border: var(--flavor-violet-bold-9); --danger-text: var(--flavor-violet-bold-1); --danger-solid: var(--flavor-violet-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-violet-bold-11); --info-border: var(--flavor-violet-bold-9); --info-text: var(--flavor-violet-bold-1); --info-solid: var(--flavor-violet-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-purple-muted-10); --surface-1: var(--flavor-purple-muted-11); --surface-2: var(--flavor-purple-muted-12); --surface-3: var(--flavor-purple-muted-12); --surface-tint: var(--flavor-purple-muted-9); --text-primary: var(--flavor-purple-muted-1); --text-secondary: var(--flavor-purple-muted-2); --text-tertiary: var(--flavor-purple-muted-3); --text-disabled: var(--flavor-purple-muted-7); --border-subtle: var(--flavor-purple-muted-9); --border-default: var(--flavor-purple-muted-8); --border-strong: var(--flavor-purple-muted-7); --border-interactive: var(--flavor-purple-muted-7); --accent-subtle: var(--flavor-purple-muted-11); --accent-subtle-hover: var(--flavor-purple-muted-10); --accent-border: var(--flavor-purple-muted-9); --focus-ring: var(--flavor-purple-muted-7); --accent-bg: var(--flavor-purple-muted-6); --accent-bg-hover: var(--flavor-purple-muted-5); --accent-bg-active: var(--flavor-purple-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-muted-2); --text-on-accent-subtle: var(--flavor-purple-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-purple-muted-11); --success-border: var(--flavor-purple-muted-9); --success-text: var(--flavor-purple-muted-1); --success-solid: var(--flavor-purple-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-muted-11); --warning-border: var(--flavor-purple-muted-9); --warning-text: var(--flavor-purple-muted-1); --warning-solid: var(--flavor-purple-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-muted-11); --danger-border: var(--flavor-purple-muted-9); --danger-text: var(--flavor-purple-muted-1); --danger-solid: var(--flavor-purple-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-muted-11); --info-border: var(--flavor-purple-muted-9); --info-text: var(--flavor-purple-muted-1); --info-solid: var(--flavor-purple-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-purple-regular-10); --surface-1: var(--flavor-purple-regular-11); --surface-2: var(--flavor-purple-regular-12); --surface-3: var(--flavor-purple-regular-12); --surface-tint: var(--flavor-purple-regular-9); --text-primary: var(--flavor-purple-regular-1); --text-secondary: var(--flavor-purple-regular-2); --text-tertiary: var(--flavor-purple-regular-3); --text-disabled: var(--flavor-purple-regular-7); --border-subtle: var(--flavor-purple-regular-9); --border-default: var(--flavor-purple-regular-8); --border-strong: var(--flavor-purple-regular-7); --border-interactive: var(--flavor-purple-regular-7); --accent-subtle: var(--flavor-purple-regular-11); --accent-subtle-hover: var(--flavor-purple-regular-10); --accent-border: var(--flavor-purple-regular-9); --focus-ring: var(--flavor-purple-regular-7); --accent-bg: var(--flavor-purple-regular-6); --accent-bg-hover: var(--flavor-purple-regular-5); --accent-bg-active: var(--flavor-purple-regular-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-regular-2); --text-on-accent-subtle: var(--flavor-purple-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-purple-regular-11); --success-border: var(--flavor-purple-regular-9); --success-text: var(--flavor-purple-regular-1); --success-solid: var(--flavor-purple-regular-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-regular-11); --warning-border: var(--flavor-purple-regular-9); --warning-text: var(--flavor-purple-regular-1); --warning-solid: var(--flavor-purple-regular-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-regular-11); --danger-border: var(--flavor-purple-regular-9); --danger-text: var(--flavor-purple-regular-1); --danger-solid: var(--flavor-purple-regular-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-regular-11); --info-border: var(--flavor-purple-regular-9); --info-text: var(--flavor-purple-regular-1); --info-solid: var(--flavor-purple-regular-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-purple-bold-10); --surface-1: var(--flavor-purple-bold-11); --surface-2: var(--flavor-purple-bold-12); --surface-3: var(--flavor-purple-bold-12); --surface-tint: var(--flavor-purple-bold-9); --text-primary: var(--flavor-purple-bold-1); --text-secondary: var(--flavor-purple-bold-2); --text-tertiary: var(--flavor-purple-bold-3); --text-disabled: var(--flavor-purple-bold-7); --border-subtle: var(--flavor-purple-bold-9); --border-default: var(--flavor-purple-bold-8); --border-strong: var(--flavor-purple-bold-7); --border-interactive: var(--flavor-purple-bold-7); --accent-subtle: var(--flavor-purple-bold-11); --accent-subtle-hover: var(--flavor-purple-bold-10); --accent-border: var(--flavor-purple-bold-9); --focus-ring: var(--flavor-purple-bold-7); --accent-bg: var(--flavor-purple-bold-7); --accent-bg-hover: var(--flavor-purple-bold-6); --accent-bg-active: var(--flavor-purple-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-purple-bold-2); --text-on-accent-subtle: var(--flavor-purple-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-purple-bold-11); --success-border: var(--flavor-purple-bold-9); --success-text: var(--flavor-purple-bold-1); --success-solid: var(--flavor-purple-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-purple-bold-11); --warning-border: var(--flavor-purple-bold-9); --warning-text: var(--flavor-purple-bold-1); --warning-solid: var(--flavor-purple-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-purple-bold-11); --danger-border: var(--flavor-purple-bold-9); --danger-text: var(--flavor-purple-bold-1); --danger-solid: var(--flavor-purple-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-purple-bold-11); --info-border: var(--flavor-purple-bold-9); --info-text: var(--flavor-purple-bold-1); --info-solid: var(--flavor-purple-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-10); --surface-1: var(--flavor-magenta-muted-11); --surface-2: var(--flavor-magenta-muted-12); --surface-3: var(--flavor-magenta-muted-12); --surface-tint: var(--flavor-magenta-muted-9); --text-primary: var(--flavor-magenta-muted-1); --text-secondary: var(--flavor-magenta-muted-2); --text-tertiary: var(--flavor-magenta-muted-3); --text-disabled: var(--flavor-magenta-muted-7); --border-subtle: var(--flavor-magenta-muted-9); --border-default: var(--flavor-magenta-muted-8); --border-strong: var(--flavor-magenta-muted-7); --border-interactive: var(--flavor-magenta-muted-7); --accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle-hover: var(--flavor-magenta-muted-10); --accent-border: var(--flavor-magenta-muted-9); --focus-ring: var(--flavor-magenta-muted-7); --accent-bg: var(--flavor-magenta-muted-6); --accent-bg-hover: var(--flavor-magenta-muted-5); --accent-bg-active: var(--flavor-magenta-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-2); --text-on-accent-subtle: var(--flavor-magenta-muted-1); --secondary-bg: var(--flavor-neutral-muted-1); --secondary-bg-hover: var(--flavor-neutral-muted-1); --secondary-bg-active: var(--flavor-neutral-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-muted-10); --secondary-subtle-hover: var(--flavor-neutral-muted-9); --secondary-border: var(--flavor-neutral-muted-1); --secondary-text: var(--flavor-neutral-muted-1); --text-on-secondary-subtle: var(--flavor-neutral-muted-1); --success-bg: var(--flavor-magenta-muted-11); --success-border: var(--flavor-magenta-muted-9); --success-text: var(--flavor-magenta-muted-1); --success-solid: var(--flavor-magenta-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-11); --warning-border: var(--flavor-magenta-muted-9); --warning-text: var(--flavor-magenta-muted-1); --warning-solid: var(--flavor-magenta-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-11); --danger-border: var(--flavor-magenta-muted-9); --danger-text: var(--flavor-magenta-muted-1); --danger-solid: var(--flavor-magenta-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-11); --info-border: var(--flavor-magenta-muted-9); --info-text: var(--flavor-magenta-muted-1); --info-solid: var(--flavor-magenta-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-10); --surface-1: var(--flavor-magenta-regular-11); --surface-2: var(--flavor-magenta-regular-12); --surface-3: var(--flavor-magenta-regular-12); --surface-tint: var(--flavor-magenta-regular-9); --text-primary: var(--flavor-magenta-regular-1); --text-secondary: var(--flavor-magenta-regular-2); --text-tertiary: var(--flavor-magenta-regular-3); --text-disabled: var(--flavor-magenta-regular-7); --border-subtle: var(--flavor-magenta-regular-9); --border-default: var(--flavor-magenta-regular-8); --border-strong: var(--flavor-magenta-regular-7); --border-interactive: var(--flavor-magenta-regular-7); --accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle-hover: var(--flavor-magenta-regular-10); --accent-border: var(--flavor-magenta-regular-9); --focus-ring: var(--flavor-magenta-regular-7); --accent-bg: var(--flavor-magenta-regular-7); --accent-bg-hover: var(--flavor-magenta-regular-6); --accent-bg-active: var(--flavor-magenta-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-2); --text-on-accent-subtle: var(--flavor-magenta-regular-1); --secondary-bg: var(--flavor-neutral-regular-1); --secondary-bg-hover: var(--flavor-neutral-regular-1); --secondary-bg-active: var(--flavor-neutral-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-regular-10); --secondary-subtle-hover: var(--flavor-neutral-regular-9); --secondary-border: var(--flavor-neutral-regular-1); --secondary-text: var(--flavor-neutral-regular-1); --text-on-secondary-subtle: var(--flavor-neutral-regular-1); --success-bg: var(--flavor-magenta-regular-11); --success-border: var(--flavor-magenta-regular-9); --success-text: var(--flavor-magenta-regular-1); --success-solid: var(--flavor-magenta-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-11); --warning-border: var(--flavor-magenta-regular-9); --warning-text: var(--flavor-magenta-regular-1); --warning-solid: var(--flavor-magenta-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-11); --danger-border: var(--flavor-magenta-regular-9); --danger-text: var(--flavor-magenta-regular-1); --danger-solid: var(--flavor-magenta-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-11); --info-border: var(--flavor-magenta-regular-9); --info-text: var(--flavor-magenta-regular-1); --info-solid: var(--flavor-magenta-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-10); --surface-1: var(--flavor-magenta-bold-11); --surface-2: var(--flavor-magenta-bold-12); --surface-3: var(--flavor-magenta-bold-12); --surface-tint: var(--flavor-magenta-bold-9); --text-primary: var(--flavor-magenta-bold-1); --text-secondary: var(--flavor-magenta-bold-2); --text-tertiary: var(--flavor-magenta-bold-3); --text-disabled: var(--flavor-magenta-bold-7); --border-subtle: var(--flavor-magenta-bold-9); --border-default: var(--flavor-magenta-bold-8); --border-strong: var(--flavor-magenta-bold-7); --border-interactive: var(--flavor-magenta-bold-7); --accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle-hover: var(--flavor-magenta-bold-10); --accent-border: var(--flavor-magenta-bold-9); --focus-ring: var(--flavor-magenta-bold-7); --accent-bg: var(--flavor-magenta-bold-7); --accent-bg-hover: var(--flavor-magenta-bold-6); --accent-bg-active: var(--flavor-magenta-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-2); --text-on-accent-subtle: var(--flavor-magenta-bold-1); --secondary-bg: var(--flavor-neutral-bold-1); --secondary-bg-hover: var(--flavor-neutral-bold-1); --secondary-bg-active: var(--flavor-neutral-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-neutral-bold-10); --secondary-subtle-hover: var(--flavor-neutral-bold-9); --secondary-border: var(--flavor-neutral-bold-1); --secondary-text: var(--flavor-neutral-bold-1); --text-on-secondary-subtle: var(--flavor-neutral-bold-1); --success-bg: var(--flavor-magenta-bold-11); --success-border: var(--flavor-magenta-bold-9); --success-text: var(--flavor-magenta-bold-1); --success-solid: var(--flavor-magenta-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-11); --warning-border: var(--flavor-magenta-bold-9); --warning-text: var(--flavor-magenta-bold-1); --warning-solid: var(--flavor-magenta-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-11); --danger-border: var(--flavor-magenta-bold-9); --danger-text: var(--flavor-magenta-bold-1); --danger-solid: var(--flavor-magenta-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-11); --info-border: var(--flavor-magenta-bold-9); --info-text: var(--flavor-magenta-bold-1); --info-solid: var(--flavor-magenta-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-blue-muted-10); --surface-1: var(--flavor-blue-muted-11); --surface-2: var(--flavor-blue-muted-12); --surface-3: var(--flavor-blue-muted-12); --surface-tint: var(--flavor-blue-muted-9); --text-primary: var(--flavor-blue-muted-1); --text-secondary: var(--flavor-blue-muted-2); --text-tertiary: var(--flavor-blue-muted-3); --text-disabled: var(--flavor-blue-muted-7); --border-subtle: var(--flavor-blue-muted-9); --border-default: var(--flavor-blue-muted-8); --border-strong: var(--flavor-blue-muted-7); --border-interactive: var(--flavor-blue-muted-7); --accent-subtle: var(--flavor-blue-muted-11); --accent-subtle-hover: var(--flavor-blue-muted-10); --accent-border: var(--flavor-orange-muted-9); --focus-ring: var(--flavor-orange-muted-1); --accent-bg: var(--flavor-blue-muted-7); --accent-bg-hover: var(--flavor-blue-muted-6); --accent-bg-active: var(--flavor-blue-muted-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-muted-2); --text-on-accent-subtle: var(--flavor-blue-muted-1); --secondary-bg: var(--flavor-orange-muted-1); --secondary-bg-hover: var(--flavor-orange-muted-1); --secondary-bg-active: var(--flavor-orange-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-muted-10); --secondary-subtle-hover: var(--flavor-orange-muted-9); --secondary-border: var(--flavor-orange-muted-1); --secondary-text: var(--flavor-orange-muted-1); --text-on-secondary-subtle: var(--flavor-orange-muted-1); --success-bg: var(--flavor-blue-muted-11); --success-border: var(--flavor-blue-muted-9); --success-text: var(--flavor-blue-muted-1); --success-solid: var(--flavor-blue-muted-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-muted-11); --warning-border: var(--flavor-blue-muted-9); --warning-text: var(--flavor-blue-muted-1); --warning-solid: var(--flavor-blue-muted-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-muted-11); --danger-border: var(--flavor-blue-muted-9); --danger-text: var(--flavor-blue-muted-1); --danger-solid: var(--flavor-blue-muted-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-muted-11); --info-border: var(--flavor-blue-muted-9); --info-text: var(--flavor-blue-muted-1); --info-solid: var(--flavor-blue-muted-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="accent"], :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue])[data-bg="accent"] { --surface-page: var(--flavor-blue-regular-10); --surface-1: var(--flavor-blue-regular-11); --surface-2: var(--flavor-blue-regular-12); --surface-3: var(--flavor-blue-regular-12); --surface-tint: var(--flavor-blue-regular-9); --text-primary: var(--flavor-blue-regular-1); --text-secondary: var(--flavor-blue-regular-2); --text-tertiary: var(--flavor-blue-regular-3); --text-disabled: var(--flavor-blue-regular-7); --border-subtle: var(--flavor-blue-regular-9); --border-default: var(--flavor-blue-regular-8); --border-strong: var(--flavor-blue-regular-7); --border-interactive: var(--flavor-blue-regular-7); --accent-subtle: var(--flavor-blue-regular-11); --accent-subtle-hover: var(--flavor-blue-regular-10); --accent-border: var(--flavor-orange-regular-9); --focus-ring: var(--flavor-orange-regular-1); --accent-bg: var(--flavor-blue-regular-7); --accent-bg-hover: var(--flavor-blue-regular-6); --accent-bg-active: var(--flavor-blue-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-regular-2); --text-on-accent-subtle: var(--flavor-blue-regular-1); --secondary-bg: var(--flavor-orange-regular-1); --secondary-bg-hover: var(--flavor-orange-regular-1); --secondary-bg-active: var(--flavor-orange-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-regular-10); --secondary-subtle-hover: var(--flavor-orange-regular-9); --secondary-border: var(--flavor-orange-regular-1); --secondary-text: var(--flavor-orange-regular-1); --text-on-secondary-subtle: var(--flavor-orange-regular-1); --success-bg: var(--flavor-blue-regular-11); --success-border: var(--flavor-blue-regular-9); --success-text: var(--flavor-blue-regular-1); --success-solid: var(--flavor-blue-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-regular-11); --warning-border: var(--flavor-blue-regular-9); --warning-text: var(--flavor-blue-regular-1); --warning-solid: var(--flavor-blue-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-regular-11); --danger-border: var(--flavor-blue-regular-9); --danger-text: var(--flavor-blue-regular-1); --danger-solid: var(--flavor-blue-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-11); --info-border: var(--flavor-blue-regular-9); --info-text: var(--flavor-blue-regular-1); --info-solid: var(--flavor-blue-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-blue-bold-10); --surface-1: var(--flavor-blue-bold-11); --surface-2: var(--flavor-blue-bold-12); --surface-3: var(--flavor-blue-bold-12); --surface-tint: var(--flavor-blue-bold-9); --text-primary: var(--flavor-blue-bold-1); --text-secondary: var(--flavor-blue-bold-2); --text-tertiary: var(--flavor-blue-bold-3); --text-disabled: var(--flavor-blue-bold-7); --border-subtle: var(--flavor-blue-bold-9); --border-default: var(--flavor-blue-bold-8); --border-strong: var(--flavor-blue-bold-7); --border-interactive: var(--flavor-blue-bold-7); --accent-subtle: var(--flavor-blue-bold-11); --accent-subtle-hover: var(--flavor-blue-bold-10); --accent-border: var(--flavor-orange-bold-9); --focus-ring: var(--flavor-orange-bold-1); --accent-bg: var(--flavor-blue-bold-7); --accent-bg-hover: var(--flavor-blue-bold-6); --accent-bg-active: var(--flavor-blue-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-blue-bold-2); --text-on-accent-subtle: var(--flavor-blue-bold-1); --secondary-bg: var(--flavor-orange-bold-1); --secondary-bg-hover: var(--flavor-orange-bold-1); --secondary-bg-active: var(--flavor-orange-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-orange-bold-10); --secondary-subtle-hover: var(--flavor-orange-bold-9); --secondary-border: var(--flavor-orange-bold-1); --secondary-text: var(--flavor-orange-bold-1); --text-on-secondary-subtle: var(--flavor-orange-bold-1); --success-bg: var(--flavor-blue-bold-11); --success-border: var(--flavor-blue-bold-9); --success-text: var(--flavor-blue-bold-1); --success-solid: var(--flavor-blue-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-blue-bold-11); --warning-border: var(--flavor-blue-bold-9); --warning-text: var(--flavor-blue-bold-1); --warning-solid: var(--flavor-blue-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-blue-bold-11); --danger-border: var(--flavor-blue-bold-9); --danger-text: var(--flavor-blue-bold-1); --danger-solid: var(--flavor-blue-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-bold-11); --info-border: var(--flavor-blue-bold-9); --info-text: var(--flavor-blue-bold-1); --info-solid: var(--flavor-blue-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="accent"] { --surface-page: var(--flavor-magenta-muted-10); --surface-1: var(--flavor-magenta-muted-11); --surface-2: var(--flavor-magenta-muted-12); --surface-3: var(--flavor-magenta-muted-12); --surface-tint: var(--flavor-magenta-muted-9); --text-primary: var(--flavor-magenta-muted-1); --text-secondary: var(--flavor-magenta-muted-2); --text-tertiary: var(--flavor-magenta-muted-3); --text-disabled: var(--flavor-magenta-muted-7); --border-subtle: var(--flavor-magenta-muted-9); --border-default: var(--flavor-magenta-muted-8); --border-strong: var(--flavor-magenta-muted-7); --border-interactive: var(--flavor-magenta-muted-7); --accent-subtle: var(--flavor-magenta-muted-11); --accent-subtle-hover: var(--flavor-magenta-muted-10); --accent-border: var(--flavor-cyan-muted-9); --focus-ring: var(--flavor-cyan-muted-1); --accent-bg: var(--flavor-magenta-muted-6); --accent-bg-hover: var(--flavor-magenta-muted-5); --accent-bg-active: var(--flavor-magenta-muted-4); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-muted-2); --text-on-accent-subtle: var(--flavor-magenta-muted-1); --secondary-bg: var(--flavor-cyan-muted-1); --secondary-bg-hover: var(--flavor-cyan-muted-1); --secondary-bg-active: var(--flavor-cyan-muted-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-muted-10); --secondary-subtle-hover: var(--flavor-cyan-muted-9); --secondary-border: var(--flavor-cyan-muted-1); --secondary-text: var(--flavor-cyan-muted-1); --text-on-secondary-subtle: var(--flavor-cyan-muted-1); --success-bg: var(--flavor-magenta-muted-11); --success-border: var(--flavor-magenta-muted-9); --success-text: var(--flavor-magenta-muted-1); --success-solid: var(--flavor-magenta-muted-6); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-muted-11); --warning-border: var(--flavor-magenta-muted-9); --warning-text: var(--flavor-magenta-muted-1); --warning-solid: var(--flavor-magenta-muted-6); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-muted-11); --danger-border: var(--flavor-magenta-muted-9); --danger-text: var(--flavor-magenta-muted-1); --danger-solid: var(--flavor-magenta-muted-6); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-muted-11); --info-border: var(--flavor-magenta-muted-9); --info-text: var(--flavor-magenta-muted-1); --info-solid: var(--flavor-magenta-muted-6); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="accent"] { --surface-page: var(--flavor-magenta-regular-10); --surface-1: var(--flavor-magenta-regular-11); --surface-2: var(--flavor-magenta-regular-12); --surface-3: var(--flavor-magenta-regular-12); --surface-tint: var(--flavor-magenta-regular-9); --text-primary: var(--flavor-magenta-regular-1); --text-secondary: var(--flavor-magenta-regular-2); --text-tertiary: var(--flavor-magenta-regular-3); --text-disabled: var(--flavor-magenta-regular-7); --border-subtle: var(--flavor-magenta-regular-9); --border-default: var(--flavor-magenta-regular-8); --border-strong: var(--flavor-magenta-regular-7); --border-interactive: var(--flavor-magenta-regular-7); --accent-subtle: var(--flavor-magenta-regular-11); --accent-subtle-hover: var(--flavor-magenta-regular-10); --accent-border: var(--flavor-cyan-regular-9); --focus-ring: var(--flavor-cyan-regular-1); --accent-bg: var(--flavor-magenta-regular-7); --accent-bg-hover: var(--flavor-magenta-regular-6); --accent-bg-active: var(--flavor-magenta-regular-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-regular-2); --text-on-accent-subtle: var(--flavor-magenta-regular-1); --secondary-bg: var(--flavor-cyan-regular-1); --secondary-bg-hover: var(--flavor-cyan-regular-1); --secondary-bg-active: var(--flavor-cyan-regular-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-regular-10); --secondary-subtle-hover: var(--flavor-cyan-regular-9); --secondary-border: var(--flavor-cyan-regular-1); --secondary-text: var(--flavor-cyan-regular-1); --text-on-secondary-subtle: var(--flavor-cyan-regular-1); --success-bg: var(--flavor-magenta-regular-11); --success-border: var(--flavor-magenta-regular-9); --success-text: var(--flavor-magenta-regular-1); --success-solid: var(--flavor-magenta-regular-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-regular-11); --warning-border: var(--flavor-magenta-regular-9); --warning-text: var(--flavor-magenta-regular-1); --warning-solid: var(--flavor-magenta-regular-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-regular-11); --danger-border: var(--flavor-magenta-regular-9); --danger-text: var(--flavor-magenta-regular-1); --danger-solid: var(--flavor-magenta-regular-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-regular-11); --info-border: var(--flavor-magenta-regular-9); --info-text: var(--flavor-magenta-regular-1); --info-solid: var(--flavor-magenta-regular-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="accent"] { --surface-page: var(--flavor-magenta-bold-10); --surface-1: var(--flavor-magenta-bold-11); --surface-2: var(--flavor-magenta-bold-12); --surface-3: var(--flavor-magenta-bold-12); --surface-tint: var(--flavor-magenta-bold-9); --text-primary: var(--flavor-magenta-bold-1); --text-secondary: var(--flavor-magenta-bold-2); --text-tertiary: var(--flavor-magenta-bold-3); --text-disabled: var(--flavor-magenta-bold-7); --border-subtle: var(--flavor-magenta-bold-9); --border-default: var(--flavor-magenta-bold-8); --border-strong: var(--flavor-magenta-bold-7); --border-interactive: var(--flavor-magenta-bold-7); --accent-subtle: var(--flavor-magenta-bold-11); --accent-subtle-hover: var(--flavor-magenta-bold-10); --accent-border: var(--flavor-cyan-bold-9); --focus-ring: var(--flavor-cyan-bold-1); --accent-bg: var(--flavor-magenta-bold-7); --accent-bg-hover: var(--flavor-magenta-bold-6); --accent-bg-active: var(--flavor-magenta-bold-5); --accent-fg: var(--flavor-white); --text-accent: var(--flavor-magenta-bold-2); --text-on-accent-subtle: var(--flavor-magenta-bold-1); --secondary-bg: var(--flavor-cyan-bold-1); --secondary-bg-hover: var(--flavor-cyan-bold-1); --secondary-bg-active: var(--flavor-cyan-bold-1); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavor-cyan-bold-10); --secondary-subtle-hover: var(--flavor-cyan-bold-9); --secondary-border: var(--flavor-cyan-bold-1); --secondary-text: var(--flavor-cyan-bold-1); --text-on-secondary-subtle: var(--flavor-cyan-bold-1); --success-bg: var(--flavor-magenta-bold-11); --success-border: var(--flavor-magenta-bold-9); --success-text: var(--flavor-magenta-bold-1); --success-solid: var(--flavor-magenta-bold-7); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-magenta-bold-11); --warning-border: var(--flavor-magenta-bold-9); --warning-text: var(--flavor-magenta-bold-1); --warning-solid: var(--flavor-magenta-bold-7); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-magenta-bold-11); --danger-border: var(--flavor-magenta-bold-9); --danger-text: var(--flavor-magenta-bold-1); --danger-solid: var(--flavor-magenta-bold-7); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-magenta-bold-11); --info-border: var(--flavor-magenta-bold-9); --info-text: var(--flavor-magenta-bold-1); --info-solid: var(--flavor-magenta-bold-7); --info-solid-fg: var(--flavor-white); --feedback-tonal: 1; } :root, :root[data-bg="primary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-11); --success-solid: var(--flavor-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-11); --warning-solid: var(--flavor-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-11); --danger-solid: var(--flavor-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-11); --info-solid: var(--flavor-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-contrast="aaa"], :root[data-contrast="aaa"][data-bg="primary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-12); --success-solid: var(--flavor-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-11); --warning-solid: var(--flavor-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-11); --danger-solid: var(--flavor-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-11); --info-solid: var(--flavor-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"], :root[data-mode="dark"][data-bg="primary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-11); --success-solid: var(--flavor-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-11); --warning-solid: var(--flavor-orange-regular-9); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-11); --danger-solid: var(--flavor-red-regular-9); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-11); --info-solid: var(--flavor-blue-regular-9); --info-solid-fg: var(--flavor-black); } :root[data-mode="dark"][data-contrast="aaa"], :root[data-mode="dark"][data-contrast="aaa"][data-bg="primary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-11); --success-solid: var(--flavor-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-11); --warning-solid: var(--flavor-orange-regular-10); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-11); --danger-solid: var(--flavor-red-regular-10); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-11); --info-solid: var(--flavor-blue-regular-10); --info-solid-fg: var(--flavor-black); } :root[data-bg="secondary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-11); --success-solid: var(--flavor-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-11); --warning-solid: var(--flavor-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-11); --danger-solid: var(--flavor-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-11); --info-solid: var(--flavor-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-contrast="aaa"][data-bg="secondary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-12); --success-solid: var(--flavor-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-12); --warning-solid: var(--flavor-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-12); --danger-solid: var(--flavor-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-12); --info-solid: var(--flavor-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-bg="secondary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-11); --success-solid: var(--flavor-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-11); --warning-solid: var(--flavor-orange-regular-9); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-11); --danger-solid: var(--flavor-red-regular-9); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-11); --info-solid: var(--flavor-blue-regular-9); --info-solid-fg: var(--flavor-black); } :root[data-mode="dark"][data-contrast="aaa"][data-bg="secondary"] { --success-bg: var(--flavor-green-regular-3); --success-border: var(--flavor-green-regular-7); --success-text: var(--flavor-green-regular-11); --success-solid: var(--flavor-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavor-orange-regular-3); --warning-border: var(--flavor-orange-regular-7); --warning-text: var(--flavor-orange-regular-12); --warning-solid: var(--flavor-orange-regular-10); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavor-red-regular-3); --danger-border: var(--flavor-red-regular-7); --danger-text: var(--flavor-red-regular-12); --danger-solid: var(--flavor-red-regular-10); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavor-blue-regular-3); --info-border: var(--flavor-blue-regular-7); --info-text: var(--flavor-blue-regular-12); --info-solid: var(--flavor-blue-regular-10); --info-solid-fg: var(--flavor-black); } :root[data-bg="dark-primary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-9); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-9); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-9); --info-solid-fg: var(--flavor-black); } :root[data-contrast="aaa"][data-bg="dark-primary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-10); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-10); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-10); --info-solid-fg: var(--flavor-black); } :root[data-mode="dark"][data-bg="dark-primary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-9); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-9); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-9); --info-solid-fg: var(--flavor-black); } :root[data-mode="dark"][data-contrast="aaa"][data-bg="dark-primary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-10); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-10); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-10); --info-solid-fg: var(--flavor-black); } :root[data-bg="dark-secondary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-9); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-9); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-9); --info-solid-fg: var(--flavor-black); } :root[data-contrast="aaa"][data-bg="dark-secondary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-12); --warning-solid: var(--flavorD-orange-regular-10); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-12); --danger-solid: var(--flavorD-red-regular-10); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-12); --info-solid: var(--flavorD-blue-regular-10); --info-solid-fg: var(--flavor-black); } :root[data-mode="dark"][data-bg="dark-secondary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-9); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-9); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-9); --info-solid-fg: var(--flavor-black); } :root[data-mode="dark"][data-contrast="aaa"][data-bg="dark-secondary"] { --success-bg: var(--flavorD-green-regular-3); --success-border: var(--flavorD-green-regular-7); --success-text: var(--flavorD-green-regular-11); --success-solid: var(--flavorD-green-regular-9); --success-solid-fg: var(--flavor-black); --warning-bg: var(--flavorD-orange-regular-3); --warning-border: var(--flavorD-orange-regular-7); --warning-text: var(--flavorD-orange-regular-11); --warning-solid: var(--flavorD-orange-regular-10); --warning-solid-fg: var(--flavor-black); --danger-bg: var(--flavorD-red-regular-3); --danger-border: var(--flavorD-red-regular-7); --danger-text: var(--flavorD-red-regular-11); --danger-solid: var(--flavorD-red-regular-10); --danger-solid-fg: var(--flavor-black); --info-bg: var(--flavorD-blue-regular-3); --info-border: var(--flavorD-blue-regular-7); --info-text: var(--flavorD-blue-regular-11); --info-solid: var(--flavorD-blue-regular-10); --info-solid-fg: var(--flavor-black); } :root, :root[data-mode="light"] { --elevation-1: 0 1px 2px rgb(13 13 15 / 0.06), 0 1px 3px rgb(13 13 15 / 0.08); --elevation-2: 0 4px 10px rgb(13 13 15 / 0.10), 0 2px 4px rgb(13 13 15 / 0.06); --elevation-3: 0 16px 40px rgb(13 13 15 / 0.18), 0 4px 12px rgb(13 13 15 / 0.08); } :root[data-mode="dark"], :root[data-bg="accent"], :root[data-bg="dark-primary"], :root[data-bg="dark-secondary"] { --elevation-1: 0 1px 2px rgb(0 0 0 / 0.45); --elevation-2: 0 4px 12px rgb(0 0 0 / 0.50); --elevation-3: 0 20px 48px rgb(0 0 0 / 0.60); } :root, :root[data-mode="light"] { --shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04); --shadow-border-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.08), 0 2px 4px 0 oklch(0 0 0 / 0.06); --image-outline: oklch(0 0 0 / 0.1); } :root[data-mode="dark"], :root[data-bg="dark-primary"], :root[data-bg="dark-secondary"] { /* Layered depth is invisible on dark ground — collapse to a single white ring. */ --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08); --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13); --image-outline: oklch(1 0 0 / 0.1); } :root[data-bg="media"] { /* On a photo the UI is always the light treatment, whatever data-mode says. */ --shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06); --shadow-border-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.08); --image-outline: oklch(1 0 0 / 0.1); } :root[data-sat="muted"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-10); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-10); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-11); --success-solid: var(--flavorL-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-10); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-10); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-11); --success-solid: var(--flavorL-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-sat="bold"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-10); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-10); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-11); --success-solid: var(--flavorL-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-hue="neutral"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-muted-10); --accent-bg-hover: var(--flavorL-neutral-muted-11); --accent-bg-active: var(--flavorL-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-muted-10); --text-on-accent-subtle: var(--flavorL-neutral-muted-11); --accent-subtle: var(--flavorL-neutral-muted-3); --accent-subtle-hover: var(--flavorL-neutral-muted-4); --accent-border: var(--flavorL-neutral-muted-7); --focus-ring: var(--flavorL-neutral-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="neutral"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-regular-10); --accent-bg-hover: var(--flavorL-neutral-regular-11); --accent-bg-active: var(--flavorL-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-regular-10); --text-on-accent-subtle: var(--flavorL-neutral-regular-11); --accent-subtle: var(--flavorL-neutral-regular-3); --accent-subtle-hover: var(--flavorL-neutral-regular-4); --accent-border: var(--flavorL-neutral-regular-7); --focus-ring: var(--flavorL-neutral-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="neutral"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-bold-10); --accent-bg-hover: var(--flavorL-neutral-bold-11); --accent-bg-active: var(--flavorL-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-bold-10); --text-on-accent-subtle: var(--flavorL-neutral-bold-11); --accent-subtle: var(--flavorL-neutral-bold-3); --accent-subtle-hover: var(--flavorL-neutral-bold-4); --accent-border: var(--flavorL-neutral-bold-7); --focus-ring: var(--flavorL-neutral-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="red"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-red-muted-10); --accent-bg-hover: var(--flavorL-red-muted-11); --accent-bg-active: var(--flavorL-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-muted-10); --text-on-accent-subtle: var(--flavorL-red-muted-11); --accent-subtle: var(--flavorL-red-muted-3); --accent-subtle-hover: var(--flavorL-red-muted-4); --accent-border: var(--flavorL-red-muted-7); --focus-ring: var(--flavorL-red-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="red"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-red-regular-10); --accent-bg-hover: var(--flavorL-red-regular-11); --accent-bg-active: var(--flavorL-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-regular-10); --text-on-accent-subtle: var(--flavorL-red-regular-11); --accent-subtle: var(--flavorL-red-regular-3); --accent-subtle-hover: var(--flavorL-red-regular-4); --accent-border: var(--flavorL-red-regular-7); --focus-ring: var(--flavorL-red-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="red"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-red-bold-10); --accent-bg-hover: var(--flavorL-red-bold-11); --accent-bg-active: var(--flavorL-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-bold-10); --text-on-accent-subtle: var(--flavorL-red-bold-11); --accent-subtle: var(--flavorL-red-bold-3); --accent-subtle-hover: var(--flavorL-red-bold-4); --accent-border: var(--flavorL-red-bold-7); --focus-ring: var(--flavorL-red-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="scarlet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-muted-10); --accent-bg-hover: var(--flavorL-scarlet-muted-11); --accent-bg-active: var(--flavorL-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-muted-10); --text-on-accent-subtle: var(--flavorL-scarlet-muted-11); --accent-subtle: var(--flavorL-scarlet-muted-3); --accent-subtle-hover: var(--flavorL-scarlet-muted-4); --accent-border: var(--flavorL-scarlet-muted-7); --focus-ring: var(--flavorL-scarlet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="scarlet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-regular-10); --accent-bg-hover: var(--flavorL-scarlet-regular-11); --accent-bg-active: var(--flavorL-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-regular-10); --text-on-accent-subtle: var(--flavorL-scarlet-regular-11); --accent-subtle: var(--flavorL-scarlet-regular-3); --accent-subtle-hover: var(--flavorL-scarlet-regular-4); --accent-border: var(--flavorL-scarlet-regular-7); --focus-ring: var(--flavorL-scarlet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="scarlet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-bold-10); --accent-bg-hover: var(--flavorL-scarlet-bold-11); --accent-bg-active: var(--flavorL-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-bold-10); --text-on-accent-subtle: var(--flavorL-scarlet-bold-11); --accent-subtle: var(--flavorL-scarlet-bold-3); --accent-subtle-hover: var(--flavorL-scarlet-bold-4); --accent-border: var(--flavorL-scarlet-bold-7); --focus-ring: var(--flavorL-scarlet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="orange"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-orange-muted-10); --accent-bg-hover: var(--flavorL-orange-muted-11); --accent-bg-active: var(--flavorL-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-muted-10); --text-on-accent-subtle: var(--flavorL-orange-muted-11); --accent-subtle: var(--flavorL-orange-muted-3); --accent-subtle-hover: var(--flavorL-orange-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="orange"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-orange-regular-10); --accent-bg-hover: var(--flavorL-orange-regular-11); --accent-bg-active: var(--flavorL-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-regular-10); --text-on-accent-subtle: var(--flavorL-orange-regular-11); --accent-subtle: var(--flavorL-orange-regular-3); --accent-subtle-hover: var(--flavorL-orange-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="orange"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-orange-bold-10); --accent-bg-hover: var(--flavorL-orange-bold-11); --accent-bg-active: var(--flavorL-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-bold-10); --text-on-accent-subtle: var(--flavorL-orange-bold-11); --accent-subtle: var(--flavorL-orange-bold-3); --accent-subtle-hover: var(--flavorL-orange-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="tangerine"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-muted-10); --accent-bg-hover: var(--flavorL-tangerine-muted-11); --accent-bg-active: var(--flavorL-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-muted-10); --text-on-accent-subtle: var(--flavorL-tangerine-muted-11); --accent-subtle: var(--flavorL-tangerine-muted-3); --accent-subtle-hover: var(--flavorL-tangerine-muted-4); --accent-border: var(--flavorL-tangerine-muted-7); --focus-ring: var(--flavorL-tangerine-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="tangerine"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-regular-10); --accent-bg-hover: var(--flavorL-tangerine-regular-11); --accent-bg-active: var(--flavorL-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-regular-10); --text-on-accent-subtle: var(--flavorL-tangerine-regular-11); --accent-subtle: var(--flavorL-tangerine-regular-3); --accent-subtle-hover: var(--flavorL-tangerine-regular-4); --accent-border: var(--flavorL-tangerine-regular-7); --focus-ring: var(--flavorL-tangerine-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="tangerine"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-bold-10); --accent-bg-hover: var(--flavorL-tangerine-bold-11); --accent-bg-active: var(--flavorL-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-bold-10); --text-on-accent-subtle: var(--flavorL-tangerine-bold-11); --accent-subtle: var(--flavorL-tangerine-bold-3); --accent-subtle-hover: var(--flavorL-tangerine-bold-4); --accent-border: var(--flavorL-tangerine-bold-7); --focus-ring: var(--flavorL-tangerine-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="yellow"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-muted-10); --accent-bg-hover: var(--flavorL-yellow-muted-11); --accent-bg-active: var(--flavorL-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-muted-10); --text-on-accent-subtle: var(--flavorL-yellow-muted-11); --accent-subtle: var(--flavorL-yellow-muted-3); --accent-subtle-hover: var(--flavorL-yellow-muted-4); --accent-border: var(--flavorL-yellow-muted-7); --focus-ring: var(--flavorL-yellow-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="yellow"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-regular-10); --accent-bg-hover: var(--flavorL-yellow-regular-11); --accent-bg-active: var(--flavorL-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-regular-10); --text-on-accent-subtle: var(--flavorL-yellow-regular-11); --accent-subtle: var(--flavorL-yellow-regular-3); --accent-subtle-hover: var(--flavorL-yellow-regular-4); --accent-border: var(--flavorL-yellow-regular-7); --focus-ring: var(--flavorL-yellow-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="yellow"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-bold-10); --accent-bg-hover: var(--flavorL-yellow-bold-11); --accent-bg-active: var(--flavorL-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-bold-10); --text-on-accent-subtle: var(--flavorL-yellow-bold-11); --accent-subtle: var(--flavorL-yellow-bold-3); --accent-subtle-hover: var(--flavorL-yellow-bold-4); --accent-border: var(--flavorL-yellow-bold-7); --focus-ring: var(--flavorL-yellow-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="lime"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-lime-muted-10); --accent-bg-hover: var(--flavorL-lime-muted-11); --accent-bg-active: var(--flavorL-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-muted-10); --text-on-accent-subtle: var(--flavorL-lime-muted-11); --accent-subtle: var(--flavorL-lime-muted-3); --accent-subtle-hover: var(--flavorL-lime-muted-4); --accent-border: var(--flavorL-lime-muted-7); --focus-ring: var(--flavorL-lime-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="lime"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-lime-regular-10); --accent-bg-hover: var(--flavorL-lime-regular-11); --accent-bg-active: var(--flavorL-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-regular-10); --text-on-accent-subtle: var(--flavorL-lime-regular-11); --accent-subtle: var(--flavorL-lime-regular-3); --accent-subtle-hover: var(--flavorL-lime-regular-4); --accent-border: var(--flavorL-lime-regular-7); --focus-ring: var(--flavorL-lime-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="lime"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-lime-bold-10); --accent-bg-hover: var(--flavorL-lime-bold-11); --accent-bg-active: var(--flavorL-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-bold-10); --text-on-accent-subtle: var(--flavorL-lime-bold-11); --accent-subtle: var(--flavorL-lime-bold-3); --accent-subtle-hover: var(--flavorL-lime-bold-4); --accent-border: var(--flavorL-lime-bold-7); --focus-ring: var(--flavorL-lime-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="green"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-green-muted-10); --accent-bg-hover: var(--flavorL-green-muted-11); --accent-bg-active: var(--flavorL-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-muted-10); --text-on-accent-subtle: var(--flavorL-green-muted-11); --accent-subtle: var(--flavorL-green-muted-3); --accent-subtle-hover: var(--flavorL-green-muted-4); --accent-border: var(--flavorL-green-muted-7); --focus-ring: var(--flavorL-green-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="green"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-green-regular-10); --accent-bg-hover: var(--flavorL-green-regular-11); --accent-bg-active: var(--flavorL-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-regular-10); --text-on-accent-subtle: var(--flavorL-green-regular-11); --accent-subtle: var(--flavorL-green-regular-3); --accent-subtle-hover: var(--flavorL-green-regular-4); --accent-border: var(--flavorL-green-regular-7); --focus-ring: var(--flavorL-green-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="green"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-green-bold-10); --accent-bg-hover: var(--flavorL-green-bold-11); --accent-bg-active: var(--flavorL-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-bold-10); --text-on-accent-subtle: var(--flavorL-green-bold-11); --accent-subtle: var(--flavorL-green-bold-3); --accent-subtle-hover: var(--flavorL-green-bold-4); --accent-border: var(--flavorL-green-bold-7); --focus-ring: var(--flavorL-green-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="teal"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-teal-muted-10); --accent-bg-hover: var(--flavorL-teal-muted-11); --accent-bg-active: var(--flavorL-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-muted-10); --text-on-accent-subtle: var(--flavorL-teal-muted-11); --accent-subtle: var(--flavorL-teal-muted-3); --accent-subtle-hover: var(--flavorL-teal-muted-4); --accent-border: var(--flavorL-teal-muted-7); --focus-ring: var(--flavorL-teal-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="teal"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-teal-regular-10); --accent-bg-hover: var(--flavorL-teal-regular-11); --accent-bg-active: var(--flavorL-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-regular-10); --text-on-accent-subtle: var(--flavorL-teal-regular-11); --accent-subtle: var(--flavorL-teal-regular-3); --accent-subtle-hover: var(--flavorL-teal-regular-4); --accent-border: var(--flavorL-teal-regular-7); --focus-ring: var(--flavorL-teal-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="teal"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-teal-bold-10); --accent-bg-hover: var(--flavorL-teal-bold-11); --accent-bg-active: var(--flavorL-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-bold-10); --text-on-accent-subtle: var(--flavorL-teal-bold-11); --accent-subtle: var(--flavorL-teal-bold-3); --accent-subtle-hover: var(--flavorL-teal-bold-4); --accent-border: var(--flavorL-teal-bold-7); --focus-ring: var(--flavorL-teal-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="cyan"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-muted-10); --accent-bg-hover: var(--flavorL-cyan-muted-11); --accent-bg-active: var(--flavorL-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-muted-10); --text-on-accent-subtle: var(--flavorL-cyan-muted-11); --accent-subtle: var(--flavorL-cyan-muted-3); --accent-subtle-hover: var(--flavorL-cyan-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="cyan"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-regular-10); --accent-bg-hover: var(--flavorL-cyan-regular-11); --accent-bg-active: var(--flavorL-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-regular-10); --text-on-accent-subtle: var(--flavorL-cyan-regular-11); --accent-subtle: var(--flavorL-cyan-regular-3); --accent-subtle-hover: var(--flavorL-cyan-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="cyan"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-bold-10); --accent-bg-hover: var(--flavorL-cyan-bold-11); --accent-bg-active: var(--flavorL-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-bold-10); --text-on-accent-subtle: var(--flavorL-cyan-bold-11); --accent-subtle: var(--flavorL-cyan-bold-3); --accent-subtle-hover: var(--flavorL-cyan-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="blue"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-10); --accent-bg-hover: var(--flavorL-blue-muted-11); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-10); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-blue-muted-7); --focus-ring: var(--flavorL-blue-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="blue"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-10); --accent-bg-hover: var(--flavorL-blue-regular-11); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-10); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-blue-regular-7); --focus-ring: var(--flavorL-blue-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="blue"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-10); --accent-bg-hover: var(--flavorL-blue-bold-11); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-10); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-blue-bold-7); --focus-ring: var(--flavorL-blue-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="violet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-violet-muted-10); --accent-bg-hover: var(--flavorL-violet-muted-11); --accent-bg-active: var(--flavorL-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-muted-10); --text-on-accent-subtle: var(--flavorL-violet-muted-11); --accent-subtle: var(--flavorL-violet-muted-3); --accent-subtle-hover: var(--flavorL-violet-muted-4); --accent-border: var(--flavorL-violet-muted-7); --focus-ring: var(--flavorL-violet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="violet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-violet-regular-10); --accent-bg-hover: var(--flavorL-violet-regular-11); --accent-bg-active: var(--flavorL-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-regular-10); --text-on-accent-subtle: var(--flavorL-violet-regular-11); --accent-subtle: var(--flavorL-violet-regular-3); --accent-subtle-hover: var(--flavorL-violet-regular-4); --accent-border: var(--flavorL-violet-regular-7); --focus-ring: var(--flavorL-violet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="violet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-violet-bold-10); --accent-bg-hover: var(--flavorL-violet-bold-11); --accent-bg-active: var(--flavorL-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-bold-10); --text-on-accent-subtle: var(--flavorL-violet-bold-11); --accent-subtle: var(--flavorL-violet-bold-3); --accent-subtle-hover: var(--flavorL-violet-bold-4); --accent-border: var(--flavorL-violet-bold-7); --focus-ring: var(--flavorL-violet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="purple"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-purple-muted-10); --accent-bg-hover: var(--flavorL-purple-muted-11); --accent-bg-active: var(--flavorL-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-muted-10); --text-on-accent-subtle: var(--flavorL-purple-muted-11); --accent-subtle: var(--flavorL-purple-muted-3); --accent-subtle-hover: var(--flavorL-purple-muted-4); --accent-border: var(--flavorL-purple-muted-7); --focus-ring: var(--flavorL-purple-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="purple"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-purple-regular-10); --accent-bg-hover: var(--flavorL-purple-regular-11); --accent-bg-active: var(--flavorL-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-regular-10); --text-on-accent-subtle: var(--flavorL-purple-regular-11); --accent-subtle: var(--flavorL-purple-regular-3); --accent-subtle-hover: var(--flavorL-purple-regular-4); --accent-border: var(--flavorL-purple-regular-7); --focus-ring: var(--flavorL-purple-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="purple"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-purple-bold-10); --accent-bg-hover: var(--flavorL-purple-bold-11); --accent-bg-active: var(--flavorL-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-bold-10); --text-on-accent-subtle: var(--flavorL-purple-bold-11); --accent-subtle: var(--flavorL-purple-bold-3); --accent-subtle-hover: var(--flavorL-purple-bold-4); --accent-border: var(--flavorL-purple-bold-7); --focus-ring: var(--flavorL-purple-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="magenta"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-10); --accent-bg-hover: var(--flavorL-magenta-muted-11); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-10); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-magenta-muted-7); --focus-ring: var(--flavorL-magenta-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-hue="magenta"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-10); --accent-bg-hover: var(--flavorL-magenta-regular-11); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-10); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-magenta-regular-7); --focus-ring: var(--flavorL-magenta-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-hue="magenta"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-10); --accent-bg-hover: var(--flavorL-magenta-bold-11); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-10); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-magenta-bold-7); --focus-ring: var(--flavorL-magenta-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-hue="brand"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-10); --accent-bg-hover: var(--flavorL-blue-muted-11); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-10); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-orange-muted-10); --secondary-bg-hover: var(--flavorL-orange-muted-11); --secondary-bg-active: var(--flavorL-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-muted-3); --secondary-subtle-hover: var(--flavorL-orange-muted-4); --secondary-border: var(--flavorL-orange-muted-9); --secondary-text: var(--flavorL-orange-muted-10); --text-on-secondary-subtle: var(--flavorL-orange-muted-11); } :root[data-hue="brand"][data-sat="regular"][data-bg="media"], :root:not([data-hue])[data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-10); --accent-bg-hover: var(--flavorL-blue-regular-11); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-10); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-orange-regular-10); --secondary-bg-hover: var(--flavorL-orange-regular-11); --secondary-bg-active: var(--flavorL-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-regular-3); --secondary-subtle-hover: var(--flavorL-orange-regular-4); --secondary-border: var(--flavorL-orange-regular-9); --secondary-text: var(--flavorL-orange-regular-10); --text-on-secondary-subtle: var(--flavorL-orange-regular-11); } :root[data-hue="brand"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-10); --accent-bg-hover: var(--flavorL-blue-bold-11); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-10); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-orange-bold-10); --secondary-bg-hover: var(--flavorL-orange-bold-11); --secondary-bg-active: var(--flavorL-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-bold-3); --secondary-subtle-hover: var(--flavorL-orange-bold-4); --secondary-border: var(--flavorL-orange-bold-9); --secondary-text: var(--flavorL-orange-bold-10); --text-on-secondary-subtle: var(--flavorL-orange-bold-11); } :root[data-hue="brand2"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-10); --accent-bg-hover: var(--flavorL-magenta-muted-11); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-10); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-cyan-muted-10); --secondary-bg-hover: var(--flavorL-cyan-muted-11); --secondary-bg-active: var(--flavorL-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-muted-3); --secondary-subtle-hover: var(--flavorL-cyan-muted-4); --secondary-border: var(--flavorL-cyan-muted-9); --secondary-text: var(--flavorL-cyan-muted-10); --text-on-secondary-subtle: var(--flavorL-cyan-muted-11); } :root[data-hue="brand2"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-10); --accent-bg-hover: var(--flavorL-magenta-regular-11); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-10); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-cyan-regular-10); --secondary-bg-hover: var(--flavorL-cyan-regular-11); --secondary-bg-active: var(--flavorL-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-regular-3); --secondary-subtle-hover: var(--flavorL-cyan-regular-4); --secondary-border: var(--flavorL-cyan-regular-9); --secondary-text: var(--flavorL-cyan-regular-10); --text-on-secondary-subtle: var(--flavorL-cyan-regular-11); } :root[data-hue="brand2"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-10); --accent-bg-hover: var(--flavorL-magenta-bold-11); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-10); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-cyan-bold-10); --secondary-bg-hover: var(--flavorL-cyan-bold-11); --secondary-bg-active: var(--flavorL-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-bold-3); --secondary-subtle-hover: var(--flavorL-cyan-bold-4); --secondary-border: var(--flavorL-cyan-bold-9); --secondary-text: var(--flavorL-cyan-bold-10); --text-on-secondary-subtle: var(--flavorL-cyan-bold-11); } :root[data-contrast="aaa"][data-sat="muted"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-11); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-11); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-12); --success-solid: var(--flavorL-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-contrast="aaa"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-11); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-11); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-12); --success-solid: var(--flavorL-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-contrast="aaa"][data-sat="bold"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-11); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-11); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-12); --success-solid: var(--flavorL-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-muted-11); --accent-bg-hover: var(--flavorL-neutral-muted-12); --accent-bg-active: var(--flavorL-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-muted-11); --text-on-accent-subtle: var(--flavorL-neutral-muted-11); --accent-subtle: var(--flavorL-neutral-muted-3); --accent-subtle-hover: var(--flavorL-neutral-muted-4); --accent-border: var(--flavorL-neutral-muted-7); --focus-ring: var(--flavorL-neutral-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-regular-11); --accent-bg-hover: var(--flavorL-neutral-regular-12); --accent-bg-active: var(--flavorL-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-regular-11); --text-on-accent-subtle: var(--flavorL-neutral-regular-11); --accent-subtle: var(--flavorL-neutral-regular-3); --accent-subtle-hover: var(--flavorL-neutral-regular-4); --accent-border: var(--flavorL-neutral-regular-7); --focus-ring: var(--flavorL-neutral-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-bold-11); --accent-bg-hover: var(--flavorL-neutral-bold-12); --accent-bg-active: var(--flavorL-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-bold-11); --text-on-accent-subtle: var(--flavorL-neutral-bold-11); --accent-subtle: var(--flavorL-neutral-bold-3); --accent-subtle-hover: var(--flavorL-neutral-bold-4); --accent-border: var(--flavorL-neutral-bold-7); --focus-ring: var(--flavorL-neutral-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-red-muted-11); --accent-bg-hover: var(--flavorL-red-muted-12); --accent-bg-active: var(--flavorL-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-muted-11); --text-on-accent-subtle: var(--flavorL-red-muted-11); --accent-subtle: var(--flavorL-red-muted-3); --accent-subtle-hover: var(--flavorL-red-muted-4); --accent-border: var(--flavorL-red-muted-7); --focus-ring: var(--flavorL-red-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-red-regular-11); --accent-bg-hover: var(--flavorL-red-regular-12); --accent-bg-active: var(--flavorL-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-regular-11); --text-on-accent-subtle: var(--flavorL-red-regular-11); --accent-subtle: var(--flavorL-red-regular-3); --accent-subtle-hover: var(--flavorL-red-regular-4); --accent-border: var(--flavorL-red-regular-7); --focus-ring: var(--flavorL-red-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-red-bold-11); --accent-bg-hover: var(--flavorL-red-bold-12); --accent-bg-active: var(--flavorL-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-bold-11); --text-on-accent-subtle: var(--flavorL-red-bold-11); --accent-subtle: var(--flavorL-red-bold-3); --accent-subtle-hover: var(--flavorL-red-bold-4); --accent-border: var(--flavorL-red-bold-7); --focus-ring: var(--flavorL-red-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-muted-11); --accent-bg-hover: var(--flavorL-scarlet-muted-12); --accent-bg-active: var(--flavorL-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-muted-11); --text-on-accent-subtle: var(--flavorL-scarlet-muted-11); --accent-subtle: var(--flavorL-scarlet-muted-3); --accent-subtle-hover: var(--flavorL-scarlet-muted-4); --accent-border: var(--flavorL-scarlet-muted-7); --focus-ring: var(--flavorL-scarlet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-regular-11); --accent-bg-hover: var(--flavorL-scarlet-regular-12); --accent-bg-active: var(--flavorL-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-regular-11); --text-on-accent-subtle: var(--flavorL-scarlet-regular-11); --accent-subtle: var(--flavorL-scarlet-regular-3); --accent-subtle-hover: var(--flavorL-scarlet-regular-4); --accent-border: var(--flavorL-scarlet-regular-7); --focus-ring: var(--flavorL-scarlet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-bold-11); --accent-bg-hover: var(--flavorL-scarlet-bold-12); --accent-bg-active: var(--flavorL-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-bold-11); --text-on-accent-subtle: var(--flavorL-scarlet-bold-11); --accent-subtle: var(--flavorL-scarlet-bold-3); --accent-subtle-hover: var(--flavorL-scarlet-bold-4); --accent-border: var(--flavorL-scarlet-bold-7); --focus-ring: var(--flavorL-scarlet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-orange-muted-11); --accent-bg-hover: var(--flavorL-orange-muted-12); --accent-bg-active: var(--flavorL-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-muted-11); --text-on-accent-subtle: var(--flavorL-orange-muted-11); --accent-subtle: var(--flavorL-orange-muted-3); --accent-subtle-hover: var(--flavorL-orange-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-orange-regular-11); --accent-bg-hover: var(--flavorL-orange-regular-12); --accent-bg-active: var(--flavorL-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-regular-11); --text-on-accent-subtle: var(--flavorL-orange-regular-11); --accent-subtle: var(--flavorL-orange-regular-3); --accent-subtle-hover: var(--flavorL-orange-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-orange-bold-11); --accent-bg-hover: var(--flavorL-orange-bold-12); --accent-bg-active: var(--flavorL-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-bold-11); --text-on-accent-subtle: var(--flavorL-orange-bold-11); --accent-subtle: var(--flavorL-orange-bold-3); --accent-subtle-hover: var(--flavorL-orange-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-muted-11); --accent-bg-hover: var(--flavorL-tangerine-muted-12); --accent-bg-active: var(--flavorL-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-muted-11); --text-on-accent-subtle: var(--flavorL-tangerine-muted-11); --accent-subtle: var(--flavorL-tangerine-muted-3); --accent-subtle-hover: var(--flavorL-tangerine-muted-4); --accent-border: var(--flavorL-tangerine-muted-7); --focus-ring: var(--flavorL-tangerine-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-regular-11); --accent-bg-hover: var(--flavorL-tangerine-regular-12); --accent-bg-active: var(--flavorL-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-regular-11); --text-on-accent-subtle: var(--flavorL-tangerine-regular-11); --accent-subtle: var(--flavorL-tangerine-regular-3); --accent-subtle-hover: var(--flavorL-tangerine-regular-4); --accent-border: var(--flavorL-tangerine-regular-7); --focus-ring: var(--flavorL-tangerine-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-bold-11); --accent-bg-hover: var(--flavorL-tangerine-bold-12); --accent-bg-active: var(--flavorL-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-bold-11); --text-on-accent-subtle: var(--flavorL-tangerine-bold-11); --accent-subtle: var(--flavorL-tangerine-bold-3); --accent-subtle-hover: var(--flavorL-tangerine-bold-4); --accent-border: var(--flavorL-tangerine-bold-7); --focus-ring: var(--flavorL-tangerine-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-muted-11); --accent-bg-hover: var(--flavorL-yellow-muted-12); --accent-bg-active: var(--flavorL-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-muted-11); --text-on-accent-subtle: var(--flavorL-yellow-muted-11); --accent-subtle: var(--flavorL-yellow-muted-3); --accent-subtle-hover: var(--flavorL-yellow-muted-4); --accent-border: var(--flavorL-yellow-muted-7); --focus-ring: var(--flavorL-yellow-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-regular-11); --accent-bg-hover: var(--flavorL-yellow-regular-12); --accent-bg-active: var(--flavorL-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-regular-11); --text-on-accent-subtle: var(--flavorL-yellow-regular-11); --accent-subtle: var(--flavorL-yellow-regular-3); --accent-subtle-hover: var(--flavorL-yellow-regular-4); --accent-border: var(--flavorL-yellow-regular-7); --focus-ring: var(--flavorL-yellow-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-bold-11); --accent-bg-hover: var(--flavorL-yellow-bold-12); --accent-bg-active: var(--flavorL-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-bold-11); --text-on-accent-subtle: var(--flavorL-yellow-bold-11); --accent-subtle: var(--flavorL-yellow-bold-3); --accent-subtle-hover: var(--flavorL-yellow-bold-4); --accent-border: var(--flavorL-yellow-bold-7); --focus-ring: var(--flavorL-yellow-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-lime-muted-11); --accent-bg-hover: var(--flavorL-lime-muted-12); --accent-bg-active: var(--flavorL-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-muted-11); --text-on-accent-subtle: var(--flavorL-lime-muted-11); --accent-subtle: var(--flavorL-lime-muted-3); --accent-subtle-hover: var(--flavorL-lime-muted-4); --accent-border: var(--flavorL-lime-muted-7); --focus-ring: var(--flavorL-lime-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-lime-regular-11); --accent-bg-hover: var(--flavorL-lime-regular-12); --accent-bg-active: var(--flavorL-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-regular-11); --text-on-accent-subtle: var(--flavorL-lime-regular-11); --accent-subtle: var(--flavorL-lime-regular-3); --accent-subtle-hover: var(--flavorL-lime-regular-4); --accent-border: var(--flavorL-lime-regular-7); --focus-ring: var(--flavorL-lime-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-lime-bold-11); --accent-bg-hover: var(--flavorL-lime-bold-12); --accent-bg-active: var(--flavorL-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-bold-11); --text-on-accent-subtle: var(--flavorL-lime-bold-11); --accent-subtle: var(--flavorL-lime-bold-3); --accent-subtle-hover: var(--flavorL-lime-bold-4); --accent-border: var(--flavorL-lime-bold-7); --focus-ring: var(--flavorL-lime-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-green-muted-11); --accent-bg-hover: var(--flavorL-green-muted-12); --accent-bg-active: var(--flavorL-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-muted-11); --text-on-accent-subtle: var(--flavorL-green-muted-11); --accent-subtle: var(--flavorL-green-muted-3); --accent-subtle-hover: var(--flavorL-green-muted-4); --accent-border: var(--flavorL-green-muted-7); --focus-ring: var(--flavorL-green-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-green-regular-11); --accent-bg-hover: var(--flavorL-green-regular-12); --accent-bg-active: var(--flavorL-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-regular-11); --text-on-accent-subtle: var(--flavorL-green-regular-12); --accent-subtle: var(--flavorL-green-regular-3); --accent-subtle-hover: var(--flavorL-green-regular-4); --accent-border: var(--flavorL-green-regular-7); --focus-ring: var(--flavorL-green-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-green-bold-11); --accent-bg-hover: var(--flavorL-green-bold-12); --accent-bg-active: var(--flavorL-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-bold-11); --text-on-accent-subtle: var(--flavorL-green-bold-12); --accent-subtle: var(--flavorL-green-bold-3); --accent-subtle-hover: var(--flavorL-green-bold-4); --accent-border: var(--flavorL-green-bold-7); --focus-ring: var(--flavorL-green-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-teal-muted-11); --accent-bg-hover: var(--flavorL-teal-muted-12); --accent-bg-active: var(--flavorL-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-muted-11); --text-on-accent-subtle: var(--flavorL-teal-muted-11); --accent-subtle: var(--flavorL-teal-muted-3); --accent-subtle-hover: var(--flavorL-teal-muted-4); --accent-border: var(--flavorL-teal-muted-7); --focus-ring: var(--flavorL-teal-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-teal-regular-11); --accent-bg-hover: var(--flavorL-teal-regular-12); --accent-bg-active: var(--flavorL-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-regular-11); --text-on-accent-subtle: var(--flavorL-teal-regular-11); --accent-subtle: var(--flavorL-teal-regular-3); --accent-subtle-hover: var(--flavorL-teal-regular-4); --accent-border: var(--flavorL-teal-regular-7); --focus-ring: var(--flavorL-teal-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-teal-bold-11); --accent-bg-hover: var(--flavorL-teal-bold-12); --accent-bg-active: var(--flavorL-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-bold-11); --text-on-accent-subtle: var(--flavorL-teal-bold-11); --accent-subtle: var(--flavorL-teal-bold-3); --accent-subtle-hover: var(--flavorL-teal-bold-4); --accent-border: var(--flavorL-teal-bold-7); --focus-ring: var(--flavorL-teal-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-muted-11); --accent-bg-hover: var(--flavorL-cyan-muted-12); --accent-bg-active: var(--flavorL-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-muted-11); --text-on-accent-subtle: var(--flavorL-cyan-muted-11); --accent-subtle: var(--flavorL-cyan-muted-3); --accent-subtle-hover: var(--flavorL-cyan-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-regular-11); --accent-bg-hover: var(--flavorL-cyan-regular-12); --accent-bg-active: var(--flavorL-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-regular-11); --text-on-accent-subtle: var(--flavorL-cyan-regular-11); --accent-subtle: var(--flavorL-cyan-regular-3); --accent-subtle-hover: var(--flavorL-cyan-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-bold-11); --accent-bg-hover: var(--flavorL-cyan-bold-12); --accent-bg-active: var(--flavorL-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-bold-11); --text-on-accent-subtle: var(--flavorL-cyan-bold-11); --accent-subtle: var(--flavorL-cyan-bold-3); --accent-subtle-hover: var(--flavorL-cyan-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-11); --accent-bg-hover: var(--flavorL-blue-muted-12); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-11); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-blue-muted-7); --focus-ring: var(--flavorL-blue-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-11); --accent-bg-hover: var(--flavorL-blue-regular-12); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-11); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-blue-regular-7); --focus-ring: var(--flavorL-blue-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-11); --accent-bg-hover: var(--flavorL-blue-bold-12); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-11); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-blue-bold-7); --focus-ring: var(--flavorL-blue-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-violet-muted-11); --accent-bg-hover: var(--flavorL-violet-muted-12); --accent-bg-active: var(--flavorL-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-muted-11); --text-on-accent-subtle: var(--flavorL-violet-muted-11); --accent-subtle: var(--flavorL-violet-muted-3); --accent-subtle-hover: var(--flavorL-violet-muted-4); --accent-border: var(--flavorL-violet-muted-7); --focus-ring: var(--flavorL-violet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-violet-regular-11); --accent-bg-hover: var(--flavorL-violet-regular-12); --accent-bg-active: var(--flavorL-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-regular-11); --text-on-accent-subtle: var(--flavorL-violet-regular-11); --accent-subtle: var(--flavorL-violet-regular-3); --accent-subtle-hover: var(--flavorL-violet-regular-4); --accent-border: var(--flavorL-violet-regular-7); --focus-ring: var(--flavorL-violet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-violet-bold-11); --accent-bg-hover: var(--flavorL-violet-bold-12); --accent-bg-active: var(--flavorL-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-bold-11); --text-on-accent-subtle: var(--flavorL-violet-bold-11); --accent-subtle: var(--flavorL-violet-bold-3); --accent-subtle-hover: var(--flavorL-violet-bold-4); --accent-border: var(--flavorL-violet-bold-7); --focus-ring: var(--flavorL-violet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-purple-muted-11); --accent-bg-hover: var(--flavorL-purple-muted-12); --accent-bg-active: var(--flavorL-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-muted-11); --text-on-accent-subtle: var(--flavorL-purple-muted-11); --accent-subtle: var(--flavorL-purple-muted-3); --accent-subtle-hover: var(--flavorL-purple-muted-4); --accent-border: var(--flavorL-purple-muted-7); --focus-ring: var(--flavorL-purple-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-purple-regular-11); --accent-bg-hover: var(--flavorL-purple-regular-12); --accent-bg-active: var(--flavorL-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-regular-11); --text-on-accent-subtle: var(--flavorL-purple-regular-11); --accent-subtle: var(--flavorL-purple-regular-3); --accent-subtle-hover: var(--flavorL-purple-regular-4); --accent-border: var(--flavorL-purple-regular-7); --focus-ring: var(--flavorL-purple-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-purple-bold-11); --accent-bg-hover: var(--flavorL-purple-bold-12); --accent-bg-active: var(--flavorL-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-bold-11); --text-on-accent-subtle: var(--flavorL-purple-bold-11); --accent-subtle: var(--flavorL-purple-bold-3); --accent-subtle-hover: var(--flavorL-purple-bold-4); --accent-border: var(--flavorL-purple-bold-7); --focus-ring: var(--flavorL-purple-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-11); --accent-bg-hover: var(--flavorL-magenta-muted-12); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-11); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-magenta-muted-7); --focus-ring: var(--flavorL-magenta-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-11); --accent-bg-hover: var(--flavorL-magenta-regular-12); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-11); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-magenta-regular-7); --focus-ring: var(--flavorL-magenta-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-11); --accent-bg-hover: var(--flavorL-magenta-bold-12); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-11); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-magenta-bold-7); --focus-ring: var(--flavorL-magenta-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-11); --accent-bg-hover: var(--flavorL-blue-muted-12); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-11); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-orange-muted-11); --secondary-bg-hover: var(--flavorL-orange-muted-12); --secondary-bg-active: var(--flavorL-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-muted-3); --secondary-subtle-hover: var(--flavorL-orange-muted-4); --secondary-border: var(--flavorL-orange-muted-9); --secondary-text: var(--flavorL-orange-muted-11); --text-on-secondary-subtle: var(--flavorL-orange-muted-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="media"], :root[data-contrast="aaa"]:not([data-hue])[data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-11); --accent-bg-hover: var(--flavorL-blue-regular-12); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-11); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-orange-regular-11); --secondary-bg-hover: var(--flavorL-orange-regular-12); --secondary-bg-active: var(--flavorL-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-regular-3); --secondary-subtle-hover: var(--flavorL-orange-regular-4); --secondary-border: var(--flavorL-orange-regular-9); --secondary-text: var(--flavorL-orange-regular-11); --text-on-secondary-subtle: var(--flavorL-orange-regular-11); } :root[data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-11); --accent-bg-hover: var(--flavorL-blue-bold-12); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-11); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-orange-bold-11); --secondary-bg-hover: var(--flavorL-orange-bold-12); --secondary-bg-active: var(--flavorL-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-bold-3); --secondary-subtle-hover: var(--flavorL-orange-bold-4); --secondary-border: var(--flavorL-orange-bold-9); --secondary-text: var(--flavorL-orange-bold-11); --text-on-secondary-subtle: var(--flavorL-orange-bold-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-11); --accent-bg-hover: var(--flavorL-magenta-muted-12); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-11); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-cyan-muted-11); --secondary-bg-hover: var(--flavorL-cyan-muted-12); --secondary-bg-active: var(--flavorL-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-muted-3); --secondary-subtle-hover: var(--flavorL-cyan-muted-4); --secondary-border: var(--flavorL-cyan-muted-9); --secondary-text: var(--flavorL-cyan-muted-11); --text-on-secondary-subtle: var(--flavorL-cyan-muted-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-11); --accent-bg-hover: var(--flavorL-magenta-regular-12); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-11); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-cyan-regular-11); --secondary-bg-hover: var(--flavorL-cyan-regular-12); --secondary-bg-active: var(--flavorL-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-regular-3); --secondary-subtle-hover: var(--flavorL-cyan-regular-4); --secondary-border: var(--flavorL-cyan-regular-9); --secondary-text: var(--flavorL-cyan-regular-11); --text-on-secondary-subtle: var(--flavorL-cyan-regular-11); } :root[data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-11); --accent-bg-hover: var(--flavorL-magenta-bold-12); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-11); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-cyan-bold-11); --secondary-bg-hover: var(--flavorL-cyan-bold-12); --secondary-bg-active: var(--flavorL-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-bold-3); --secondary-subtle-hover: var(--flavorL-cyan-bold-4); --secondary-border: var(--flavorL-cyan-bold-9); --secondary-text: var(--flavorL-cyan-bold-11); --text-on-secondary-subtle: var(--flavorL-cyan-bold-11); } :root[data-mode="dark"][data-sat="muted"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-10); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-10); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-11); --success-solid: var(--flavorL-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-10); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-10); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-11); --success-solid: var(--flavorL-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-sat="bold"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-10); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-10); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-11); --success-solid: var(--flavorL-green-regular-10); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-10); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-10); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-10); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-hue="neutral"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-muted-10); --accent-bg-hover: var(--flavorL-neutral-muted-11); --accent-bg-active: var(--flavorL-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-muted-10); --text-on-accent-subtle: var(--flavorL-neutral-muted-11); --accent-subtle: var(--flavorL-neutral-muted-3); --accent-subtle-hover: var(--flavorL-neutral-muted-4); --accent-border: var(--flavorL-neutral-muted-7); --focus-ring: var(--flavorL-neutral-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-regular-10); --accent-bg-hover: var(--flavorL-neutral-regular-11); --accent-bg-active: var(--flavorL-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-regular-10); --text-on-accent-subtle: var(--flavorL-neutral-regular-11); --accent-subtle: var(--flavorL-neutral-regular-3); --accent-subtle-hover: var(--flavorL-neutral-regular-4); --accent-border: var(--flavorL-neutral-regular-7); --focus-ring: var(--flavorL-neutral-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="neutral"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-bold-10); --accent-bg-hover: var(--flavorL-neutral-bold-11); --accent-bg-active: var(--flavorL-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-bold-10); --text-on-accent-subtle: var(--flavorL-neutral-bold-11); --accent-subtle: var(--flavorL-neutral-bold-3); --accent-subtle-hover: var(--flavorL-neutral-bold-4); --accent-border: var(--flavorL-neutral-bold-7); --focus-ring: var(--flavorL-neutral-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="red"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-red-muted-10); --accent-bg-hover: var(--flavorL-red-muted-11); --accent-bg-active: var(--flavorL-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-muted-10); --text-on-accent-subtle: var(--flavorL-red-muted-11); --accent-subtle: var(--flavorL-red-muted-3); --accent-subtle-hover: var(--flavorL-red-muted-4); --accent-border: var(--flavorL-red-muted-7); --focus-ring: var(--flavorL-red-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="red"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-red-regular-10); --accent-bg-hover: var(--flavorL-red-regular-11); --accent-bg-active: var(--flavorL-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-regular-10); --text-on-accent-subtle: var(--flavorL-red-regular-11); --accent-subtle: var(--flavorL-red-regular-3); --accent-subtle-hover: var(--flavorL-red-regular-4); --accent-border: var(--flavorL-red-regular-7); --focus-ring: var(--flavorL-red-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="red"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-red-bold-10); --accent-bg-hover: var(--flavorL-red-bold-11); --accent-bg-active: var(--flavorL-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-bold-10); --text-on-accent-subtle: var(--flavorL-red-bold-11); --accent-subtle: var(--flavorL-red-bold-3); --accent-subtle-hover: var(--flavorL-red-bold-4); --accent-border: var(--flavorL-red-bold-7); --focus-ring: var(--flavorL-red-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-muted-10); --accent-bg-hover: var(--flavorL-scarlet-muted-11); --accent-bg-active: var(--flavorL-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-muted-10); --text-on-accent-subtle: var(--flavorL-scarlet-muted-11); --accent-subtle: var(--flavorL-scarlet-muted-3); --accent-subtle-hover: var(--flavorL-scarlet-muted-4); --accent-border: var(--flavorL-scarlet-muted-7); --focus-ring: var(--flavorL-scarlet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-regular-10); --accent-bg-hover: var(--flavorL-scarlet-regular-11); --accent-bg-active: var(--flavorL-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-regular-10); --text-on-accent-subtle: var(--flavorL-scarlet-regular-11); --accent-subtle: var(--flavorL-scarlet-regular-3); --accent-subtle-hover: var(--flavorL-scarlet-regular-4); --accent-border: var(--flavorL-scarlet-regular-7); --focus-ring: var(--flavorL-scarlet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="scarlet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-bold-10); --accent-bg-hover: var(--flavorL-scarlet-bold-11); --accent-bg-active: var(--flavorL-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-bold-10); --text-on-accent-subtle: var(--flavorL-scarlet-bold-11); --accent-subtle: var(--flavorL-scarlet-bold-3); --accent-subtle-hover: var(--flavorL-scarlet-bold-4); --accent-border: var(--flavorL-scarlet-bold-7); --focus-ring: var(--flavorL-scarlet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-orange-muted-10); --accent-bg-hover: var(--flavorL-orange-muted-11); --accent-bg-active: var(--flavorL-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-muted-10); --text-on-accent-subtle: var(--flavorL-orange-muted-11); --accent-subtle: var(--flavorL-orange-muted-3); --accent-subtle-hover: var(--flavorL-orange-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-orange-regular-10); --accent-bg-hover: var(--flavorL-orange-regular-11); --accent-bg-active: var(--flavorL-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-regular-10); --text-on-accent-subtle: var(--flavorL-orange-regular-11); --accent-subtle: var(--flavorL-orange-regular-3); --accent-subtle-hover: var(--flavorL-orange-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="orange"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-orange-bold-10); --accent-bg-hover: var(--flavorL-orange-bold-11); --accent-bg-active: var(--flavorL-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-bold-10); --text-on-accent-subtle: var(--flavorL-orange-bold-11); --accent-subtle: var(--flavorL-orange-bold-3); --accent-subtle-hover: var(--flavorL-orange-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-muted-10); --accent-bg-hover: var(--flavorL-tangerine-muted-11); --accent-bg-active: var(--flavorL-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-muted-10); --text-on-accent-subtle: var(--flavorL-tangerine-muted-11); --accent-subtle: var(--flavorL-tangerine-muted-3); --accent-subtle-hover: var(--flavorL-tangerine-muted-4); --accent-border: var(--flavorL-tangerine-muted-7); --focus-ring: var(--flavorL-tangerine-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-regular-10); --accent-bg-hover: var(--flavorL-tangerine-regular-11); --accent-bg-active: var(--flavorL-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-regular-10); --text-on-accent-subtle: var(--flavorL-tangerine-regular-11); --accent-subtle: var(--flavorL-tangerine-regular-3); --accent-subtle-hover: var(--flavorL-tangerine-regular-4); --accent-border: var(--flavorL-tangerine-regular-7); --focus-ring: var(--flavorL-tangerine-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="tangerine"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-bold-10); --accent-bg-hover: var(--flavorL-tangerine-bold-11); --accent-bg-active: var(--flavorL-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-bold-10); --text-on-accent-subtle: var(--flavorL-tangerine-bold-11); --accent-subtle: var(--flavorL-tangerine-bold-3); --accent-subtle-hover: var(--flavorL-tangerine-bold-4); --accent-border: var(--flavorL-tangerine-bold-7); --focus-ring: var(--flavorL-tangerine-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-muted-10); --accent-bg-hover: var(--flavorL-yellow-muted-11); --accent-bg-active: var(--flavorL-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-muted-10); --text-on-accent-subtle: var(--flavorL-yellow-muted-11); --accent-subtle: var(--flavorL-yellow-muted-3); --accent-subtle-hover: var(--flavorL-yellow-muted-4); --accent-border: var(--flavorL-yellow-muted-7); --focus-ring: var(--flavorL-yellow-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-regular-10); --accent-bg-hover: var(--flavorL-yellow-regular-11); --accent-bg-active: var(--flavorL-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-regular-10); --text-on-accent-subtle: var(--flavorL-yellow-regular-11); --accent-subtle: var(--flavorL-yellow-regular-3); --accent-subtle-hover: var(--flavorL-yellow-regular-4); --accent-border: var(--flavorL-yellow-regular-7); --focus-ring: var(--flavorL-yellow-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="yellow"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-bold-10); --accent-bg-hover: var(--flavorL-yellow-bold-11); --accent-bg-active: var(--flavorL-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-bold-10); --text-on-accent-subtle: var(--flavorL-yellow-bold-11); --accent-subtle: var(--flavorL-yellow-bold-3); --accent-subtle-hover: var(--flavorL-yellow-bold-4); --accent-border: var(--flavorL-yellow-bold-7); --focus-ring: var(--flavorL-yellow-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-lime-muted-10); --accent-bg-hover: var(--flavorL-lime-muted-11); --accent-bg-active: var(--flavorL-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-muted-10); --text-on-accent-subtle: var(--flavorL-lime-muted-11); --accent-subtle: var(--flavorL-lime-muted-3); --accent-subtle-hover: var(--flavorL-lime-muted-4); --accent-border: var(--flavorL-lime-muted-7); --focus-ring: var(--flavorL-lime-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-lime-regular-10); --accent-bg-hover: var(--flavorL-lime-regular-11); --accent-bg-active: var(--flavorL-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-regular-10); --text-on-accent-subtle: var(--flavorL-lime-regular-11); --accent-subtle: var(--flavorL-lime-regular-3); --accent-subtle-hover: var(--flavorL-lime-regular-4); --accent-border: var(--flavorL-lime-regular-7); --focus-ring: var(--flavorL-lime-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="lime"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-lime-bold-10); --accent-bg-hover: var(--flavorL-lime-bold-11); --accent-bg-active: var(--flavorL-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-bold-10); --text-on-accent-subtle: var(--flavorL-lime-bold-11); --accent-subtle: var(--flavorL-lime-bold-3); --accent-subtle-hover: var(--flavorL-lime-bold-4); --accent-border: var(--flavorL-lime-bold-7); --focus-ring: var(--flavorL-lime-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="green"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-green-muted-10); --accent-bg-hover: var(--flavorL-green-muted-11); --accent-bg-active: var(--flavorL-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-muted-10); --text-on-accent-subtle: var(--flavorL-green-muted-11); --accent-subtle: var(--flavorL-green-muted-3); --accent-subtle-hover: var(--flavorL-green-muted-4); --accent-border: var(--flavorL-green-muted-7); --focus-ring: var(--flavorL-green-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="green"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-green-regular-10); --accent-bg-hover: var(--flavorL-green-regular-11); --accent-bg-active: var(--flavorL-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-regular-10); --text-on-accent-subtle: var(--flavorL-green-regular-11); --accent-subtle: var(--flavorL-green-regular-3); --accent-subtle-hover: var(--flavorL-green-regular-4); --accent-border: var(--flavorL-green-regular-7); --focus-ring: var(--flavorL-green-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="green"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-green-bold-10); --accent-bg-hover: var(--flavorL-green-bold-11); --accent-bg-active: var(--flavorL-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-bold-10); --text-on-accent-subtle: var(--flavorL-green-bold-11); --accent-subtle: var(--flavorL-green-bold-3); --accent-subtle-hover: var(--flavorL-green-bold-4); --accent-border: var(--flavorL-green-bold-7); --focus-ring: var(--flavorL-green-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-teal-muted-10); --accent-bg-hover: var(--flavorL-teal-muted-11); --accent-bg-active: var(--flavorL-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-muted-10); --text-on-accent-subtle: var(--flavorL-teal-muted-11); --accent-subtle: var(--flavorL-teal-muted-3); --accent-subtle-hover: var(--flavorL-teal-muted-4); --accent-border: var(--flavorL-teal-muted-7); --focus-ring: var(--flavorL-teal-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-teal-regular-10); --accent-bg-hover: var(--flavorL-teal-regular-11); --accent-bg-active: var(--flavorL-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-regular-10); --text-on-accent-subtle: var(--flavorL-teal-regular-11); --accent-subtle: var(--flavorL-teal-regular-3); --accent-subtle-hover: var(--flavorL-teal-regular-4); --accent-border: var(--flavorL-teal-regular-7); --focus-ring: var(--flavorL-teal-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="teal"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-teal-bold-10); --accent-bg-hover: var(--flavorL-teal-bold-11); --accent-bg-active: var(--flavorL-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-bold-10); --text-on-accent-subtle: var(--flavorL-teal-bold-11); --accent-subtle: var(--flavorL-teal-bold-3); --accent-subtle-hover: var(--flavorL-teal-bold-4); --accent-border: var(--flavorL-teal-bold-7); --focus-ring: var(--flavorL-teal-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-muted-10); --accent-bg-hover: var(--flavorL-cyan-muted-11); --accent-bg-active: var(--flavorL-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-muted-10); --text-on-accent-subtle: var(--flavorL-cyan-muted-11); --accent-subtle: var(--flavorL-cyan-muted-3); --accent-subtle-hover: var(--flavorL-cyan-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-regular-10); --accent-bg-hover: var(--flavorL-cyan-regular-11); --accent-bg-active: var(--flavorL-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-regular-10); --text-on-accent-subtle: var(--flavorL-cyan-regular-11); --accent-subtle: var(--flavorL-cyan-regular-3); --accent-subtle-hover: var(--flavorL-cyan-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="cyan"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-bold-10); --accent-bg-hover: var(--flavorL-cyan-bold-11); --accent-bg-active: var(--flavorL-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-bold-10); --text-on-accent-subtle: var(--flavorL-cyan-bold-11); --accent-subtle: var(--flavorL-cyan-bold-3); --accent-subtle-hover: var(--flavorL-cyan-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-10); --accent-bg-hover: var(--flavorL-blue-muted-11); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-10); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-blue-muted-7); --focus-ring: var(--flavorL-blue-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-10); --accent-bg-hover: var(--flavorL-blue-regular-11); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-10); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-blue-regular-7); --focus-ring: var(--flavorL-blue-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="blue"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-10); --accent-bg-hover: var(--flavorL-blue-bold-11); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-10); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-blue-bold-7); --focus-ring: var(--flavorL-blue-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-violet-muted-10); --accent-bg-hover: var(--flavorL-violet-muted-11); --accent-bg-active: var(--flavorL-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-muted-10); --text-on-accent-subtle: var(--flavorL-violet-muted-11); --accent-subtle: var(--flavorL-violet-muted-3); --accent-subtle-hover: var(--flavorL-violet-muted-4); --accent-border: var(--flavorL-violet-muted-7); --focus-ring: var(--flavorL-violet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-violet-regular-10); --accent-bg-hover: var(--flavorL-violet-regular-11); --accent-bg-active: var(--flavorL-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-regular-10); --text-on-accent-subtle: var(--flavorL-violet-regular-11); --accent-subtle: var(--flavorL-violet-regular-3); --accent-subtle-hover: var(--flavorL-violet-regular-4); --accent-border: var(--flavorL-violet-regular-7); --focus-ring: var(--flavorL-violet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="violet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-violet-bold-10); --accent-bg-hover: var(--flavorL-violet-bold-11); --accent-bg-active: var(--flavorL-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-bold-10); --text-on-accent-subtle: var(--flavorL-violet-bold-11); --accent-subtle: var(--flavorL-violet-bold-3); --accent-subtle-hover: var(--flavorL-violet-bold-4); --accent-border: var(--flavorL-violet-bold-7); --focus-ring: var(--flavorL-violet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-purple-muted-10); --accent-bg-hover: var(--flavorL-purple-muted-11); --accent-bg-active: var(--flavorL-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-muted-10); --text-on-accent-subtle: var(--flavorL-purple-muted-11); --accent-subtle: var(--flavorL-purple-muted-3); --accent-subtle-hover: var(--flavorL-purple-muted-4); --accent-border: var(--flavorL-purple-muted-7); --focus-ring: var(--flavorL-purple-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-purple-regular-10); --accent-bg-hover: var(--flavorL-purple-regular-11); --accent-bg-active: var(--flavorL-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-regular-10); --text-on-accent-subtle: var(--flavorL-purple-regular-11); --accent-subtle: var(--flavorL-purple-regular-3); --accent-subtle-hover: var(--flavorL-purple-regular-4); --accent-border: var(--flavorL-purple-regular-7); --focus-ring: var(--flavorL-purple-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="purple"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-purple-bold-10); --accent-bg-hover: var(--flavorL-purple-bold-11); --accent-bg-active: var(--flavorL-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-bold-10); --text-on-accent-subtle: var(--flavorL-purple-bold-11); --accent-subtle: var(--flavorL-purple-bold-3); --accent-subtle-hover: var(--flavorL-purple-bold-4); --accent-border: var(--flavorL-purple-bold-7); --focus-ring: var(--flavorL-purple-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-10); --accent-bg-hover: var(--flavorL-magenta-muted-11); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-10); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-magenta-muted-7); --focus-ring: var(--flavorL-magenta-muted-9); --secondary-bg: var(--flavorL-neutral-muted-10); --secondary-bg-hover: var(--flavorL-neutral-muted-11); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-10); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-10); --accent-bg-hover: var(--flavorL-magenta-regular-11); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-10); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-magenta-regular-7); --focus-ring: var(--flavorL-magenta-regular-9); --secondary-bg: var(--flavorL-neutral-regular-10); --secondary-bg-hover: var(--flavorL-neutral-regular-11); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-10); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-hue="magenta"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-10); --accent-bg-hover: var(--flavorL-magenta-bold-11); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-10); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-magenta-bold-7); --focus-ring: var(--flavorL-magenta-bold-9); --secondary-bg: var(--flavorL-neutral-bold-10); --secondary-bg-hover: var(--flavorL-neutral-bold-11); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-10); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-10); --accent-bg-hover: var(--flavorL-blue-muted-11); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-10); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-orange-muted-10); --secondary-bg-hover: var(--flavorL-orange-muted-11); --secondary-bg-active: var(--flavorL-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-muted-3); --secondary-subtle-hover: var(--flavorL-orange-muted-4); --secondary-border: var(--flavorL-orange-muted-9); --secondary-text: var(--flavorL-orange-muted-10); --text-on-secondary-subtle: var(--flavorL-orange-muted-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="regular"][data-bg="media"], :root[data-mode="dark"]:not([data-hue])[data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-10); --accent-bg-hover: var(--flavorL-blue-regular-11); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-10); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-orange-regular-10); --secondary-bg-hover: var(--flavorL-orange-regular-11); --secondary-bg-active: var(--flavorL-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-regular-3); --secondary-subtle-hover: var(--flavorL-orange-regular-4); --secondary-border: var(--flavorL-orange-regular-9); --secondary-text: var(--flavorL-orange-regular-10); --text-on-secondary-subtle: var(--flavorL-orange-regular-11); } :root[data-mode="dark"][data-hue="brand"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-10); --accent-bg-hover: var(--flavorL-blue-bold-11); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-10); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-orange-bold-10); --secondary-bg-hover: var(--flavorL-orange-bold-11); --secondary-bg-active: var(--flavorL-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-bold-3); --secondary-subtle-hover: var(--flavorL-orange-bold-4); --secondary-border: var(--flavorL-orange-bold-9); --secondary-text: var(--flavorL-orange-bold-10); --text-on-secondary-subtle: var(--flavorL-orange-bold-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-10); --accent-bg-hover: var(--flavorL-magenta-muted-11); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-10); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-cyan-muted-10); --secondary-bg-hover: var(--flavorL-cyan-muted-11); --secondary-bg-active: var(--flavorL-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-muted-3); --secondary-subtle-hover: var(--flavorL-cyan-muted-4); --secondary-border: var(--flavorL-cyan-muted-9); --secondary-text: var(--flavorL-cyan-muted-10); --text-on-secondary-subtle: var(--flavorL-cyan-muted-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-10); --accent-bg-hover: var(--flavorL-magenta-regular-11); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-10); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-cyan-regular-10); --secondary-bg-hover: var(--flavorL-cyan-regular-11); --secondary-bg-active: var(--flavorL-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-regular-3); --secondary-subtle-hover: var(--flavorL-cyan-regular-4); --secondary-border: var(--flavorL-cyan-regular-9); --secondary-text: var(--flavorL-cyan-regular-10); --text-on-secondary-subtle: var(--flavorL-cyan-regular-11); } :root[data-mode="dark"][data-hue="brand2"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-10); --accent-bg-hover: var(--flavorL-magenta-bold-11); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-10); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-cyan-bold-10); --secondary-bg-hover: var(--flavorL-cyan-bold-11); --secondary-bg-active: var(--flavorL-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-bold-3); --secondary-subtle-hover: var(--flavorL-cyan-bold-4); --secondary-border: var(--flavorL-cyan-bold-9); --secondary-text: var(--flavorL-cyan-bold-10); --text-on-secondary-subtle: var(--flavorL-cyan-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-sat="muted"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-11); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-11); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-12); --success-solid: var(--flavorL-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-contrast="aaa"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-11); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-11); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-12); --success-solid: var(--flavorL-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-contrast="aaa"][data-sat="bold"][data-bg="media"] { --media-image: url('/photography/hero.jpg'); --surface-page: var(--flavor-transparent); --surface-1: var(--flavor-white); --surface-2: var(--flavor-white); --surface-3: var(--flavor-white); --surface-tint: var(--flavorL-neutral-regular-2); --media-ink-primary: var(--flavorL-neutral-regular-12); --media-ink-secondary: var(--flavorL-neutral-regular-11); --media-ink-tertiary: var(--flavorL-neutral-regular-11); --text-on-media: var(--flavor-white); --text-on-media-secondary: var(--flavorL-neutral-regular-3); --text-on-media-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 2px 12px rgb(0 0 0 / 0.5); --text-primary: var(--flavorL-neutral-regular-12); --text-secondary: var(--flavorL-neutral-regular-11); --text-tertiary: var(--flavorL-neutral-regular-11); --text-disabled: var(--flavorL-neutral-regular-7); --border-subtle: var(--flavorL-neutral-regular-4); --border-default: var(--flavorL-neutral-regular-6); --border-strong: var(--flavorL-neutral-regular-9); --border-interactive: var(--flavorL-neutral-regular-9); --elevation-1: 0 2px 6px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.30); --elevation-2: 0 6px 16px rgb(0 0 0 / 0.30), 0 16px 40px rgb(0 0 0 / 0.35); --elevation-3: 0 12px 32px rgb(0 0 0 / 0.35), 0 32px 80px rgb(0 0 0 / 0.45); --success-bg: var(--flavorL-green-regular-3); --success-border: var(--flavorL-green-regular-7); --success-text: var(--flavorL-green-regular-12); --success-solid: var(--flavorL-green-regular-11); --success-solid-fg: var(--flavor-white); --warning-bg: var(--flavorL-orange-regular-3); --warning-border: var(--flavorL-orange-regular-7); --warning-text: var(--flavorL-orange-regular-11); --warning-solid: var(--flavorL-orange-regular-11); --warning-solid-fg: var(--flavor-white); --danger-bg: var(--flavorL-red-regular-3); --danger-border: var(--flavorL-red-regular-7); --danger-text: var(--flavorL-red-regular-11); --danger-solid: var(--flavorL-red-regular-11); --danger-solid-fg: var(--flavor-white); --info-bg: var(--flavorL-blue-regular-3); --info-border: var(--flavorL-blue-regular-7); --info-text: var(--flavorL-blue-regular-11); --info-solid: var(--flavorL-blue-regular-11); --info-solid-fg: var(--flavor-white); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-muted-11); --accent-bg-hover: var(--flavorL-neutral-muted-12); --accent-bg-active: var(--flavorL-neutral-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-muted-11); --text-on-accent-subtle: var(--flavorL-neutral-muted-11); --accent-subtle: var(--flavorL-neutral-muted-3); --accent-subtle-hover: var(--flavorL-neutral-muted-4); --accent-border: var(--flavorL-neutral-muted-7); --focus-ring: var(--flavorL-neutral-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-regular-11); --accent-bg-hover: var(--flavorL-neutral-regular-12); --accent-bg-active: var(--flavorL-neutral-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-regular-11); --text-on-accent-subtle: var(--flavorL-neutral-regular-11); --accent-subtle: var(--flavorL-neutral-regular-3); --accent-subtle-hover: var(--flavorL-neutral-regular-4); --accent-border: var(--flavorL-neutral-regular-7); --focus-ring: var(--flavorL-neutral-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="neutral"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-neutral-bold-11); --accent-bg-hover: var(--flavorL-neutral-bold-12); --accent-bg-active: var(--flavorL-neutral-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-neutral-bold-11); --text-on-accent-subtle: var(--flavorL-neutral-bold-11); --accent-subtle: var(--flavorL-neutral-bold-3); --accent-subtle-hover: var(--flavorL-neutral-bold-4); --accent-border: var(--flavorL-neutral-bold-7); --focus-ring: var(--flavorL-neutral-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-red-muted-11); --accent-bg-hover: var(--flavorL-red-muted-12); --accent-bg-active: var(--flavorL-red-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-muted-11); --text-on-accent-subtle: var(--flavorL-red-muted-11); --accent-subtle: var(--flavorL-red-muted-3); --accent-subtle-hover: var(--flavorL-red-muted-4); --accent-border: var(--flavorL-red-muted-7); --focus-ring: var(--flavorL-red-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-red-regular-11); --accent-bg-hover: var(--flavorL-red-regular-12); --accent-bg-active: var(--flavorL-red-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-regular-11); --text-on-accent-subtle: var(--flavorL-red-regular-11); --accent-subtle: var(--flavorL-red-regular-3); --accent-subtle-hover: var(--flavorL-red-regular-4); --accent-border: var(--flavorL-red-regular-7); --focus-ring: var(--flavorL-red-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="red"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-red-bold-11); --accent-bg-hover: var(--flavorL-red-bold-12); --accent-bg-active: var(--flavorL-red-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-red-bold-11); --text-on-accent-subtle: var(--flavorL-red-bold-11); --accent-subtle: var(--flavorL-red-bold-3); --accent-subtle-hover: var(--flavorL-red-bold-4); --accent-border: var(--flavorL-red-bold-7); --focus-ring: var(--flavorL-red-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-muted-11); --accent-bg-hover: var(--flavorL-scarlet-muted-12); --accent-bg-active: var(--flavorL-scarlet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-muted-11); --text-on-accent-subtle: var(--flavorL-scarlet-muted-11); --accent-subtle: var(--flavorL-scarlet-muted-3); --accent-subtle-hover: var(--flavorL-scarlet-muted-4); --accent-border: var(--flavorL-scarlet-muted-7); --focus-ring: var(--flavorL-scarlet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-regular-11); --accent-bg-hover: var(--flavorL-scarlet-regular-12); --accent-bg-active: var(--flavorL-scarlet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-regular-11); --text-on-accent-subtle: var(--flavorL-scarlet-regular-11); --accent-subtle: var(--flavorL-scarlet-regular-3); --accent-subtle-hover: var(--flavorL-scarlet-regular-4); --accent-border: var(--flavorL-scarlet-regular-7); --focus-ring: var(--flavorL-scarlet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="scarlet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-scarlet-bold-11); --accent-bg-hover: var(--flavorL-scarlet-bold-12); --accent-bg-active: var(--flavorL-scarlet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-scarlet-bold-11); --text-on-accent-subtle: var(--flavorL-scarlet-bold-11); --accent-subtle: var(--flavorL-scarlet-bold-3); --accent-subtle-hover: var(--flavorL-scarlet-bold-4); --accent-border: var(--flavorL-scarlet-bold-7); --focus-ring: var(--flavorL-scarlet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-orange-muted-11); --accent-bg-hover: var(--flavorL-orange-muted-12); --accent-bg-active: var(--flavorL-orange-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-muted-11); --text-on-accent-subtle: var(--flavorL-orange-muted-11); --accent-subtle: var(--flavorL-orange-muted-3); --accent-subtle-hover: var(--flavorL-orange-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-orange-regular-11); --accent-bg-hover: var(--flavorL-orange-regular-12); --accent-bg-active: var(--flavorL-orange-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-regular-11); --text-on-accent-subtle: var(--flavorL-orange-regular-11); --accent-subtle: var(--flavorL-orange-regular-3); --accent-subtle-hover: var(--flavorL-orange-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="orange"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-orange-bold-11); --accent-bg-hover: var(--flavorL-orange-bold-12); --accent-bg-active: var(--flavorL-orange-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-orange-bold-11); --text-on-accent-subtle: var(--flavorL-orange-bold-11); --accent-subtle: var(--flavorL-orange-bold-3); --accent-subtle-hover: var(--flavorL-orange-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-muted-11); --accent-bg-hover: var(--flavorL-tangerine-muted-12); --accent-bg-active: var(--flavorL-tangerine-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-muted-11); --text-on-accent-subtle: var(--flavorL-tangerine-muted-11); --accent-subtle: var(--flavorL-tangerine-muted-3); --accent-subtle-hover: var(--flavorL-tangerine-muted-4); --accent-border: var(--flavorL-tangerine-muted-7); --focus-ring: var(--flavorL-tangerine-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-regular-11); --accent-bg-hover: var(--flavorL-tangerine-regular-12); --accent-bg-active: var(--flavorL-tangerine-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-regular-11); --text-on-accent-subtle: var(--flavorL-tangerine-regular-11); --accent-subtle: var(--flavorL-tangerine-regular-3); --accent-subtle-hover: var(--flavorL-tangerine-regular-4); --accent-border: var(--flavorL-tangerine-regular-7); --focus-ring: var(--flavorL-tangerine-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="tangerine"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-tangerine-bold-11); --accent-bg-hover: var(--flavorL-tangerine-bold-12); --accent-bg-active: var(--flavorL-tangerine-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-tangerine-bold-11); --text-on-accent-subtle: var(--flavorL-tangerine-bold-11); --accent-subtle: var(--flavorL-tangerine-bold-3); --accent-subtle-hover: var(--flavorL-tangerine-bold-4); --accent-border: var(--flavorL-tangerine-bold-7); --focus-ring: var(--flavorL-tangerine-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-muted-11); --accent-bg-hover: var(--flavorL-yellow-muted-12); --accent-bg-active: var(--flavorL-yellow-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-muted-11); --text-on-accent-subtle: var(--flavorL-yellow-muted-11); --accent-subtle: var(--flavorL-yellow-muted-3); --accent-subtle-hover: var(--flavorL-yellow-muted-4); --accent-border: var(--flavorL-yellow-muted-7); --focus-ring: var(--flavorL-yellow-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-regular-11); --accent-bg-hover: var(--flavorL-yellow-regular-12); --accent-bg-active: var(--flavorL-yellow-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-regular-11); --text-on-accent-subtle: var(--flavorL-yellow-regular-11); --accent-subtle: var(--flavorL-yellow-regular-3); --accent-subtle-hover: var(--flavorL-yellow-regular-4); --accent-border: var(--flavorL-yellow-regular-7); --focus-ring: var(--flavorL-yellow-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="yellow"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-yellow-bold-11); --accent-bg-hover: var(--flavorL-yellow-bold-12); --accent-bg-active: var(--flavorL-yellow-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-yellow-bold-11); --text-on-accent-subtle: var(--flavorL-yellow-bold-11); --accent-subtle: var(--flavorL-yellow-bold-3); --accent-subtle-hover: var(--flavorL-yellow-bold-4); --accent-border: var(--flavorL-yellow-bold-7); --focus-ring: var(--flavorL-yellow-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-lime-muted-11); --accent-bg-hover: var(--flavorL-lime-muted-12); --accent-bg-active: var(--flavorL-lime-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-muted-11); --text-on-accent-subtle: var(--flavorL-lime-muted-11); --accent-subtle: var(--flavorL-lime-muted-3); --accent-subtle-hover: var(--flavorL-lime-muted-4); --accent-border: var(--flavorL-lime-muted-7); --focus-ring: var(--flavorL-lime-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-lime-regular-11); --accent-bg-hover: var(--flavorL-lime-regular-12); --accent-bg-active: var(--flavorL-lime-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-regular-11); --text-on-accent-subtle: var(--flavorL-lime-regular-11); --accent-subtle: var(--flavorL-lime-regular-3); --accent-subtle-hover: var(--flavorL-lime-regular-4); --accent-border: var(--flavorL-lime-regular-7); --focus-ring: var(--flavorL-lime-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="lime"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-lime-bold-11); --accent-bg-hover: var(--flavorL-lime-bold-12); --accent-bg-active: var(--flavorL-lime-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-lime-bold-11); --text-on-accent-subtle: var(--flavorL-lime-bold-11); --accent-subtle: var(--flavorL-lime-bold-3); --accent-subtle-hover: var(--flavorL-lime-bold-4); --accent-border: var(--flavorL-lime-bold-7); --focus-ring: var(--flavorL-lime-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-green-muted-11); --accent-bg-hover: var(--flavorL-green-muted-12); --accent-bg-active: var(--flavorL-green-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-muted-11); --text-on-accent-subtle: var(--flavorL-green-muted-11); --accent-subtle: var(--flavorL-green-muted-3); --accent-subtle-hover: var(--flavorL-green-muted-4); --accent-border: var(--flavorL-green-muted-7); --focus-ring: var(--flavorL-green-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-green-regular-11); --accent-bg-hover: var(--flavorL-green-regular-12); --accent-bg-active: var(--flavorL-green-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-regular-11); --text-on-accent-subtle: var(--flavorL-green-regular-12); --accent-subtle: var(--flavorL-green-regular-3); --accent-subtle-hover: var(--flavorL-green-regular-4); --accent-border: var(--flavorL-green-regular-7); --focus-ring: var(--flavorL-green-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="green"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-green-bold-11); --accent-bg-hover: var(--flavorL-green-bold-12); --accent-bg-active: var(--flavorL-green-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-green-bold-11); --text-on-accent-subtle: var(--flavorL-green-bold-12); --accent-subtle: var(--flavorL-green-bold-3); --accent-subtle-hover: var(--flavorL-green-bold-4); --accent-border: var(--flavorL-green-bold-7); --focus-ring: var(--flavorL-green-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-teal-muted-11); --accent-bg-hover: var(--flavorL-teal-muted-12); --accent-bg-active: var(--flavorL-teal-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-muted-11); --text-on-accent-subtle: var(--flavorL-teal-muted-11); --accent-subtle: var(--flavorL-teal-muted-3); --accent-subtle-hover: var(--flavorL-teal-muted-4); --accent-border: var(--flavorL-teal-muted-7); --focus-ring: var(--flavorL-teal-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-teal-regular-11); --accent-bg-hover: var(--flavorL-teal-regular-12); --accent-bg-active: var(--flavorL-teal-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-regular-11); --text-on-accent-subtle: var(--flavorL-teal-regular-11); --accent-subtle: var(--flavorL-teal-regular-3); --accent-subtle-hover: var(--flavorL-teal-regular-4); --accent-border: var(--flavorL-teal-regular-7); --focus-ring: var(--flavorL-teal-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="teal"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-teal-bold-11); --accent-bg-hover: var(--flavorL-teal-bold-12); --accent-bg-active: var(--flavorL-teal-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-teal-bold-11); --text-on-accent-subtle: var(--flavorL-teal-bold-11); --accent-subtle: var(--flavorL-teal-bold-3); --accent-subtle-hover: var(--flavorL-teal-bold-4); --accent-border: var(--flavorL-teal-bold-7); --focus-ring: var(--flavorL-teal-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-muted-11); --accent-bg-hover: var(--flavorL-cyan-muted-12); --accent-bg-active: var(--flavorL-cyan-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-muted-11); --text-on-accent-subtle: var(--flavorL-cyan-muted-11); --accent-subtle: var(--flavorL-cyan-muted-3); --accent-subtle-hover: var(--flavorL-cyan-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-regular-11); --accent-bg-hover: var(--flavorL-cyan-regular-12); --accent-bg-active: var(--flavorL-cyan-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-regular-11); --text-on-accent-subtle: var(--flavorL-cyan-regular-11); --accent-subtle: var(--flavorL-cyan-regular-3); --accent-subtle-hover: var(--flavorL-cyan-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="cyan"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-cyan-bold-11); --accent-bg-hover: var(--flavorL-cyan-bold-12); --accent-bg-active: var(--flavorL-cyan-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-cyan-bold-11); --text-on-accent-subtle: var(--flavorL-cyan-bold-11); --accent-subtle: var(--flavorL-cyan-bold-3); --accent-subtle-hover: var(--flavorL-cyan-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-11); --accent-bg-hover: var(--flavorL-blue-muted-12); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-11); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-blue-muted-7); --focus-ring: var(--flavorL-blue-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-11); --accent-bg-hover: var(--flavorL-blue-regular-12); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-11); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-blue-regular-7); --focus-ring: var(--flavorL-blue-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="blue"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-11); --accent-bg-hover: var(--flavorL-blue-bold-12); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-11); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-blue-bold-7); --focus-ring: var(--flavorL-blue-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-violet-muted-11); --accent-bg-hover: var(--flavorL-violet-muted-12); --accent-bg-active: var(--flavorL-violet-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-muted-11); --text-on-accent-subtle: var(--flavorL-violet-muted-11); --accent-subtle: var(--flavorL-violet-muted-3); --accent-subtle-hover: var(--flavorL-violet-muted-4); --accent-border: var(--flavorL-violet-muted-7); --focus-ring: var(--flavorL-violet-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-violet-regular-11); --accent-bg-hover: var(--flavorL-violet-regular-12); --accent-bg-active: var(--flavorL-violet-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-regular-11); --text-on-accent-subtle: var(--flavorL-violet-regular-11); --accent-subtle: var(--flavorL-violet-regular-3); --accent-subtle-hover: var(--flavorL-violet-regular-4); --accent-border: var(--flavorL-violet-regular-7); --focus-ring: var(--flavorL-violet-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="violet"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-violet-bold-11); --accent-bg-hover: var(--flavorL-violet-bold-12); --accent-bg-active: var(--flavorL-violet-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-violet-bold-11); --text-on-accent-subtle: var(--flavorL-violet-bold-11); --accent-subtle: var(--flavorL-violet-bold-3); --accent-subtle-hover: var(--flavorL-violet-bold-4); --accent-border: var(--flavorL-violet-bold-7); --focus-ring: var(--flavorL-violet-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-purple-muted-11); --accent-bg-hover: var(--flavorL-purple-muted-12); --accent-bg-active: var(--flavorL-purple-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-muted-11); --text-on-accent-subtle: var(--flavorL-purple-muted-11); --accent-subtle: var(--flavorL-purple-muted-3); --accent-subtle-hover: var(--flavorL-purple-muted-4); --accent-border: var(--flavorL-purple-muted-7); --focus-ring: var(--flavorL-purple-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-purple-regular-11); --accent-bg-hover: var(--flavorL-purple-regular-12); --accent-bg-active: var(--flavorL-purple-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-regular-11); --text-on-accent-subtle: var(--flavorL-purple-regular-11); --accent-subtle: var(--flavorL-purple-regular-3); --accent-subtle-hover: var(--flavorL-purple-regular-4); --accent-border: var(--flavorL-purple-regular-7); --focus-ring: var(--flavorL-purple-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="purple"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-purple-bold-11); --accent-bg-hover: var(--flavorL-purple-bold-12); --accent-bg-active: var(--flavorL-purple-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-purple-bold-11); --text-on-accent-subtle: var(--flavorL-purple-bold-11); --accent-subtle: var(--flavorL-purple-bold-3); --accent-subtle-hover: var(--flavorL-purple-bold-4); --accent-border: var(--flavorL-purple-bold-7); --focus-ring: var(--flavorL-purple-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-11); --accent-bg-hover: var(--flavorL-magenta-muted-12); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-11); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-magenta-muted-7); --focus-ring: var(--flavorL-magenta-muted-9); --secondary-bg: var(--flavorL-neutral-muted-11); --secondary-bg-hover: var(--flavorL-neutral-muted-12); --secondary-bg-active: var(--flavorL-neutral-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-muted-3); --secondary-subtle-hover: var(--flavorL-neutral-muted-4); --secondary-border: var(--flavorL-neutral-muted-9); --secondary-text: var(--flavorL-neutral-muted-11); --text-on-secondary-subtle: var(--flavorL-neutral-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-11); --accent-bg-hover: var(--flavorL-magenta-regular-12); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-11); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-magenta-regular-7); --focus-ring: var(--flavorL-magenta-regular-9); --secondary-bg: var(--flavorL-neutral-regular-11); --secondary-bg-hover: var(--flavorL-neutral-regular-12); --secondary-bg-active: var(--flavorL-neutral-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-regular-3); --secondary-subtle-hover: var(--flavorL-neutral-regular-4); --secondary-border: var(--flavorL-neutral-regular-9); --secondary-text: var(--flavorL-neutral-regular-11); --text-on-secondary-subtle: var(--flavorL-neutral-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="magenta"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-11); --accent-bg-hover: var(--flavorL-magenta-bold-12); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-11); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-magenta-bold-7); --focus-ring: var(--flavorL-magenta-bold-9); --secondary-bg: var(--flavorL-neutral-bold-11); --secondary-bg-hover: var(--flavorL-neutral-bold-12); --secondary-bg-active: var(--flavorL-neutral-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-neutral-bold-3); --secondary-subtle-hover: var(--flavorL-neutral-bold-4); --secondary-border: var(--flavorL-neutral-bold-9); --secondary-text: var(--flavorL-neutral-bold-11); --text-on-secondary-subtle: var(--flavorL-neutral-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-blue-muted-11); --accent-bg-hover: var(--flavorL-blue-muted-12); --accent-bg-active: var(--flavorL-blue-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-muted-11); --text-on-accent-subtle: var(--flavorL-blue-muted-11); --accent-subtle: var(--flavorL-blue-muted-3); --accent-subtle-hover: var(--flavorL-blue-muted-4); --accent-border: var(--flavorL-orange-muted-7); --focus-ring: var(--flavorL-orange-muted-9); --secondary-bg: var(--flavorL-orange-muted-11); --secondary-bg-hover: var(--flavorL-orange-muted-12); --secondary-bg-active: var(--flavorL-orange-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-muted-3); --secondary-subtle-hover: var(--flavorL-orange-muted-4); --secondary-border: var(--flavorL-orange-muted-9); --secondary-text: var(--flavorL-orange-muted-11); --text-on-secondary-subtle: var(--flavorL-orange-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="regular"][data-bg="media"], :root[data-mode="dark"][data-contrast="aaa"]:not([data-hue])[data-bg="media"] { --accent-bg: var(--flavorL-blue-regular-11); --accent-bg-hover: var(--flavorL-blue-regular-12); --accent-bg-active: var(--flavorL-blue-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-regular-11); --text-on-accent-subtle: var(--flavorL-blue-regular-11); --accent-subtle: var(--flavorL-blue-regular-3); --accent-subtle-hover: var(--flavorL-blue-regular-4); --accent-border: var(--flavorL-orange-regular-7); --focus-ring: var(--flavorL-orange-regular-9); --secondary-bg: var(--flavorL-orange-regular-11); --secondary-bg-hover: var(--flavorL-orange-regular-12); --secondary-bg-active: var(--flavorL-orange-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-regular-3); --secondary-subtle-hover: var(--flavorL-orange-regular-4); --secondary-border: var(--flavorL-orange-regular-9); --secondary-text: var(--flavorL-orange-regular-11); --text-on-secondary-subtle: var(--flavorL-orange-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-blue-bold-11); --accent-bg-hover: var(--flavorL-blue-bold-12); --accent-bg-active: var(--flavorL-blue-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-blue-bold-11); --text-on-accent-subtle: var(--flavorL-blue-bold-11); --accent-subtle: var(--flavorL-blue-bold-3); --accent-subtle-hover: var(--flavorL-blue-bold-4); --accent-border: var(--flavorL-orange-bold-7); --focus-ring: var(--flavorL-orange-bold-9); --secondary-bg: var(--flavorL-orange-bold-11); --secondary-bg-hover: var(--flavorL-orange-bold-12); --secondary-bg-active: var(--flavorL-orange-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-orange-bold-3); --secondary-subtle-hover: var(--flavorL-orange-bold-4); --secondary-border: var(--flavorL-orange-bold-9); --secondary-text: var(--flavorL-orange-bold-11); --text-on-secondary-subtle: var(--flavorL-orange-bold-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="muted"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-muted-11); --accent-bg-hover: var(--flavorL-magenta-muted-12); --accent-bg-active: var(--flavorL-magenta-muted-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-muted-11); --text-on-accent-subtle: var(--flavorL-magenta-muted-11); --accent-subtle: var(--flavorL-magenta-muted-3); --accent-subtle-hover: var(--flavorL-magenta-muted-4); --accent-border: var(--flavorL-cyan-muted-7); --focus-ring: var(--flavorL-cyan-muted-9); --secondary-bg: var(--flavorL-cyan-muted-11); --secondary-bg-hover: var(--flavorL-cyan-muted-12); --secondary-bg-active: var(--flavorL-cyan-muted-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-muted-3); --secondary-subtle-hover: var(--flavorL-cyan-muted-4); --secondary-border: var(--flavorL-cyan-muted-9); --secondary-text: var(--flavorL-cyan-muted-11); --text-on-secondary-subtle: var(--flavorL-cyan-muted-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="regular"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-regular-11); --accent-bg-hover: var(--flavorL-magenta-regular-12); --accent-bg-active: var(--flavorL-magenta-regular-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-regular-11); --text-on-accent-subtle: var(--flavorL-magenta-regular-11); --accent-subtle: var(--flavorL-magenta-regular-3); --accent-subtle-hover: var(--flavorL-magenta-regular-4); --accent-border: var(--flavorL-cyan-regular-7); --focus-ring: var(--flavorL-cyan-regular-9); --secondary-bg: var(--flavorL-cyan-regular-11); --secondary-bg-hover: var(--flavorL-cyan-regular-12); --secondary-bg-active: var(--flavorL-cyan-regular-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-regular-3); --secondary-subtle-hover: var(--flavorL-cyan-regular-4); --secondary-border: var(--flavorL-cyan-regular-9); --secondary-text: var(--flavorL-cyan-regular-11); --text-on-secondary-subtle: var(--flavorL-cyan-regular-11); } :root[data-mode="dark"][data-contrast="aaa"][data-hue="brand2"][data-sat="bold"][data-bg="media"] { --accent-bg: var(--flavorL-magenta-bold-11); --accent-bg-hover: var(--flavorL-magenta-bold-12); --accent-bg-active: var(--flavorL-magenta-bold-12); --accent-fg: var(--flavor-white); --text-accent: var(--flavorL-magenta-bold-11); --text-on-accent-subtle: var(--flavorL-magenta-bold-11); --accent-subtle: var(--flavorL-magenta-bold-3); --accent-subtle-hover: var(--flavorL-magenta-bold-4); --accent-border: var(--flavorL-cyan-bold-7); --focus-ring: var(--flavorL-cyan-bold-9); --secondary-bg: var(--flavorL-cyan-bold-11); --secondary-bg-hover: var(--flavorL-cyan-bold-12); --secondary-bg-active: var(--flavorL-cyan-bold-12); --secondary-fg: var(--flavor-white); --secondary-subtle: var(--flavorL-cyan-bold-3); --secondary-subtle-hover: var(--flavorL-cyan-bold-4); --secondary-border: var(--flavorL-cyan-bold-9); --secondary-text: var(--flavorL-cyan-bold-11); --text-on-secondary-subtle: var(--flavorL-cyan-bold-11); } :root[data-density="compact"] { --space-1: 2px; --space-2: 3px; --space-3: 6px; --space-4: 9px; --space-5: 12px; --space-6: 15px; --space-7: 18px; --space-8: 24px; --space-9: 30px; --space-10: 36px; --space-11: 48px; --space-12: 60px; --control-height-sm: 24px; --control-height-md: 30px; --control-height-lg: 36px; } :root { --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --control-height-sm: 32px; --control-height-md: 40px; --control-height-lg: 48px; } :root[data-density="comfy"] { --space-1: 3px; --space-2: 5px; --space-3: 10px; --space-4: 15px; --space-5: 20px; --space-6: 25px; --space-7: 30px; --space-8: 40px; --space-9: 50px; --space-10: 60px; --space-11: 80px; --space-12: 100px; --control-height-sm: 40px; --control-height-md: 50px; --control-height-lg: 60px; } :root { --font-display: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif; --font-text: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --type-scale: 1; } :root, [data-type-scale] { --font-size-1: calc(0.6875rem * var(--type-scale-1, var(--type-scale))); --line-height-1: calc(1rem * var(--type-scale-1, var(--type-scale))); --font-size-2: calc(0.75rem * var(--type-scale-2, var(--type-scale))); --line-height-2: calc(1rem * var(--type-scale-2, var(--type-scale))); --font-size-3: calc(0.875rem * var(--type-scale-3, var(--type-scale))); --line-height-3: calc(1.25rem * var(--type-scale-3, var(--type-scale))); --font-size-4: calc(1rem * var(--type-scale-4, var(--type-scale))); --line-height-4: calc(1.5rem * var(--type-scale-4, var(--type-scale))); --font-size-5: calc(1.125rem * var(--type-scale-5, var(--type-scale))); --line-height-5: calc(1.625rem * var(--type-scale-5, var(--type-scale))); --font-size-6: calc(1.25rem * var(--type-scale-6, var(--type-scale))); --line-height-6: calc(1.75rem * var(--type-scale-6, var(--type-scale))); --font-size-7: calc(1.5rem * var(--type-scale-7, var(--type-scale))); --line-height-7: calc(2rem * var(--type-scale-7, var(--type-scale))); --font-size-8: calc(1.875rem * var(--type-scale-8, var(--type-scale))); --line-height-8: calc(2.375rem * var(--type-scale-8, var(--type-scale))); --font-size-9: calc(2.25rem * var(--type-scale-9, var(--type-scale))); --line-height-9: calc(2.75rem * var(--type-scale-9, var(--type-scale))); --font-size-10: calc(3rem * var(--type-scale-10, var(--type-scale))); --line-height-10: calc(3.375rem * var(--type-scale-10, var(--type-scale))); --font-size-11: calc(3.75rem * var(--type-scale-11, var(--type-scale))); --line-height-11: calc(4.125rem * var(--type-scale-11, var(--type-scale))); --font-size-12: calc(4.5rem * var(--type-scale-12, var(--type-scale))); --line-height-12: calc(4.875rem * var(--type-scale-12, var(--type-scale))); } :root { --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; --radius-4: 8px; --radius-5: 12px; --radius-6: 16px; --radius-full: 9999px; --duration-1: 75ms; --duration-2: 150ms; --duration-3: 250ms; --duration-4: 400ms; --duration-5: 600ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --press-scale: 0.96; --hit-area-touch: 44px; --hit-area-dense: 40px; --icon-stroke-regular: 1.5px; --icon-stroke-strong: 2px; --icon-stroke-bold: 2.5px; } :root[data-font="editorial"] { --font-display: 'Fraunces', Georgia, serif; --font-text: 'Libre Franklin', system-ui, sans-serif; } :root[data-font="reading"] { --font-display: 'Source Serif 4', Georgia, serif; --font-text: 'Source Sans 3', system-ui, sans-serif; } :root[data-font="geometric"] { --font-display: 'Jost', system-ui, sans-serif; --font-text: 'DM Sans', system-ui, sans-serif; } :root[data-font="expressive"] { --font-display: 'Syne', system-ui, sans-serif; --font-text: 'Archivo', system-ui, sans-serif; } @media (prefers-reduced-motion: reduce) { :root { --duration-1: 0ms; --duration-2: 0ms; --duration-3: 0ms; --duration-4: 0ms; --duration-5: 0ms; } } :root[data-radius="square"] { --radius-control: 0px; --radius-field: 0px; --radius-container: 0px; --radius-media: 0px; } :root, :root[data-radius="rounded"] { --radius-control: 6px; --radius-field: 6px; --radius-container: 12px; --radius-media: 8px; } :root[data-radius="pill"] { --radius-control: 9999px; --radius-field: 20px; --radius-container: 20px; --radius-media: 12px; } :root { --radius-round: 9999px; }