/* === Theme Variables === */
:root { --secondary-base: #8629ff; --secondary-base-text-heading: #fffdfd; --secondary-base-text-base: #f1e7ff; --secondary-base-text-muted: #c6b0ea; --secondary-base-link: #f6f1ff; --secondary-base-link-hover: #e7daff; --secondary-base-link-active: #d1b8ff; --secondary-base-border: #a56aef; --secondary-base-action-fill: #fffdfd; --secondary-base-action-fill-hover: #f2eaff; --secondary-base-action-fill-active: #e4d2ff; --secondary-base-action-text: #8629ff; --secondary-base-action-border: #fffdfd; --secondary-strong: #6a21cc; --secondary-strong-text-heading: #fffdfd; --secondary-strong-text-base: #efe7ff; --secondary-strong-text-muted: #b89ae8; --secondary-strong-link: #f8f5ff; --secondary-strong-link-hover: #e8ddff; --secondary-strong-link-active: #d2bcff; --secondary-strong-border: #9160e8; --secondary-strong-action-fill: #fffdfd; --secondary-strong-action-fill-hover: #f3ecff; --secondary-strong-action-fill-active: #e3d3ff; --secondary-strong-action-text: #6a21cc; --secondary-strong-action-border: #fffdfd; --default: #ffffff; --default-text-heading: #111827; --default-text-base: #374151; --default-text-muted: #8f8f8f; --default-link: #a41034; --default-link-hover: #850a10; --default-link-active: #6e0810; --default-border: #e5e7eb; --default-action-fill: #a41034; --default-action-fill-hover: #850a10; --default-action-fill-active: #6e0810; --default-action-text: #ffffff; --default-action-border: #c20f18; --primary-weak: #fff6f7; --primary-weak-text-heading: #2d0a0f; --primary-weak-text-base: #5b1116; --primary-weak-text-muted: #7d5b60; --primary-weak-link: #b5121b; --primary-weak-link-hover: #941018; --primary-weak-link-active: #760c13; --primary-weak-border: #e7c9cd; --primary-weak-action-fill: #c20f18; --primary-weak-action-fill-hover: #a50d14; --primary-weak-action-fill-active: #850a10; --primary-weak-action-text: #ffffff; --primary-weak-action-border: #b5121b; --primary-soft: #f8d6d8; --primary-soft-text-heading: #2b0d11; --primary-soft-text-base: #4e1a1f; --primary-soft-text-muted: #735156; --primary-soft-link: #b3131c; --primary-soft-link-hover: #941018; --primary-soft-link-active: #760c13; --primary-soft-border: #d7a9ae; --primary-soft-action-fill: #c51620; --primary-soft-action-fill-hover: #a7131b; --primary-soft-action-fill-active: #861016; --primary-soft-action-text: #fffdfd; --primary-soft-action-border: #a7131b; --primary-strong: #8f1320; --primary-strong-text-heading: #fffdfd; --primary-strong-text-base: #ffe7e9; --primary-strong-text-muted: #d9a0a7; --primary-strong-link: #fff4f5; --primary-strong-link-hover: #ffd9dd; --primary-strong-link-active: #ffbcc2; --primary-strong-border: #c05a66; --primary-strong-action-fill: #fffdfd; --primary-strong-action-fill-hover: #ffecee; --primary-strong-action-fill-active: #ffd8dc; --primary-strong-action-text: #8f1320; --primary-strong-action-border: #fffdfd; --primary-stronger: #5a0f1a; --primary-stronger-text-heading: #fffdfd; --primary-stronger-text-base: #ffe9eb; --primary-stronger-text-muted: #d79aa3; --primary-stronger-link: #fff4f5; --primary-stronger-link-hover: #ffdadf; --primary-stronger-link-active: #ffbcc5; --primary-stronger-border: #9a3b49; --primary-stronger-action-fill: #fffdfd; --primary-stronger-action-fill-hover: #ffecef; --primary-stronger-action-fill-active: #ffd7dd; --primary-stronger-action-text: #5a0f1a; --primary-stronger-action-border: #fffdfd; --primary-base: #c20f18; --primary-base-text-heading: #fffdfd; --primary-base-text-base: #ffe8ea; --primary-base-text-muted: #e4b1b5; --primary-base-link: #fff4f5; --primary-base-link-hover: #ffd9dd; --primary-base-link-active: #ffbcc2; --primary-base-border: #d36a72; --primary-base-action-fill: #fffdfd; --primary-base-action-fill-hover: #ffecee; --primary-base-action-fill-active: #ffd9dd; --primary-base-action-text: #8f1320; --primary-base-action-border: #fffdfd; --secondary-weak: #f7f2ff; --secondary-weak-text-heading: #1b1238; --secondary-weak-text-base: #34205a; --secondary-weak-text-muted: #7b6a9b; --secondary-weak-link: #7d2cf3; --secondary-weak-link-hover: #6922d1; --secondary-weak-link-active: #551aa1; --secondary-weak-border: #ddd1f5; --secondary-weak-action-fill: #8629ff; --secondary-weak-action-fill-hover: #7323db; --secondary-weak-action-fill-active: #5d1cb2; --secondary-weak-action-text: #ffffff; --secondary-weak-action-border: #8629ff; --secondary-soft: #e4d4ff; --secondary-soft-text-heading: #1a1030; --secondary-soft-text-base: #2c1c4a; --secondary-soft-text-muted: #685a92; --secondary-soft-link: #7a26e6; --secondary-soft-link-hover: #651fc2; --secondary-soft-link-active: #4e1897; --secondary-soft-border: #c9b4f2; --secondary-soft-action-fill: #8b32ff; --secondary-soft-action-fill-hover: #7428d9; --secondary-soft-action-fill-active: #5d20b1; --secondary-soft-action-text: #ffffff; --secondary-soft-action-border: #7428d9; --secondary-stronger: #440e8b; --secondary-stronger-text-heading: #fffdfd; --secondary-stronger-text-base: #efe6ff; --secondary-stronger-text-muted: #b59ae8; --secondary-stronger-link: #f8f5ff; --secondary-stronger-link-hover: #ecddff; --secondary-stronger-link-active: #d4bcff; --secondary-stronger-border: #7445c7; --secondary-stronger-action-fill: #fffdfd; --secondary-stronger-action-fill-hover: #f4eeff; --secondary-stronger-action-fill-active: #e5d6ff; --secondary-stronger-action-text: #4b178f; --secondary-stronger-action-border: #fffdfd; --neutral-weak: #fafafa; --neutral-weak-text-heading: #0f172a; --neutral-weak-text-base: #1f2937; --neutral-weak-text-muted: #6b7280; --neutral-weak-link: #2563eb; --neutral-weak-link-hover: #1d4ed8; --neutral-weak-link-active: #1e40af; --neutral-weak-border: #e2e8f0; --neutral-weak-action-fill: #374151; --neutral-weak-action-fill-hover: #1f2937; --neutral-weak-action-fill-active: #111827; --neutral-weak-action-text: #ffffff; --neutral-weak-action-border: #374151; --neutral-soft: #f0f0f0; --neutral-soft-text-heading: #111827; --neutral-soft-text-base: #374151; --neutral-soft-text-muted: #71717a; --neutral-soft-link: #2563eb; --neutral-soft-link-hover: #1d4ed8; --neutral-soft-link-active: #1e40af; --neutral-soft-border: #d1d5db; --neutral-soft-action-fill: #4b5563; --neutral-soft-action-fill-hover: #374151; --neutral-soft-action-fill-active: #1f2937; --neutral-soft-action-text: #ffffff; --neutral-soft-action-border: #4b5563; --neutral-base: #e5e5e5; --neutral-base-text-heading: #111827; --neutral-base-text-base: #374151; --neutral-base-text-muted: #5f6b7a; --neutral-base-link: #1d4ed8; --neutral-base-link-hover: #1e40af; --neutral-base-link-active: #1e3a8a; --neutral-base-border: #cbd5e1; --neutral-base-action-fill: #4b5563; --neutral-base-action-fill-hover: #374151; --neutral-base-action-fill-active: #1f2937; --neutral-base-action-text: #ffffff; --neutral-base-action-border: #4b5563; --neutral-strong: #9ca3af; --neutral-strong-text-heading: #111827; --neutral-strong-text-base: #374151; --neutral-strong-text-muted: #5f6b7a; --neutral-strong-link: #1d4ed8; --neutral-strong-link-hover: #1e40af; --neutral-strong-link-active: #1e3a8a; --neutral-strong-border: #6b7280; --neutral-strong-action-fill: #4b5563; --neutral-strong-action-fill-hover: #374151; --neutral-strong-action-fill-active: #1f2937; --neutral-strong-action-text: #ffffff; --neutral-strong-action-border: #4b5563; --neutral-stronger: #4b5563; --neutral-stronger-text-heading: #fffdfd; --neutral-stronger-text-base: #e5e7eb; --neutral-stronger-text-muted: #cbd5e1; --neutral-stronger-link: #f5f9ff; --neutral-stronger-link-hover: #dce8ff; --neutral-stronger-link-active: #bfd3ff; --neutral-stronger-border: #8892a0; --neutral-stronger-action-fill: #f9fafb; --neutral-stronger-action-fill-hover: #e5e7eb; --neutral-stronger-action-fill-active: #e5e7eb; --neutral-stronger-action-text: #374151; --neutral-stronger-action-border: #f9fafb; --success-weak: #ffffff; --success-weak-text-heading: #05331c; --success-weak-text-base: #145c3b; --success-weak-text-muted: #739e88; --success-weak-link: #1f9d55; --success-weak-link-hover: #178248; --success-weak-link-active: #126637; --success-weak-border: #bfe6d1; --success-weak-action-fill: #1f9d55; --success-weak-action-fill-hover: #178248; --success-weak-action-fill-active: #126637; --success-weak-action-text: #ffffff; --success-weak-action-border: #178248; --success-base: #1f9d55; --success-base-text-heading: #f7fff9; --success-base-text-base: #e7f9ef; --success-base-text-muted: #a4d9bb; --success-base-link: #ecfff5; --success-base-link-hover: #d7f7e6; --success-base-link-active: #bdeed1; --success-base-border: #58c184; --success-base-action-fill: #0f5132; --success-base-action-fill-hover: #0a3f28; --success-base-action-fill-active: #05331c; --success-base-action-text: #ffffff; --success-base-action-border: #0f5132; --success-strong: #136f3b; --success-strong-text-heading: #fffdfd; --success-strong-text-base: #d9f5e7; --success-strong-text-muted: #8fd0ae; --success-strong-link: #f6fff9; --success-strong-link-hover: #d6f5e2; --success-strong-link-active: #b4ebcf; --success-strong-border: #2a8153; --success-strong-action-fill: #ffffff; --success-strong-action-fill-hover: #e8faf1; --success-strong-action-fill-active: #cceedd; --success-strong-action-text: #136f3b; --success-strong-action-border: #ffffff; --info-base: #2563eb; --info-base-text-heading: #f8fbff; --info-base-text-base: #eaf2ff; --info-base-text-muted: #b6c9ee; --info-base-link: #f8fbff; --info-base-link-hover: #dce8ff; --info-base-link-active: #bed4ff; --info-base-border: #6b9ef3; --info-base-action-fill: #0b3b82; --info-base-action-fill-hover: #082f66; --info-base-action-fill-active: #06264f; --info-base-action-text: #ffffff; --info-base-action-border: #0b3b82; --info-strong: #1e40af; --info-strong-text-heading: #fffdfd; --info-strong-text-base: #e5eeff; --info-strong-text-muted: #afc3e6; --info-strong-link: #f5f9ff; --info-strong-link-hover: #d9e8ff; --info-strong-link-active: #b9d1ff; --info-strong-border: #5d84d1; --info-strong-action-fill: #ffffff; --info-strong-action-fill-hover: #eef5ff; --info-strong-action-fill-active: #dce8ff; --info-strong-action-text: #1e40af; --info-strong-action-border: #ffffff; --info-weak: #ffffff; --info-weak-text-heading: #1e3a8a; --info-weak-text-base: #1e40af; --info-weak-text-muted: #475569; --info-weak-link: #2563eb; --info-weak-link-hover: #1d4ed8; --info-weak-link-active: #1e40af; --info-weak-border: #bfdbfe; --info-weak-action-fill: #2563eb; --info-weak-action-fill-hover: #1d4ed8; --info-weak-action-fill-active: #1e40af; --info-weak-action-text: #ffffff; --info-weak-action-border: #2563eb; --error-weak: #ffffff; --error-weak-text-heading: #7f1d1d; --error-weak-text-base: #b91c1c; --error-weak-text-muted: #8f4d4d; --error-weak-link: #dc2626; --error-weak-link-hover: #b91c1c; --error-weak-link-active: #991b1b; --error-weak-border: #fecaca; --error-weak-action-fill: #ef4444; --error-weak-action-fill-hover: #dc2626; --error-weak-action-fill-active: #b91c1c; --error-weak-action-text: #ffffff; --error-weak-action-border: #ef4444; --error-base: #dc2626; --error-base-text-heading: #fff8f8; --error-base-text-base: #ffe5e5; --error-base-text-muted: #ffb8b8; --error-base-link: #fff5f5; --error-base-link-hover: #ffe3e3; --error-base-link-active: #ffc4c4; --error-base-border: #f87171; --error-base-action-fill: #7f1d1d; --error-base-action-fill-hover: #6b1515; --error-base-action-fill-active: #520f0f; --error-base-action-text: #ffffff; --error-base-action-border: #7f1d1d; --error-strong: #991b1b; --error-strong-text-heading: #fffdfd; --error-strong-text-base: #ffd9d9; --error-strong-text-muted: #ff9e9e; --error-strong-link: #fff1f1; --error-strong-link-hover: #ffe0e0; --error-strong-link-active: #ffcaca; --error-strong-border: #c24141; --error-strong-action-fill: #ffffff; --error-strong-action-fill-hover: #ffeded; --error-strong-action-fill-active: #ffd5d5; --error-strong-action-text: #991b1b; --error-strong-action-border: #ffffff; --warning-weak: #ffffff; --warning-weak-text-heading: #3a2200; --warning-weak-text-base: #6b3f00; --warning-weak-text-muted: #8a6a35; --warning-weak-link: #e68a00; --warning-weak-link-hover: #cc7800; --warning-weak-link-active: #a66000; --warning-weak-border: #ffe2b8; --warning-weak-action-fill: #ff9f1a; --warning-weak-action-fill-hover: #e68a00; --warning-weak-action-fill-active: #bf7000; --warning-weak-action-text: #ffffff; --warning-weak-action-border: #ff9f1a; --warning-base: #ffb020; --warning-base-text-heading: #fff9ef; --warning-base-text-base: #fff3d9; --warning-base-text-muted: #ffd27a; --warning-base-link: #fff4e0; --warning-base-link-hover: #ffe8c2; --warning-base-link-active: #ffd699; --warning-base-border: #f5c56e; --warning-base-action-fill: #7a4200; --warning-base-action-fill-hover: #5e3200; --warning-base-action-fill-active: #422300; --warning-base-action-text: #ffffff; --warning-base-action-border: #7a4200; --warning-strong: #d97706; --warning-strong-text-heading: #fffdf8; --warning-strong-text-base: #fff4e6; --warning-strong-text-muted: #ffd08a; --warning-strong-link: #fff3e0; --warning-strong-link-hover: #ffe2b8; --warning-strong-link-active: #ffd08a; --warning-strong-border: #c9983a; --warning-strong-action-fill: #ffffff; --warning-strong-action-fill-hover: #fff1db; --warning-strong-action-fill-active: #ffe0b3; --warning-strong-action-text: #d97706; --warning-strong-action-border: #ffffff; --header: #ffffff; --header-text-heading: #0f172a; --header-text-base: #374151; --header-text-muted: #94a3b8; --header-link: #1e293b; --header-link-hover: #0f172a; --header-link-active: #000000; --header-border: #e2e8f0; --header-action-fill: #312e81; --header-action-fill-hover: #312e81; --header-action-fill-active: #4338ca; --header-action-text: #ffffff; --header-action-border: #1e1b4b; --accent-base: #3b82f6; --accent-base-text-heading: #ffffff; --accent-base-text-base: #eaf2ff; --accent-base-text-muted: #b8c9e8; --accent-base-link: #f8fbff; --accent-base-link-hover: #dce8ff; --accent-base-link-active: #bed4ff; --accent-base-border: #6c97d9; --accent-base-action-fill: #0b3b82; --accent-base-action-fill-hover: #082f66; --accent-base-action-fill-active: #06264f; --accent-base-action-text: #ffffff; --accent-base-action-border: #0b3b82; --accent-soft: #cfe0ff; --accent-soft-text-heading: #1b2a40; --accent-soft-text-base: #31435f; --accent-soft-text-muted: #6f84a8; --accent-soft-link: #2563eb; --accent-soft-link-hover: #1d4ed8; --accent-soft-link-active: #1e40af; --accent-soft-border: #7fa7e0; --accent-soft-action-fill: #18519a; --accent-soft-action-fill-hover: #0f3f82; --accent-soft-action-fill-active: #0a3268; --accent-soft-action-text: #ffffff; --accent-soft-action-border: #18519a; --accent-strong: #18519a; --accent-strong-text-heading: #fffdfd; --accent-strong-text-base: #e7f0ff; --accent-strong-text-muted: #afc3e6; --accent-strong-link: #f5f9ff; --accent-strong-link-hover: #dce9ff; --accent-strong-link-active: #bed4ff; --accent-strong-border: #4e7bc2; --accent-strong-action-fill: #fffdfd; --accent-strong-action-fill-hover: #eef5ff; --accent-strong-action-fill-active: #dce9ff; --accent-strong-action-text: #18519a; --accent-strong-action-border: #fffdfd; --accent-weak: #f0f6ff; --accent-weak-text-heading: #182433; --accent-weak-text-base: #2d3b4f; --accent-weak-text-muted: #6b7a90; --accent-weak-link: #2563eb; --accent-weak-link-hover: #1d4ed8; --accent-weak-link-active: #1e40af; --accent-weak-border: #cbd8ea; --accent-weak-action-fill: #0b3b82; --accent-weak-action-fill-hover: #082f66; --accent-weak-action-fill-active: #06264f; --accent-weak-action-text: #ffffff; --accent-weak-action-border: #0b3b82; --error-soft: #fff1f2; --error-soft-text-heading: #7a0d0d; --error-soft-text-base: #d01616; --error-soft-text-muted: #a94a4a; --error-soft-link: #d01616; --error-soft-link-hover: #b01313; --error-soft-link-active: #8f1010; --error-soft-border: #f3b5b5; --error-soft-action-fill: #d01616; --error-soft-action-fill-hover: #b01313; --error-soft-action-fill-active: #8f1010; --error-soft-action-text: #ffffff; --error-soft-action-border: #d01616; --success-soft: #eafaf1; --success-soft-text-heading: #05331c; --success-soft-text-base: #0f5132; --success-soft-text-muted: #4e7d65; --success-soft-link: #157347; --success-soft-link-hover: #0f5132; --success-soft-link-active: #0a3f28; --success-soft-border: #b7e4c7; --success-soft-action-fill: #1f9d55; --success-soft-action-fill-hover: #178248; --success-soft-action-fill-active: #126637; --success-soft-action-text: #ffffff; --success-soft-action-border: #1f9d55; --info-soft: #eff6ff; --info-soft-text-heading: #1e3a8a; --info-soft-text-base: #1e40af; --info-soft-text-muted: #526071; --info-soft-link: #2563eb; --info-soft-link-hover: #1d4ed8; --info-soft-link-active: #1e40af; --info-soft-border: #bfd8ff; --info-soft-action-fill: #2563eb; --info-soft-action-fill-hover: #1d4ed8; --info-soft-action-fill-active: #1e40af; --info-soft-action-text: #ffffff; --info-soft-action-border: #2563eb; --warning-soft: #fff7e1; --warning-soft-text-heading: #5a2e00; --warning-soft-text-base: #7c4500; --warning-soft-text-muted: #8f6c2f; --warning-soft-link: #e68a00; --warning-soft-link-hover: #cc7800; --warning-soft-link-active: #a66000; --warning-soft-border: #f5d7a1; --warning-soft-action-fill: #f59e0b; --warning-soft-action-fill-hover: #d97706; --warning-soft-action-fill-active: #b45309; --warning-soft-action-text: #ffffff; --warning-soft-action-border: #f59e0b; --warning-stronger: #a16207; --warning-stronger-text-heading: #fffdf8; --warning-stronger-text-base: #fff2dd; --warning-stronger-text-muted: #f5c56e; --warning-stronger-link: #fff3e0; --warning-stronger-link-hover: #ffe2b8; --warning-stronger-link-active: #ffd08a; --warning-stronger-border: #d9a441; --warning-stronger-action-fill: #ffffff; --warning-stronger-action-fill-hover: #fff1db; --warning-stronger-action-fill-active: #ffe0b3; --warning-stronger-action-text: #a16207; --warning-stronger-action-border: #ffffff; --accent-stronger: #052d61; --accent-stronger-text-heading: #fffdfd; --accent-stronger-text-base: #e5eeff; --accent-stronger-text-muted: #a8bdd9; --accent-stronger-link: #f5f9ff; --accent-stronger-link-hover: #d9e8ff; --accent-stronger-link-active: #b9d1ff; --accent-stronger-border: #4d6f9e; --accent-stronger-action-fill: #fffdfd; --accent-stronger-action-fill-hover: #eef5ff; --accent-stronger-action-fill-active: #dce8ff; --accent-stronger-action-text: #052d61; --accent-stronger-action-border: #fffdfd; --success-stronger: #0b4d29; --success-stronger-text-heading: #fffdfd; --success-stronger-text-base: #d5f2e3; --success-stronger-text-muted: #8cc9ab; --success-stronger-link: #f4fff8; --success-stronger-link-hover: #d4f5e2; --success-stronger-link-active: #afe7c8; --success-stronger-border: #21784a; --success-stronger-action-fill: #ffffff; --success-stronger-action-fill-hover: #e8faf1; --success-stronger-action-fill-active: #cdeedd; --success-stronger-action-text: #0b4d29; --success-stronger-action-border: #ffffff; --info-stronger: #1e3a8a; --info-stronger-text-heading: #fffdfd; --info-stronger-text-base: #e4edff; --info-stronger-text-muted: #aabfe3; --info-stronger-link: #f5f9ff; --info-stronger-link-hover: #d9e8ff; --info-stronger-link-active: #b9d1ff; --info-stronger-border: #5478c5; --info-stronger-action-fill: #ffffff; --info-stronger-action-fill-hover: #eef5ff; --info-stronger-action-fill-active: #dce8ff; --info-stronger-action-text: #1e3a8a; --info-stronger-action-border: #ffffff; --error-stronger: #7f1d1d; --error-stronger-text-heading: #fffdfd; --error-stronger-text-base: #ffd6d6; --error-stronger-text-muted: #ff9a9a; --error-stronger-link: #fff1f1; --error-stronger-link-hover: #ffe0e0; --error-stronger-link-active: #ffcaca; --error-stronger-border: #a63333; --error-stronger-action-fill: #ffffff; --error-stronger-action-fill-hover: #ffecec; --error-stronger-action-fill-active: #ffd4d4; --error-stronger-action-text: #7f1d1d; --error-stronger-action-border: #ffffff; --footer: #111827; --footer-text-heading: #fffdfd; --footer-text-base: #e5e7eb; --footer-text-muted: #9ca3af; --footer-link: #f8fafc; --footer-link-hover: #ffffff; --footer-link-active: #cbd5e1; --footer-border: #374151; --footer-action-fill: #ffffff; --footer-action-fill-hover: #e5e7eb; --footer-action-fill-active: #cbd5e1; --footer-action-text: #111827; --footer-action-border: #ffffff; }
/* === Background Utility Classes === */
.bg-secondary-base { background-color: var(--secondary-base); --bg-color: var(--secondary-base); --text-heading: var(--secondary-base-text-heading); --text-base: var(--secondary-base-text-base); --text-muted: var(--secondary-base-text-muted); --link: var(--secondary-base-link); --link-hover: var(--secondary-base-link-hover); --link-active: var(--secondary-base-link-active); --border: var(--secondary-base-border); --action-fill: var(--secondary-base-action-fill); --action-fill-hover: var(--secondary-base-action-fill-hover); --action-fill-active: var(--secondary-base-action-fill-active); --action-text: var(--secondary-base-action-text); --action-border: var(--secondary-base-action-border); color: var(--secondary-base-text-base); }
.hover\:bg-secondary-base:hover { background-color: var(--secondary-base); --bg-color: var(--secondary-base); --text-heading: var(--secondary-base-text-heading); --text-base: var(--secondary-base-text-base); --text-muted: var(--secondary-base-text-muted); --link: var(--secondary-base-link); --link-hover: var(--secondary-base-link-hover); --link-active: var(--secondary-base-link-active); --border: var(--secondary-base-border); --action-fill: var(--secondary-base-action-fill); --action-fill-hover: var(--secondary-base-action-fill-hover); --action-fill-active: var(--secondary-base-action-fill-active); --action-text: var(--secondary-base-action-text); --action-border: var(--secondary-base-action-border); color: var(--secondary-base-text-base); }
.active\:bg-secondary-base:active { background-color: var(--secondary-base); --bg-color: var(--secondary-base); --text-heading: var(--secondary-base-text-heading); --text-base: var(--secondary-base-text-base); --text-muted: var(--secondary-base-text-muted); --link: var(--secondary-base-link); --link-hover: var(--secondary-base-link-hover); --link-active: var(--secondary-base-link-active); --border: var(--secondary-base-border); --action-fill: var(--secondary-base-action-fill); --action-fill-hover: var(--secondary-base-action-fill-hover); --action-fill-active: var(--secondary-base-action-fill-active); --action-text: var(--secondary-base-action-text); --action-border: var(--secondary-base-action-border); color: var(--secondary-base-text-base); }
.surface-secondary-base { background-color: var(--secondary-base); --bg-color: var(--secondary-base); --text-heading: var(--secondary-base-text-heading); --text-base: var(--secondary-base-text-base); --text-muted: var(--secondary-base-text-muted); --link: var(--secondary-base-link); --link-hover: var(--secondary-base-link-hover); --link-active: var(--secondary-base-link-active); --border: var(--secondary-base-border); --action-fill: var(--secondary-base-action-fill); --action-fill-hover: var(--secondary-base-action-fill-hover); --action-fill-active: var(--secondary-base-action-fill-active); --action-text: var(--secondary-base-action-text); --action-border: var(--secondary-base-action-border); color: var(--secondary-base-text-base); }
.hover\:surface-secondary-base:hover { background-color: var(--secondary-base); --bg-color: var(--secondary-base); --text-heading: var(--secondary-base-text-heading); --text-base: var(--secondary-base-text-base); --text-muted: var(--secondary-base-text-muted); --link: var(--secondary-base-link); --link-hover: var(--secondary-base-link-hover); --link-active: var(--secondary-base-link-active); --border: var(--secondary-base-border); --action-fill: var(--secondary-base-action-fill); --action-fill-hover: var(--secondary-base-action-fill-hover); --action-fill-active: var(--secondary-base-action-fill-active); --action-text: var(--secondary-base-action-text); --action-border: var(--secondary-base-action-border); color: var(--secondary-base-text-base); }
.active\:surface-secondary-base:active { background-color: var(--secondary-base); --bg-color: var(--secondary-base); --text-heading: var(--secondary-base-text-heading); --text-base: var(--secondary-base-text-base); --text-muted: var(--secondary-base-text-muted); --link: var(--secondary-base-link); --link-hover: var(--secondary-base-link-hover); --link-active: var(--secondary-base-link-active); --border: var(--secondary-base-border); --action-fill: var(--secondary-base-action-fill); --action-fill-hover: var(--secondary-base-action-fill-hover); --action-fill-active: var(--secondary-base-action-fill-active); --action-text: var(--secondary-base-action-text); --action-border: var(--secondary-base-action-border); color: var(--secondary-base-text-base); }
.bg-secondary-base\/10 { background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent); }
.hover\:bg-secondary-base\/10:hover { background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent); }
.active\:bg-secondary-base\/10:active { background-color: color-mix(in srgb, var(--secondary-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 10%, transparent); }
.bg-secondary-base\/30 { background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent); }
.hover\:bg-secondary-base\/30:hover { background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent); }
.active\:bg-secondary-base\/30:active { background-color: color-mix(in srgb, var(--secondary-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 30%, transparent); }
.bg-secondary-base\/50 { background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent); }
.hover\:bg-secondary-base\/50:hover { background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent); }
.active\:bg-secondary-base\/50:active { background-color: color-mix(in srgb, var(--secondary-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 50%, transparent); }
.bg-secondary-base\/70 { background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent); }
.hover\:bg-secondary-base\/70:hover { background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent); }
.active\:bg-secondary-base\/70:active { background-color: color-mix(in srgb, var(--secondary-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 70%, transparent); }
.bg-secondary-base\/90 { background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent); }
.hover\:bg-secondary-base\/90:hover { background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent); }
.active\:bg-secondary-base\/90:active { background-color: color-mix(in srgb, var(--secondary-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-base) 90%, transparent); }
.bg-secondary-strong { background-color: var(--secondary-strong); --bg-color: var(--secondary-strong); --text-heading: var(--secondary-strong-text-heading); --text-base: var(--secondary-strong-text-base); --text-muted: var(--secondary-strong-text-muted); --link: var(--secondary-strong-link); --link-hover: var(--secondary-strong-link-hover); --link-active: var(--secondary-strong-link-active); --border: var(--secondary-strong-border); --action-fill: var(--secondary-strong-action-fill); --action-fill-hover: var(--secondary-strong-action-fill-hover); --action-fill-active: var(--secondary-strong-action-fill-active); --action-text: var(--secondary-strong-action-text); --action-border: var(--secondary-strong-action-border); color: var(--secondary-strong-text-base); }
.hover\:bg-secondary-strong:hover { background-color: var(--secondary-strong); --bg-color: var(--secondary-strong); --text-heading: var(--secondary-strong-text-heading); --text-base: var(--secondary-strong-text-base); --text-muted: var(--secondary-strong-text-muted); --link: var(--secondary-strong-link); --link-hover: var(--secondary-strong-link-hover); --link-active: var(--secondary-strong-link-active); --border: var(--secondary-strong-border); --action-fill: var(--secondary-strong-action-fill); --action-fill-hover: var(--secondary-strong-action-fill-hover); --action-fill-active: var(--secondary-strong-action-fill-active); --action-text: var(--secondary-strong-action-text); --action-border: var(--secondary-strong-action-border); color: var(--secondary-strong-text-base); }
.active\:bg-secondary-strong:active { background-color: var(--secondary-strong); --bg-color: var(--secondary-strong); --text-heading: var(--secondary-strong-text-heading); --text-base: var(--secondary-strong-text-base); --text-muted: var(--secondary-strong-text-muted); --link: var(--secondary-strong-link); --link-hover: var(--secondary-strong-link-hover); --link-active: var(--secondary-strong-link-active); --border: var(--secondary-strong-border); --action-fill: var(--secondary-strong-action-fill); --action-fill-hover: var(--secondary-strong-action-fill-hover); --action-fill-active: var(--secondary-strong-action-fill-active); --action-text: var(--secondary-strong-action-text); --action-border: var(--secondary-strong-action-border); color: var(--secondary-strong-text-base); }
.surface-secondary-strong { background-color: var(--secondary-strong); --bg-color: var(--secondary-strong); --text-heading: var(--secondary-strong-text-heading); --text-base: var(--secondary-strong-text-base); --text-muted: var(--secondary-strong-text-muted); --link: var(--secondary-strong-link); --link-hover: var(--secondary-strong-link-hover); --link-active: var(--secondary-strong-link-active); --border: var(--secondary-strong-border); --action-fill: var(--secondary-strong-action-fill); --action-fill-hover: var(--secondary-strong-action-fill-hover); --action-fill-active: var(--secondary-strong-action-fill-active); --action-text: var(--secondary-strong-action-text); --action-border: var(--secondary-strong-action-border); color: var(--secondary-strong-text-base); }
.hover\:surface-secondary-strong:hover { background-color: var(--secondary-strong); --bg-color: var(--secondary-strong); --text-heading: var(--secondary-strong-text-heading); --text-base: var(--secondary-strong-text-base); --text-muted: var(--secondary-strong-text-muted); --link: var(--secondary-strong-link); --link-hover: var(--secondary-strong-link-hover); --link-active: var(--secondary-strong-link-active); --border: var(--secondary-strong-border); --action-fill: var(--secondary-strong-action-fill); --action-fill-hover: var(--secondary-strong-action-fill-hover); --action-fill-active: var(--secondary-strong-action-fill-active); --action-text: var(--secondary-strong-action-text); --action-border: var(--secondary-strong-action-border); color: var(--secondary-strong-text-base); }
.active\:surface-secondary-strong:active { background-color: var(--secondary-strong); --bg-color: var(--secondary-strong); --text-heading: var(--secondary-strong-text-heading); --text-base: var(--secondary-strong-text-base); --text-muted: var(--secondary-strong-text-muted); --link: var(--secondary-strong-link); --link-hover: var(--secondary-strong-link-hover); --link-active: var(--secondary-strong-link-active); --border: var(--secondary-strong-border); --action-fill: var(--secondary-strong-action-fill); --action-fill-hover: var(--secondary-strong-action-fill-hover); --action-fill-active: var(--secondary-strong-action-fill-active); --action-text: var(--secondary-strong-action-text); --action-border: var(--secondary-strong-action-border); color: var(--secondary-strong-text-base); }
.bg-secondary-strong\/10 { background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent); }
.hover\:bg-secondary-strong\/10:hover { background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent); }
.active\:bg-secondary-strong\/10:active { background-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 10%, transparent); }
.bg-secondary-strong\/30 { background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent); }
.hover\:bg-secondary-strong\/30:hover { background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent); }
.active\:bg-secondary-strong\/30:active { background-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 30%, transparent); }
.bg-secondary-strong\/50 { background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent); }
.hover\:bg-secondary-strong\/50:hover { background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent); }
.active\:bg-secondary-strong\/50:active { background-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 50%, transparent); }
.bg-secondary-strong\/70 { background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent); }
.hover\:bg-secondary-strong\/70:hover { background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent); }
.active\:bg-secondary-strong\/70:active { background-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 70%, transparent); }
.bg-secondary-strong\/90 { background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent); }
.hover\:bg-secondary-strong\/90:hover { background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent); }
.active\:bg-secondary-strong\/90:active { background-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-strong) 90%, transparent); }
.bg-default { background-color: var(--default); --bg-color: var(--default); --text-heading: var(--default-text-heading); --text-base: var(--default-text-base); --text-muted: var(--default-text-muted); --link: var(--default-link); --link-hover: var(--default-link-hover); --link-active: var(--default-link-active); --border: var(--default-border); --action-fill: var(--default-action-fill); --action-fill-hover: var(--default-action-fill-hover); --action-fill-active: var(--default-action-fill-active); --action-text: var(--default-action-text); --action-border: var(--default-action-border); color: var(--default-text-base); }
.hover\:bg-default:hover { background-color: var(--default); --bg-color: var(--default); --text-heading: var(--default-text-heading); --text-base: var(--default-text-base); --text-muted: var(--default-text-muted); --link: var(--default-link); --link-hover: var(--default-link-hover); --link-active: var(--default-link-active); --border: var(--default-border); --action-fill: var(--default-action-fill); --action-fill-hover: var(--default-action-fill-hover); --action-fill-active: var(--default-action-fill-active); --action-text: var(--default-action-text); --action-border: var(--default-action-border); color: var(--default-text-base); }
.active\:bg-default:active { background-color: var(--default); --bg-color: var(--default); --text-heading: var(--default-text-heading); --text-base: var(--default-text-base); --text-muted: var(--default-text-muted); --link: var(--default-link); --link-hover: var(--default-link-hover); --link-active: var(--default-link-active); --border: var(--default-border); --action-fill: var(--default-action-fill); --action-fill-hover: var(--default-action-fill-hover); --action-fill-active: var(--default-action-fill-active); --action-text: var(--default-action-text); --action-border: var(--default-action-border); color: var(--default-text-base); }
.surface-default { background-color: var(--default); --bg-color: var(--default); --text-heading: var(--default-text-heading); --text-base: var(--default-text-base); --text-muted: var(--default-text-muted); --link: var(--default-link); --link-hover: var(--default-link-hover); --link-active: var(--default-link-active); --border: var(--default-border); --action-fill: var(--default-action-fill); --action-fill-hover: var(--default-action-fill-hover); --action-fill-active: var(--default-action-fill-active); --action-text: var(--default-action-text); --action-border: var(--default-action-border); color: var(--default-text-base); }
.hover\:surface-default:hover { background-color: var(--default); --bg-color: var(--default); --text-heading: var(--default-text-heading); --text-base: var(--default-text-base); --text-muted: var(--default-text-muted); --link: var(--default-link); --link-hover: var(--default-link-hover); --link-active: var(--default-link-active); --border: var(--default-border); --action-fill: var(--default-action-fill); --action-fill-hover: var(--default-action-fill-hover); --action-fill-active: var(--default-action-fill-active); --action-text: var(--default-action-text); --action-border: var(--default-action-border); color: var(--default-text-base); }
.active\:surface-default:active { background-color: var(--default); --bg-color: var(--default); --text-heading: var(--default-text-heading); --text-base: var(--default-text-base); --text-muted: var(--default-text-muted); --link: var(--default-link); --link-hover: var(--default-link-hover); --link-active: var(--default-link-active); --border: var(--default-border); --action-fill: var(--default-action-fill); --action-fill-hover: var(--default-action-fill-hover); --action-fill-active: var(--default-action-fill-active); --action-text: var(--default-action-text); --action-border: var(--default-action-border); color: var(--default-text-base); }
.bg-default\/10 { background-color: color-mix(in srgb, var(--default) 10%, transparent); --bg-color: color-mix(in srgb, var(--default) 10%, transparent); }
.hover\:bg-default\/10:hover { background-color: color-mix(in srgb, var(--default) 10%, transparent); --bg-color: color-mix(in srgb, var(--default) 10%, transparent); }
.active\:bg-default\/10:active { background-color: color-mix(in srgb, var(--default) 10%, transparent); --bg-color: color-mix(in srgb, var(--default) 10%, transparent); }
.bg-default\/30 { background-color: color-mix(in srgb, var(--default) 30%, transparent); --bg-color: color-mix(in srgb, var(--default) 30%, transparent); }
.hover\:bg-default\/30:hover { background-color: color-mix(in srgb, var(--default) 30%, transparent); --bg-color: color-mix(in srgb, var(--default) 30%, transparent); }
.active\:bg-default\/30:active { background-color: color-mix(in srgb, var(--default) 30%, transparent); --bg-color: color-mix(in srgb, var(--default) 30%, transparent); }
.bg-default\/50 { background-color: color-mix(in srgb, var(--default) 50%, transparent); --bg-color: color-mix(in srgb, var(--default) 50%, transparent); }
.hover\:bg-default\/50:hover { background-color: color-mix(in srgb, var(--default) 50%, transparent); --bg-color: color-mix(in srgb, var(--default) 50%, transparent); }
.active\:bg-default\/50:active { background-color: color-mix(in srgb, var(--default) 50%, transparent); --bg-color: color-mix(in srgb, var(--default) 50%, transparent); }
.bg-default\/70 { background-color: color-mix(in srgb, var(--default) 70%, transparent); --bg-color: color-mix(in srgb, var(--default) 70%, transparent); }
.hover\:bg-default\/70:hover { background-color: color-mix(in srgb, var(--default) 70%, transparent); --bg-color: color-mix(in srgb, var(--default) 70%, transparent); }
.active\:bg-default\/70:active { background-color: color-mix(in srgb, var(--default) 70%, transparent); --bg-color: color-mix(in srgb, var(--default) 70%, transparent); }
.bg-default\/90 { background-color: color-mix(in srgb, var(--default) 90%, transparent); --bg-color: color-mix(in srgb, var(--default) 90%, transparent); }
.hover\:bg-default\/90:hover { background-color: color-mix(in srgb, var(--default) 90%, transparent); --bg-color: color-mix(in srgb, var(--default) 90%, transparent); }
.active\:bg-default\/90:active { background-color: color-mix(in srgb, var(--default) 90%, transparent); --bg-color: color-mix(in srgb, var(--default) 90%, transparent); }
.bg-primary-weak { background-color: var(--primary-weak); --bg-color: var(--primary-weak); --text-heading: var(--primary-weak-text-heading); --text-base: var(--primary-weak-text-base); --text-muted: var(--primary-weak-text-muted); --link: var(--primary-weak-link); --link-hover: var(--primary-weak-link-hover); --link-active: var(--primary-weak-link-active); --border: var(--primary-weak-border); --action-fill: var(--primary-weak-action-fill); --action-fill-hover: var(--primary-weak-action-fill-hover); --action-fill-active: var(--primary-weak-action-fill-active); --action-text: var(--primary-weak-action-text); --action-border: var(--primary-weak-action-border); color: var(--primary-weak-text-base); }
.hover\:bg-primary-weak:hover { background-color: var(--primary-weak); --bg-color: var(--primary-weak); --text-heading: var(--primary-weak-text-heading); --text-base: var(--primary-weak-text-base); --text-muted: var(--primary-weak-text-muted); --link: var(--primary-weak-link); --link-hover: var(--primary-weak-link-hover); --link-active: var(--primary-weak-link-active); --border: var(--primary-weak-border); --action-fill: var(--primary-weak-action-fill); --action-fill-hover: var(--primary-weak-action-fill-hover); --action-fill-active: var(--primary-weak-action-fill-active); --action-text: var(--primary-weak-action-text); --action-border: var(--primary-weak-action-border); color: var(--primary-weak-text-base); }
.active\:bg-primary-weak:active { background-color: var(--primary-weak); --bg-color: var(--primary-weak); --text-heading: var(--primary-weak-text-heading); --text-base: var(--primary-weak-text-base); --text-muted: var(--primary-weak-text-muted); --link: var(--primary-weak-link); --link-hover: var(--primary-weak-link-hover); --link-active: var(--primary-weak-link-active); --border: var(--primary-weak-border); --action-fill: var(--primary-weak-action-fill); --action-fill-hover: var(--primary-weak-action-fill-hover); --action-fill-active: var(--primary-weak-action-fill-active); --action-text: var(--primary-weak-action-text); --action-border: var(--primary-weak-action-border); color: var(--primary-weak-text-base); }
.surface-primary-weak { background-color: var(--primary-weak); --bg-color: var(--primary-weak); --text-heading: var(--primary-weak-text-heading); --text-base: var(--primary-weak-text-base); --text-muted: var(--primary-weak-text-muted); --link: var(--primary-weak-link); --link-hover: var(--primary-weak-link-hover); --link-active: var(--primary-weak-link-active); --border: var(--primary-weak-border); --action-fill: var(--primary-weak-action-fill); --action-fill-hover: var(--primary-weak-action-fill-hover); --action-fill-active: var(--primary-weak-action-fill-active); --action-text: var(--primary-weak-action-text); --action-border: var(--primary-weak-action-border); color: var(--primary-weak-text-base); }
.hover\:surface-primary-weak:hover { background-color: var(--primary-weak); --bg-color: var(--primary-weak); --text-heading: var(--primary-weak-text-heading); --text-base: var(--primary-weak-text-base); --text-muted: var(--primary-weak-text-muted); --link: var(--primary-weak-link); --link-hover: var(--primary-weak-link-hover); --link-active: var(--primary-weak-link-active); --border: var(--primary-weak-border); --action-fill: var(--primary-weak-action-fill); --action-fill-hover: var(--primary-weak-action-fill-hover); --action-fill-active: var(--primary-weak-action-fill-active); --action-text: var(--primary-weak-action-text); --action-border: var(--primary-weak-action-border); color: var(--primary-weak-text-base); }
.active\:surface-primary-weak:active { background-color: var(--primary-weak); --bg-color: var(--primary-weak); --text-heading: var(--primary-weak-text-heading); --text-base: var(--primary-weak-text-base); --text-muted: var(--primary-weak-text-muted); --link: var(--primary-weak-link); --link-hover: var(--primary-weak-link-hover); --link-active: var(--primary-weak-link-active); --border: var(--primary-weak-border); --action-fill: var(--primary-weak-action-fill); --action-fill-hover: var(--primary-weak-action-fill-hover); --action-fill-active: var(--primary-weak-action-fill-active); --action-text: var(--primary-weak-action-text); --action-border: var(--primary-weak-action-border); color: var(--primary-weak-text-base); }
.bg-primary-weak\/10 { background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent); }
.hover\:bg-primary-weak\/10:hover { background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent); }
.active\:bg-primary-weak\/10:active { background-color: color-mix(in srgb, var(--primary-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 10%, transparent); }
.bg-primary-weak\/30 { background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent); }
.hover\:bg-primary-weak\/30:hover { background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent); }
.active\:bg-primary-weak\/30:active { background-color: color-mix(in srgb, var(--primary-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 30%, transparent); }
.bg-primary-weak\/50 { background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent); }
.hover\:bg-primary-weak\/50:hover { background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent); }
.active\:bg-primary-weak\/50:active { background-color: color-mix(in srgb, var(--primary-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 50%, transparent); }
.bg-primary-weak\/70 { background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent); }
.hover\:bg-primary-weak\/70:hover { background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent); }
.active\:bg-primary-weak\/70:active { background-color: color-mix(in srgb, var(--primary-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 70%, transparent); }
.bg-primary-weak\/90 { background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent); }
.hover\:bg-primary-weak\/90:hover { background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent); }
.active\:bg-primary-weak\/90:active { background-color: color-mix(in srgb, var(--primary-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-weak) 90%, transparent); }
.bg-primary-soft { background-color: var(--primary-soft); --bg-color: var(--primary-soft); --text-heading: var(--primary-soft-text-heading); --text-base: var(--primary-soft-text-base); --text-muted: var(--primary-soft-text-muted); --link: var(--primary-soft-link); --link-hover: var(--primary-soft-link-hover); --link-active: var(--primary-soft-link-active); --border: var(--primary-soft-border); --action-fill: var(--primary-soft-action-fill); --action-fill-hover: var(--primary-soft-action-fill-hover); --action-fill-active: var(--primary-soft-action-fill-active); --action-text: var(--primary-soft-action-text); --action-border: var(--primary-soft-action-border); color: var(--primary-soft-text-base); }
.hover\:bg-primary-soft:hover { background-color: var(--primary-soft); --bg-color: var(--primary-soft); --text-heading: var(--primary-soft-text-heading); --text-base: var(--primary-soft-text-base); --text-muted: var(--primary-soft-text-muted); --link: var(--primary-soft-link); --link-hover: var(--primary-soft-link-hover); --link-active: var(--primary-soft-link-active); --border: var(--primary-soft-border); --action-fill: var(--primary-soft-action-fill); --action-fill-hover: var(--primary-soft-action-fill-hover); --action-fill-active: var(--primary-soft-action-fill-active); --action-text: var(--primary-soft-action-text); --action-border: var(--primary-soft-action-border); color: var(--primary-soft-text-base); }
.active\:bg-primary-soft:active { background-color: var(--primary-soft); --bg-color: var(--primary-soft); --text-heading: var(--primary-soft-text-heading); --text-base: var(--primary-soft-text-base); --text-muted: var(--primary-soft-text-muted); --link: var(--primary-soft-link); --link-hover: var(--primary-soft-link-hover); --link-active: var(--primary-soft-link-active); --border: var(--primary-soft-border); --action-fill: var(--primary-soft-action-fill); --action-fill-hover: var(--primary-soft-action-fill-hover); --action-fill-active: var(--primary-soft-action-fill-active); --action-text: var(--primary-soft-action-text); --action-border: var(--primary-soft-action-border); color: var(--primary-soft-text-base); }
.surface-primary-soft { background-color: var(--primary-soft); --bg-color: var(--primary-soft); --text-heading: var(--primary-soft-text-heading); --text-base: var(--primary-soft-text-base); --text-muted: var(--primary-soft-text-muted); --link: var(--primary-soft-link); --link-hover: var(--primary-soft-link-hover); --link-active: var(--primary-soft-link-active); --border: var(--primary-soft-border); --action-fill: var(--primary-soft-action-fill); --action-fill-hover: var(--primary-soft-action-fill-hover); --action-fill-active: var(--primary-soft-action-fill-active); --action-text: var(--primary-soft-action-text); --action-border: var(--primary-soft-action-border); color: var(--primary-soft-text-base); }
.hover\:surface-primary-soft:hover { background-color: var(--primary-soft); --bg-color: var(--primary-soft); --text-heading: var(--primary-soft-text-heading); --text-base: var(--primary-soft-text-base); --text-muted: var(--primary-soft-text-muted); --link: var(--primary-soft-link); --link-hover: var(--primary-soft-link-hover); --link-active: var(--primary-soft-link-active); --border: var(--primary-soft-border); --action-fill: var(--primary-soft-action-fill); --action-fill-hover: var(--primary-soft-action-fill-hover); --action-fill-active: var(--primary-soft-action-fill-active); --action-text: var(--primary-soft-action-text); --action-border: var(--primary-soft-action-border); color: var(--primary-soft-text-base); }
.active\:surface-primary-soft:active { background-color: var(--primary-soft); --bg-color: var(--primary-soft); --text-heading: var(--primary-soft-text-heading); --text-base: var(--primary-soft-text-base); --text-muted: var(--primary-soft-text-muted); --link: var(--primary-soft-link); --link-hover: var(--primary-soft-link-hover); --link-active: var(--primary-soft-link-active); --border: var(--primary-soft-border); --action-fill: var(--primary-soft-action-fill); --action-fill-hover: var(--primary-soft-action-fill-hover); --action-fill-active: var(--primary-soft-action-fill-active); --action-text: var(--primary-soft-action-text); --action-border: var(--primary-soft-action-border); color: var(--primary-soft-text-base); }
.bg-primary-soft\/10 { background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent); }
.hover\:bg-primary-soft\/10:hover { background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent); }
.active\:bg-primary-soft\/10:active { background-color: color-mix(in srgb, var(--primary-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 10%, transparent); }
.bg-primary-soft\/30 { background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
.hover\:bg-primary-soft\/30:hover { background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
.active\:bg-primary-soft\/30:active { background-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
.bg-primary-soft\/50 { background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent); }
.hover\:bg-primary-soft\/50:hover { background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent); }
.active\:bg-primary-soft\/50:active { background-color: color-mix(in srgb, var(--primary-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 50%, transparent); }
.bg-primary-soft\/70 { background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.hover\:bg-primary-soft\/70:hover { background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.active\:bg-primary-soft\/70:active { background-color: color-mix(in srgb, var(--primary-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.bg-primary-soft\/90 { background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent); }
.hover\:bg-primary-soft\/90:hover { background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent); }
.active\:bg-primary-soft\/90:active { background-color: color-mix(in srgb, var(--primary-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-soft) 90%, transparent); }
.bg-primary-strong { background-color: var(--primary-strong); --bg-color: var(--primary-strong); --text-heading: var(--primary-strong-text-heading); --text-base: var(--primary-strong-text-base); --text-muted: var(--primary-strong-text-muted); --link: var(--primary-strong-link); --link-hover: var(--primary-strong-link-hover); --link-active: var(--primary-strong-link-active); --border: var(--primary-strong-border); --action-fill: var(--primary-strong-action-fill); --action-fill-hover: var(--primary-strong-action-fill-hover); --action-fill-active: var(--primary-strong-action-fill-active); --action-text: var(--primary-strong-action-text); --action-border: var(--primary-strong-action-border); color: var(--primary-strong-text-base); }
.hover\:bg-primary-strong:hover { background-color: var(--primary-strong); --bg-color: var(--primary-strong); --text-heading: var(--primary-strong-text-heading); --text-base: var(--primary-strong-text-base); --text-muted: var(--primary-strong-text-muted); --link: var(--primary-strong-link); --link-hover: var(--primary-strong-link-hover); --link-active: var(--primary-strong-link-active); --border: var(--primary-strong-border); --action-fill: var(--primary-strong-action-fill); --action-fill-hover: var(--primary-strong-action-fill-hover); --action-fill-active: var(--primary-strong-action-fill-active); --action-text: var(--primary-strong-action-text); --action-border: var(--primary-strong-action-border); color: var(--primary-strong-text-base); }
.active\:bg-primary-strong:active { background-color: var(--primary-strong); --bg-color: var(--primary-strong); --text-heading: var(--primary-strong-text-heading); --text-base: var(--primary-strong-text-base); --text-muted: var(--primary-strong-text-muted); --link: var(--primary-strong-link); --link-hover: var(--primary-strong-link-hover); --link-active: var(--primary-strong-link-active); --border: var(--primary-strong-border); --action-fill: var(--primary-strong-action-fill); --action-fill-hover: var(--primary-strong-action-fill-hover); --action-fill-active: var(--primary-strong-action-fill-active); --action-text: var(--primary-strong-action-text); --action-border: var(--primary-strong-action-border); color: var(--primary-strong-text-base); }
.surface-primary-strong { background-color: var(--primary-strong); --bg-color: var(--primary-strong); --text-heading: var(--primary-strong-text-heading); --text-base: var(--primary-strong-text-base); --text-muted: var(--primary-strong-text-muted); --link: var(--primary-strong-link); --link-hover: var(--primary-strong-link-hover); --link-active: var(--primary-strong-link-active); --border: var(--primary-strong-border); --action-fill: var(--primary-strong-action-fill); --action-fill-hover: var(--primary-strong-action-fill-hover); --action-fill-active: var(--primary-strong-action-fill-active); --action-text: var(--primary-strong-action-text); --action-border: var(--primary-strong-action-border); color: var(--primary-strong-text-base); }
.hover\:surface-primary-strong:hover { background-color: var(--primary-strong); --bg-color: var(--primary-strong); --text-heading: var(--primary-strong-text-heading); --text-base: var(--primary-strong-text-base); --text-muted: var(--primary-strong-text-muted); --link: var(--primary-strong-link); --link-hover: var(--primary-strong-link-hover); --link-active: var(--primary-strong-link-active); --border: var(--primary-strong-border); --action-fill: var(--primary-strong-action-fill); --action-fill-hover: var(--primary-strong-action-fill-hover); --action-fill-active: var(--primary-strong-action-fill-active); --action-text: var(--primary-strong-action-text); --action-border: var(--primary-strong-action-border); color: var(--primary-strong-text-base); }
.active\:surface-primary-strong:active { background-color: var(--primary-strong); --bg-color: var(--primary-strong); --text-heading: var(--primary-strong-text-heading); --text-base: var(--primary-strong-text-base); --text-muted: var(--primary-strong-text-muted); --link: var(--primary-strong-link); --link-hover: var(--primary-strong-link-hover); --link-active: var(--primary-strong-link-active); --border: var(--primary-strong-border); --action-fill: var(--primary-strong-action-fill); --action-fill-hover: var(--primary-strong-action-fill-hover); --action-fill-active: var(--primary-strong-action-fill-active); --action-text: var(--primary-strong-action-text); --action-border: var(--primary-strong-action-border); color: var(--primary-strong-text-base); }
.bg-primary-strong\/10 { background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent); }
.hover\:bg-primary-strong\/10:hover { background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent); }
.active\:bg-primary-strong\/10:active { background-color: color-mix(in srgb, var(--primary-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 10%, transparent); }
.bg-primary-strong\/30 { background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent); }
.hover\:bg-primary-strong\/30:hover { background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent); }
.active\:bg-primary-strong\/30:active { background-color: color-mix(in srgb, var(--primary-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 30%, transparent); }
.bg-primary-strong\/50 { background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent); }
.hover\:bg-primary-strong\/50:hover { background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent); }
.active\:bg-primary-strong\/50:active { background-color: color-mix(in srgb, var(--primary-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 50%, transparent); }
.bg-primary-strong\/70 { background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent); }
.hover\:bg-primary-strong\/70:hover { background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent); }
.active\:bg-primary-strong\/70:active { background-color: color-mix(in srgb, var(--primary-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 70%, transparent); }
.bg-primary-strong\/90 { background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent); }
.hover\:bg-primary-strong\/90:hover { background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent); }
.active\:bg-primary-strong\/90:active { background-color: color-mix(in srgb, var(--primary-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-strong) 90%, transparent); }
.bg-primary-stronger { background-color: var(--primary-stronger); --bg-color: var(--primary-stronger); --text-heading: var(--primary-stronger-text-heading); --text-base: var(--primary-stronger-text-base); --text-muted: var(--primary-stronger-text-muted); --link: var(--primary-stronger-link); --link-hover: var(--primary-stronger-link-hover); --link-active: var(--primary-stronger-link-active); --border: var(--primary-stronger-border); --action-fill: var(--primary-stronger-action-fill); --action-fill-hover: var(--primary-stronger-action-fill-hover); --action-fill-active: var(--primary-stronger-action-fill-active); --action-text: var(--primary-stronger-action-text); --action-border: var(--primary-stronger-action-border); color: var(--primary-stronger-text-base); }
.hover\:bg-primary-stronger:hover { background-color: var(--primary-stronger); --bg-color: var(--primary-stronger); --text-heading: var(--primary-stronger-text-heading); --text-base: var(--primary-stronger-text-base); --text-muted: var(--primary-stronger-text-muted); --link: var(--primary-stronger-link); --link-hover: var(--primary-stronger-link-hover); --link-active: var(--primary-stronger-link-active); --border: var(--primary-stronger-border); --action-fill: var(--primary-stronger-action-fill); --action-fill-hover: var(--primary-stronger-action-fill-hover); --action-fill-active: var(--primary-stronger-action-fill-active); --action-text: var(--primary-stronger-action-text); --action-border: var(--primary-stronger-action-border); color: var(--primary-stronger-text-base); }
.active\:bg-primary-stronger:active { background-color: var(--primary-stronger); --bg-color: var(--primary-stronger); --text-heading: var(--primary-stronger-text-heading); --text-base: var(--primary-stronger-text-base); --text-muted: var(--primary-stronger-text-muted); --link: var(--primary-stronger-link); --link-hover: var(--primary-stronger-link-hover); --link-active: var(--primary-stronger-link-active); --border: var(--primary-stronger-border); --action-fill: var(--primary-stronger-action-fill); --action-fill-hover: var(--primary-stronger-action-fill-hover); --action-fill-active: var(--primary-stronger-action-fill-active); --action-text: var(--primary-stronger-action-text); --action-border: var(--primary-stronger-action-border); color: var(--primary-stronger-text-base); }
.surface-primary-stronger { background-color: var(--primary-stronger); --bg-color: var(--primary-stronger); --text-heading: var(--primary-stronger-text-heading); --text-base: var(--primary-stronger-text-base); --text-muted: var(--primary-stronger-text-muted); --link: var(--primary-stronger-link); --link-hover: var(--primary-stronger-link-hover); --link-active: var(--primary-stronger-link-active); --border: var(--primary-stronger-border); --action-fill: var(--primary-stronger-action-fill); --action-fill-hover: var(--primary-stronger-action-fill-hover); --action-fill-active: var(--primary-stronger-action-fill-active); --action-text: var(--primary-stronger-action-text); --action-border: var(--primary-stronger-action-border); color: var(--primary-stronger-text-base); }
.hover\:surface-primary-stronger:hover { background-color: var(--primary-stronger); --bg-color: var(--primary-stronger); --text-heading: var(--primary-stronger-text-heading); --text-base: var(--primary-stronger-text-base); --text-muted: var(--primary-stronger-text-muted); --link: var(--primary-stronger-link); --link-hover: var(--primary-stronger-link-hover); --link-active: var(--primary-stronger-link-active); --border: var(--primary-stronger-border); --action-fill: var(--primary-stronger-action-fill); --action-fill-hover: var(--primary-stronger-action-fill-hover); --action-fill-active: var(--primary-stronger-action-fill-active); --action-text: var(--primary-stronger-action-text); --action-border: var(--primary-stronger-action-border); color: var(--primary-stronger-text-base); }
.active\:surface-primary-stronger:active { background-color: var(--primary-stronger); --bg-color: var(--primary-stronger); --text-heading: var(--primary-stronger-text-heading); --text-base: var(--primary-stronger-text-base); --text-muted: var(--primary-stronger-text-muted); --link: var(--primary-stronger-link); --link-hover: var(--primary-stronger-link-hover); --link-active: var(--primary-stronger-link-active); --border: var(--primary-stronger-border); --action-fill: var(--primary-stronger-action-fill); --action-fill-hover: var(--primary-stronger-action-fill-hover); --action-fill-active: var(--primary-stronger-action-fill-active); --action-text: var(--primary-stronger-action-text); --action-border: var(--primary-stronger-action-border); color: var(--primary-stronger-text-base); }
.bg-primary-stronger\/10 { background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent); }
.hover\:bg-primary-stronger\/10:hover { background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent); }
.active\:bg-primary-stronger\/10:active { background-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 10%, transparent); }
.bg-primary-stronger\/30 { background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent); }
.hover\:bg-primary-stronger\/30:hover { background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent); }
.active\:bg-primary-stronger\/30:active { background-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 30%, transparent); }
.bg-primary-stronger\/50 { background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent); }
.hover\:bg-primary-stronger\/50:hover { background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent); }
.active\:bg-primary-stronger\/50:active { background-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 50%, transparent); }
.bg-primary-stronger\/70 { background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent); }
.hover\:bg-primary-stronger\/70:hover { background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent); }
.active\:bg-primary-stronger\/70:active { background-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 70%, transparent); }
.bg-primary-stronger\/90 { background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent); }
.hover\:bg-primary-stronger\/90:hover { background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent); }
.active\:bg-primary-stronger\/90:active { background-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-stronger) 90%, transparent); }
.bg-primary-base { background-color: var(--primary-base); --bg-color: var(--primary-base); --text-heading: var(--primary-base-text-heading); --text-base: var(--primary-base-text-base); --text-muted: var(--primary-base-text-muted); --link: var(--primary-base-link); --link-hover: var(--primary-base-link-hover); --link-active: var(--primary-base-link-active); --border: var(--primary-base-border); --action-fill: var(--primary-base-action-fill); --action-fill-hover: var(--primary-base-action-fill-hover); --action-fill-active: var(--primary-base-action-fill-active); --action-text: var(--primary-base-action-text); --action-border: var(--primary-base-action-border); color: var(--primary-base-text-base); }
.hover\:bg-primary-base:hover { background-color: var(--primary-base); --bg-color: var(--primary-base); --text-heading: var(--primary-base-text-heading); --text-base: var(--primary-base-text-base); --text-muted: var(--primary-base-text-muted); --link: var(--primary-base-link); --link-hover: var(--primary-base-link-hover); --link-active: var(--primary-base-link-active); --border: var(--primary-base-border); --action-fill: var(--primary-base-action-fill); --action-fill-hover: var(--primary-base-action-fill-hover); --action-fill-active: var(--primary-base-action-fill-active); --action-text: var(--primary-base-action-text); --action-border: var(--primary-base-action-border); color: var(--primary-base-text-base); }
.active\:bg-primary-base:active { background-color: var(--primary-base); --bg-color: var(--primary-base); --text-heading: var(--primary-base-text-heading); --text-base: var(--primary-base-text-base); --text-muted: var(--primary-base-text-muted); --link: var(--primary-base-link); --link-hover: var(--primary-base-link-hover); --link-active: var(--primary-base-link-active); --border: var(--primary-base-border); --action-fill: var(--primary-base-action-fill); --action-fill-hover: var(--primary-base-action-fill-hover); --action-fill-active: var(--primary-base-action-fill-active); --action-text: var(--primary-base-action-text); --action-border: var(--primary-base-action-border); color: var(--primary-base-text-base); }
.surface-primary-base { background-color: var(--primary-base); --bg-color: var(--primary-base); --text-heading: var(--primary-base-text-heading); --text-base: var(--primary-base-text-base); --text-muted: var(--primary-base-text-muted); --link: var(--primary-base-link); --link-hover: var(--primary-base-link-hover); --link-active: var(--primary-base-link-active); --border: var(--primary-base-border); --action-fill: var(--primary-base-action-fill); --action-fill-hover: var(--primary-base-action-fill-hover); --action-fill-active: var(--primary-base-action-fill-active); --action-text: var(--primary-base-action-text); --action-border: var(--primary-base-action-border); color: var(--primary-base-text-base); }
.hover\:surface-primary-base:hover { background-color: var(--primary-base); --bg-color: var(--primary-base); --text-heading: var(--primary-base-text-heading); --text-base: var(--primary-base-text-base); --text-muted: var(--primary-base-text-muted); --link: var(--primary-base-link); --link-hover: var(--primary-base-link-hover); --link-active: var(--primary-base-link-active); --border: var(--primary-base-border); --action-fill: var(--primary-base-action-fill); --action-fill-hover: var(--primary-base-action-fill-hover); --action-fill-active: var(--primary-base-action-fill-active); --action-text: var(--primary-base-action-text); --action-border: var(--primary-base-action-border); color: var(--primary-base-text-base); }
.active\:surface-primary-base:active { background-color: var(--primary-base); --bg-color: var(--primary-base); --text-heading: var(--primary-base-text-heading); --text-base: var(--primary-base-text-base); --text-muted: var(--primary-base-text-muted); --link: var(--primary-base-link); --link-hover: var(--primary-base-link-hover); --link-active: var(--primary-base-link-active); --border: var(--primary-base-border); --action-fill: var(--primary-base-action-fill); --action-fill-hover: var(--primary-base-action-fill-hover); --action-fill-active: var(--primary-base-action-fill-active); --action-text: var(--primary-base-action-text); --action-border: var(--primary-base-action-border); color: var(--primary-base-text-base); }
.bg-primary-base\/10 { background-color: color-mix(in srgb, var(--primary-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent); }
.hover\:bg-primary-base\/10:hover { background-color: color-mix(in srgb, var(--primary-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent); }
.active\:bg-primary-base\/10:active { background-color: color-mix(in srgb, var(--primary-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 10%, transparent); }
.bg-primary-base\/30 { background-color: color-mix(in srgb, var(--primary-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent); }
.hover\:bg-primary-base\/30:hover { background-color: color-mix(in srgb, var(--primary-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent); }
.active\:bg-primary-base\/30:active { background-color: color-mix(in srgb, var(--primary-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 30%, transparent); }
.bg-primary-base\/50 { background-color: color-mix(in srgb, var(--primary-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent); }
.hover\:bg-primary-base\/50:hover { background-color: color-mix(in srgb, var(--primary-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent); }
.active\:bg-primary-base\/50:active { background-color: color-mix(in srgb, var(--primary-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 50%, transparent); }
.bg-primary-base\/70 { background-color: color-mix(in srgb, var(--primary-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent); }
.hover\:bg-primary-base\/70:hover { background-color: color-mix(in srgb, var(--primary-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent); }
.active\:bg-primary-base\/70:active { background-color: color-mix(in srgb, var(--primary-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 70%, transparent); }
.bg-primary-base\/90 { background-color: color-mix(in srgb, var(--primary-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent); }
.hover\:bg-primary-base\/90:hover { background-color: color-mix(in srgb, var(--primary-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent); }
.active\:bg-primary-base\/90:active { background-color: color-mix(in srgb, var(--primary-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--primary-base) 90%, transparent); }
.bg-secondary-weak { background-color: var(--secondary-weak); --bg-color: var(--secondary-weak); --text-heading: var(--secondary-weak-text-heading); --text-base: var(--secondary-weak-text-base); --text-muted: var(--secondary-weak-text-muted); --link: var(--secondary-weak-link); --link-hover: var(--secondary-weak-link-hover); --link-active: var(--secondary-weak-link-active); --border: var(--secondary-weak-border); --action-fill: var(--secondary-weak-action-fill); --action-fill-hover: var(--secondary-weak-action-fill-hover); --action-fill-active: var(--secondary-weak-action-fill-active); --action-text: var(--secondary-weak-action-text); --action-border: var(--secondary-weak-action-border); color: var(--secondary-weak-text-base); }
.hover\:bg-secondary-weak:hover { background-color: var(--secondary-weak); --bg-color: var(--secondary-weak); --text-heading: var(--secondary-weak-text-heading); --text-base: var(--secondary-weak-text-base); --text-muted: var(--secondary-weak-text-muted); --link: var(--secondary-weak-link); --link-hover: var(--secondary-weak-link-hover); --link-active: var(--secondary-weak-link-active); --border: var(--secondary-weak-border); --action-fill: var(--secondary-weak-action-fill); --action-fill-hover: var(--secondary-weak-action-fill-hover); --action-fill-active: var(--secondary-weak-action-fill-active); --action-text: var(--secondary-weak-action-text); --action-border: var(--secondary-weak-action-border); color: var(--secondary-weak-text-base); }
.active\:bg-secondary-weak:active { background-color: var(--secondary-weak); --bg-color: var(--secondary-weak); --text-heading: var(--secondary-weak-text-heading); --text-base: var(--secondary-weak-text-base); --text-muted: var(--secondary-weak-text-muted); --link: var(--secondary-weak-link); --link-hover: var(--secondary-weak-link-hover); --link-active: var(--secondary-weak-link-active); --border: var(--secondary-weak-border); --action-fill: var(--secondary-weak-action-fill); --action-fill-hover: var(--secondary-weak-action-fill-hover); --action-fill-active: var(--secondary-weak-action-fill-active); --action-text: var(--secondary-weak-action-text); --action-border: var(--secondary-weak-action-border); color: var(--secondary-weak-text-base); }
.surface-secondary-weak { background-color: var(--secondary-weak); --bg-color: var(--secondary-weak); --text-heading: var(--secondary-weak-text-heading); --text-base: var(--secondary-weak-text-base); --text-muted: var(--secondary-weak-text-muted); --link: var(--secondary-weak-link); --link-hover: var(--secondary-weak-link-hover); --link-active: var(--secondary-weak-link-active); --border: var(--secondary-weak-border); --action-fill: var(--secondary-weak-action-fill); --action-fill-hover: var(--secondary-weak-action-fill-hover); --action-fill-active: var(--secondary-weak-action-fill-active); --action-text: var(--secondary-weak-action-text); --action-border: var(--secondary-weak-action-border); color: var(--secondary-weak-text-base); }
.hover\:surface-secondary-weak:hover { background-color: var(--secondary-weak); --bg-color: var(--secondary-weak); --text-heading: var(--secondary-weak-text-heading); --text-base: var(--secondary-weak-text-base); --text-muted: var(--secondary-weak-text-muted); --link: var(--secondary-weak-link); --link-hover: var(--secondary-weak-link-hover); --link-active: var(--secondary-weak-link-active); --border: var(--secondary-weak-border); --action-fill: var(--secondary-weak-action-fill); --action-fill-hover: var(--secondary-weak-action-fill-hover); --action-fill-active: var(--secondary-weak-action-fill-active); --action-text: var(--secondary-weak-action-text); --action-border: var(--secondary-weak-action-border); color: var(--secondary-weak-text-base); }
.active\:surface-secondary-weak:active { background-color: var(--secondary-weak); --bg-color: var(--secondary-weak); --text-heading: var(--secondary-weak-text-heading); --text-base: var(--secondary-weak-text-base); --text-muted: var(--secondary-weak-text-muted); --link: var(--secondary-weak-link); --link-hover: var(--secondary-weak-link-hover); --link-active: var(--secondary-weak-link-active); --border: var(--secondary-weak-border); --action-fill: var(--secondary-weak-action-fill); --action-fill-hover: var(--secondary-weak-action-fill-hover); --action-fill-active: var(--secondary-weak-action-fill-active); --action-text: var(--secondary-weak-action-text); --action-border: var(--secondary-weak-action-border); color: var(--secondary-weak-text-base); }
.bg-secondary-weak\/10 { background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent); }
.hover\:bg-secondary-weak\/10:hover { background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent); }
.active\:bg-secondary-weak\/10:active { background-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 10%, transparent); }
.bg-secondary-weak\/30 { background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent); }
.hover\:bg-secondary-weak\/30:hover { background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent); }
.active\:bg-secondary-weak\/30:active { background-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 30%, transparent); }
.bg-secondary-weak\/50 { background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent); }
.hover\:bg-secondary-weak\/50:hover { background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent); }
.active\:bg-secondary-weak\/50:active { background-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 50%, transparent); }
.bg-secondary-weak\/70 { background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent); }
.hover\:bg-secondary-weak\/70:hover { background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent); }
.active\:bg-secondary-weak\/70:active { background-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 70%, transparent); }
.bg-secondary-weak\/90 { background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent); }
.hover\:bg-secondary-weak\/90:hover { background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent); }
.active\:bg-secondary-weak\/90:active { background-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-weak) 90%, transparent); }
.bg-secondary-soft { background-color: var(--secondary-soft); --bg-color: var(--secondary-soft); --text-heading: var(--secondary-soft-text-heading); --text-base: var(--secondary-soft-text-base); --text-muted: var(--secondary-soft-text-muted); --link: var(--secondary-soft-link); --link-hover: var(--secondary-soft-link-hover); --link-active: var(--secondary-soft-link-active); --border: var(--secondary-soft-border); --action-fill: var(--secondary-soft-action-fill); --action-fill-hover: var(--secondary-soft-action-fill-hover); --action-fill-active: var(--secondary-soft-action-fill-active); --action-text: var(--secondary-soft-action-text); --action-border: var(--secondary-soft-action-border); color: var(--secondary-soft-text-base); }
.hover\:bg-secondary-soft:hover { background-color: var(--secondary-soft); --bg-color: var(--secondary-soft); --text-heading: var(--secondary-soft-text-heading); --text-base: var(--secondary-soft-text-base); --text-muted: var(--secondary-soft-text-muted); --link: var(--secondary-soft-link); --link-hover: var(--secondary-soft-link-hover); --link-active: var(--secondary-soft-link-active); --border: var(--secondary-soft-border); --action-fill: var(--secondary-soft-action-fill); --action-fill-hover: var(--secondary-soft-action-fill-hover); --action-fill-active: var(--secondary-soft-action-fill-active); --action-text: var(--secondary-soft-action-text); --action-border: var(--secondary-soft-action-border); color: var(--secondary-soft-text-base); }
.active\:bg-secondary-soft:active { background-color: var(--secondary-soft); --bg-color: var(--secondary-soft); --text-heading: var(--secondary-soft-text-heading); --text-base: var(--secondary-soft-text-base); --text-muted: var(--secondary-soft-text-muted); --link: var(--secondary-soft-link); --link-hover: var(--secondary-soft-link-hover); --link-active: var(--secondary-soft-link-active); --border: var(--secondary-soft-border); --action-fill: var(--secondary-soft-action-fill); --action-fill-hover: var(--secondary-soft-action-fill-hover); --action-fill-active: var(--secondary-soft-action-fill-active); --action-text: var(--secondary-soft-action-text); --action-border: var(--secondary-soft-action-border); color: var(--secondary-soft-text-base); }
.surface-secondary-soft { background-color: var(--secondary-soft); --bg-color: var(--secondary-soft); --text-heading: var(--secondary-soft-text-heading); --text-base: var(--secondary-soft-text-base); --text-muted: var(--secondary-soft-text-muted); --link: var(--secondary-soft-link); --link-hover: var(--secondary-soft-link-hover); --link-active: var(--secondary-soft-link-active); --border: var(--secondary-soft-border); --action-fill: var(--secondary-soft-action-fill); --action-fill-hover: var(--secondary-soft-action-fill-hover); --action-fill-active: var(--secondary-soft-action-fill-active); --action-text: var(--secondary-soft-action-text); --action-border: var(--secondary-soft-action-border); color: var(--secondary-soft-text-base); }
.hover\:surface-secondary-soft:hover { background-color: var(--secondary-soft); --bg-color: var(--secondary-soft); --text-heading: var(--secondary-soft-text-heading); --text-base: var(--secondary-soft-text-base); --text-muted: var(--secondary-soft-text-muted); --link: var(--secondary-soft-link); --link-hover: var(--secondary-soft-link-hover); --link-active: var(--secondary-soft-link-active); --border: var(--secondary-soft-border); --action-fill: var(--secondary-soft-action-fill); --action-fill-hover: var(--secondary-soft-action-fill-hover); --action-fill-active: var(--secondary-soft-action-fill-active); --action-text: var(--secondary-soft-action-text); --action-border: var(--secondary-soft-action-border); color: var(--secondary-soft-text-base); }
.active\:surface-secondary-soft:active { background-color: var(--secondary-soft); --bg-color: var(--secondary-soft); --text-heading: var(--secondary-soft-text-heading); --text-base: var(--secondary-soft-text-base); --text-muted: var(--secondary-soft-text-muted); --link: var(--secondary-soft-link); --link-hover: var(--secondary-soft-link-hover); --link-active: var(--secondary-soft-link-active); --border: var(--secondary-soft-border); --action-fill: var(--secondary-soft-action-fill); --action-fill-hover: var(--secondary-soft-action-fill-hover); --action-fill-active: var(--secondary-soft-action-fill-active); --action-text: var(--secondary-soft-action-text); --action-border: var(--secondary-soft-action-border); color: var(--secondary-soft-text-base); }
.bg-secondary-soft\/10 { background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent); }
.hover\:bg-secondary-soft\/10:hover { background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent); }
.active\:bg-secondary-soft\/10:active { background-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 10%, transparent); }
.bg-secondary-soft\/30 { background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent); }
.hover\:bg-secondary-soft\/30:hover { background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent); }
.active\:bg-secondary-soft\/30:active { background-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 30%, transparent); }
.bg-secondary-soft\/50 { background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent); }
.hover\:bg-secondary-soft\/50:hover { background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent); }
.active\:bg-secondary-soft\/50:active { background-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 50%, transparent); }
.bg-secondary-soft\/70 { background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent); }
.hover\:bg-secondary-soft\/70:hover { background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent); }
.active\:bg-secondary-soft\/70:active { background-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 70%, transparent); }
.bg-secondary-soft\/90 { background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent); }
.hover\:bg-secondary-soft\/90:hover { background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent); }
.active\:bg-secondary-soft\/90:active { background-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-soft) 90%, transparent); }
.bg-secondary-stronger { background-color: var(--secondary-stronger); --bg-color: var(--secondary-stronger); --text-heading: var(--secondary-stronger-text-heading); --text-base: var(--secondary-stronger-text-base); --text-muted: var(--secondary-stronger-text-muted); --link: var(--secondary-stronger-link); --link-hover: var(--secondary-stronger-link-hover); --link-active: var(--secondary-stronger-link-active); --border: var(--secondary-stronger-border); --action-fill: var(--secondary-stronger-action-fill); --action-fill-hover: var(--secondary-stronger-action-fill-hover); --action-fill-active: var(--secondary-stronger-action-fill-active); --action-text: var(--secondary-stronger-action-text); --action-border: var(--secondary-stronger-action-border); color: var(--secondary-stronger-text-base); }
.hover\:bg-secondary-stronger:hover { background-color: var(--secondary-stronger); --bg-color: var(--secondary-stronger); --text-heading: var(--secondary-stronger-text-heading); --text-base: var(--secondary-stronger-text-base); --text-muted: var(--secondary-stronger-text-muted); --link: var(--secondary-stronger-link); --link-hover: var(--secondary-stronger-link-hover); --link-active: var(--secondary-stronger-link-active); --border: var(--secondary-stronger-border); --action-fill: var(--secondary-stronger-action-fill); --action-fill-hover: var(--secondary-stronger-action-fill-hover); --action-fill-active: var(--secondary-stronger-action-fill-active); --action-text: var(--secondary-stronger-action-text); --action-border: var(--secondary-stronger-action-border); color: var(--secondary-stronger-text-base); }
.active\:bg-secondary-stronger:active { background-color: var(--secondary-stronger); --bg-color: var(--secondary-stronger); --text-heading: var(--secondary-stronger-text-heading); --text-base: var(--secondary-stronger-text-base); --text-muted: var(--secondary-stronger-text-muted); --link: var(--secondary-stronger-link); --link-hover: var(--secondary-stronger-link-hover); --link-active: var(--secondary-stronger-link-active); --border: var(--secondary-stronger-border); --action-fill: var(--secondary-stronger-action-fill); --action-fill-hover: var(--secondary-stronger-action-fill-hover); --action-fill-active: var(--secondary-stronger-action-fill-active); --action-text: var(--secondary-stronger-action-text); --action-border: var(--secondary-stronger-action-border); color: var(--secondary-stronger-text-base); }
.surface-secondary-stronger { background-color: var(--secondary-stronger); --bg-color: var(--secondary-stronger); --text-heading: var(--secondary-stronger-text-heading); --text-base: var(--secondary-stronger-text-base); --text-muted: var(--secondary-stronger-text-muted); --link: var(--secondary-stronger-link); --link-hover: var(--secondary-stronger-link-hover); --link-active: var(--secondary-stronger-link-active); --border: var(--secondary-stronger-border); --action-fill: var(--secondary-stronger-action-fill); --action-fill-hover: var(--secondary-stronger-action-fill-hover); --action-fill-active: var(--secondary-stronger-action-fill-active); --action-text: var(--secondary-stronger-action-text); --action-border: var(--secondary-stronger-action-border); color: var(--secondary-stronger-text-base); }
.hover\:surface-secondary-stronger:hover { background-color: var(--secondary-stronger); --bg-color: var(--secondary-stronger); --text-heading: var(--secondary-stronger-text-heading); --text-base: var(--secondary-stronger-text-base); --text-muted: var(--secondary-stronger-text-muted); --link: var(--secondary-stronger-link); --link-hover: var(--secondary-stronger-link-hover); --link-active: var(--secondary-stronger-link-active); --border: var(--secondary-stronger-border); --action-fill: var(--secondary-stronger-action-fill); --action-fill-hover: var(--secondary-stronger-action-fill-hover); --action-fill-active: var(--secondary-stronger-action-fill-active); --action-text: var(--secondary-stronger-action-text); --action-border: var(--secondary-stronger-action-border); color: var(--secondary-stronger-text-base); }
.active\:surface-secondary-stronger:active { background-color: var(--secondary-stronger); --bg-color: var(--secondary-stronger); --text-heading: var(--secondary-stronger-text-heading); --text-base: var(--secondary-stronger-text-base); --text-muted: var(--secondary-stronger-text-muted); --link: var(--secondary-stronger-link); --link-hover: var(--secondary-stronger-link-hover); --link-active: var(--secondary-stronger-link-active); --border: var(--secondary-stronger-border); --action-fill: var(--secondary-stronger-action-fill); --action-fill-hover: var(--secondary-stronger-action-fill-hover); --action-fill-active: var(--secondary-stronger-action-fill-active); --action-text: var(--secondary-stronger-action-text); --action-border: var(--secondary-stronger-action-border); color: var(--secondary-stronger-text-base); }
.bg-secondary-stronger\/10 { background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent); }
.hover\:bg-secondary-stronger\/10:hover { background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent); }
.active\:bg-secondary-stronger\/10:active { background-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 10%, transparent); }
.bg-secondary-stronger\/30 { background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent); }
.hover\:bg-secondary-stronger\/30:hover { background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent); }
.active\:bg-secondary-stronger\/30:active { background-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 30%, transparent); }
.bg-secondary-stronger\/50 { background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent); }
.hover\:bg-secondary-stronger\/50:hover { background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent); }
.active\:bg-secondary-stronger\/50:active { background-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 50%, transparent); }
.bg-secondary-stronger\/70 { background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent); }
.hover\:bg-secondary-stronger\/70:hover { background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent); }
.active\:bg-secondary-stronger\/70:active { background-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 70%, transparent); }
.bg-secondary-stronger\/90 { background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent); }
.hover\:bg-secondary-stronger\/90:hover { background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent); }
.active\:bg-secondary-stronger\/90:active { background-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--secondary-stronger) 90%, transparent); }
.bg-neutral-weak { background-color: var(--neutral-weak); --bg-color: var(--neutral-weak); --text-heading: var(--neutral-weak-text-heading); --text-base: var(--neutral-weak-text-base); --text-muted: var(--neutral-weak-text-muted); --link: var(--neutral-weak-link); --link-hover: var(--neutral-weak-link-hover); --link-active: var(--neutral-weak-link-active); --border: var(--neutral-weak-border); --action-fill: var(--neutral-weak-action-fill); --action-fill-hover: var(--neutral-weak-action-fill-hover); --action-fill-active: var(--neutral-weak-action-fill-active); --action-text: var(--neutral-weak-action-text); --action-border: var(--neutral-weak-action-border); color: var(--neutral-weak-text-base); }
.hover\:bg-neutral-weak:hover { background-color: var(--neutral-weak); --bg-color: var(--neutral-weak); --text-heading: var(--neutral-weak-text-heading); --text-base: var(--neutral-weak-text-base); --text-muted: var(--neutral-weak-text-muted); --link: var(--neutral-weak-link); --link-hover: var(--neutral-weak-link-hover); --link-active: var(--neutral-weak-link-active); --border: var(--neutral-weak-border); --action-fill: var(--neutral-weak-action-fill); --action-fill-hover: var(--neutral-weak-action-fill-hover); --action-fill-active: var(--neutral-weak-action-fill-active); --action-text: var(--neutral-weak-action-text); --action-border: var(--neutral-weak-action-border); color: var(--neutral-weak-text-base); }
.active\:bg-neutral-weak:active { background-color: var(--neutral-weak); --bg-color: var(--neutral-weak); --text-heading: var(--neutral-weak-text-heading); --text-base: var(--neutral-weak-text-base); --text-muted: var(--neutral-weak-text-muted); --link: var(--neutral-weak-link); --link-hover: var(--neutral-weak-link-hover); --link-active: var(--neutral-weak-link-active); --border: var(--neutral-weak-border); --action-fill: var(--neutral-weak-action-fill); --action-fill-hover: var(--neutral-weak-action-fill-hover); --action-fill-active: var(--neutral-weak-action-fill-active); --action-text: var(--neutral-weak-action-text); --action-border: var(--neutral-weak-action-border); color: var(--neutral-weak-text-base); }
.surface-neutral-weak { background-color: var(--neutral-weak); --bg-color: var(--neutral-weak); --text-heading: var(--neutral-weak-text-heading); --text-base: var(--neutral-weak-text-base); --text-muted: var(--neutral-weak-text-muted); --link: var(--neutral-weak-link); --link-hover: var(--neutral-weak-link-hover); --link-active: var(--neutral-weak-link-active); --border: var(--neutral-weak-border); --action-fill: var(--neutral-weak-action-fill); --action-fill-hover: var(--neutral-weak-action-fill-hover); --action-fill-active: var(--neutral-weak-action-fill-active); --action-text: var(--neutral-weak-action-text); --action-border: var(--neutral-weak-action-border); color: var(--neutral-weak-text-base); }
.hover\:surface-neutral-weak:hover { background-color: var(--neutral-weak); --bg-color: var(--neutral-weak); --text-heading: var(--neutral-weak-text-heading); --text-base: var(--neutral-weak-text-base); --text-muted: var(--neutral-weak-text-muted); --link: var(--neutral-weak-link); --link-hover: var(--neutral-weak-link-hover); --link-active: var(--neutral-weak-link-active); --border: var(--neutral-weak-border); --action-fill: var(--neutral-weak-action-fill); --action-fill-hover: var(--neutral-weak-action-fill-hover); --action-fill-active: var(--neutral-weak-action-fill-active); --action-text: var(--neutral-weak-action-text); --action-border: var(--neutral-weak-action-border); color: var(--neutral-weak-text-base); }
.active\:surface-neutral-weak:active { background-color: var(--neutral-weak); --bg-color: var(--neutral-weak); --text-heading: var(--neutral-weak-text-heading); --text-base: var(--neutral-weak-text-base); --text-muted: var(--neutral-weak-text-muted); --link: var(--neutral-weak-link); --link-hover: var(--neutral-weak-link-hover); --link-active: var(--neutral-weak-link-active); --border: var(--neutral-weak-border); --action-fill: var(--neutral-weak-action-fill); --action-fill-hover: var(--neutral-weak-action-fill-hover); --action-fill-active: var(--neutral-weak-action-fill-active); --action-text: var(--neutral-weak-action-text); --action-border: var(--neutral-weak-action-border); color: var(--neutral-weak-text-base); }
.bg-neutral-weak\/10 { background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent); }
.hover\:bg-neutral-weak\/10:hover { background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent); }
.active\:bg-neutral-weak\/10:active { background-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 10%, transparent); }
.bg-neutral-weak\/30 { background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent); }
.hover\:bg-neutral-weak\/30:hover { background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent); }
.active\:bg-neutral-weak\/30:active { background-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 30%, transparent); }
.bg-neutral-weak\/50 { background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent); }
.hover\:bg-neutral-weak\/50:hover { background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent); }
.active\:bg-neutral-weak\/50:active { background-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 50%, transparent); }
.bg-neutral-weak\/70 { background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent); }
.hover\:bg-neutral-weak\/70:hover { background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent); }
.active\:bg-neutral-weak\/70:active { background-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 70%, transparent); }
.bg-neutral-weak\/90 { background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent); }
.hover\:bg-neutral-weak\/90:hover { background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent); }
.active\:bg-neutral-weak\/90:active { background-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-weak) 90%, transparent); }
.bg-neutral-soft { background-color: var(--neutral-soft); --bg-color: var(--neutral-soft); --text-heading: var(--neutral-soft-text-heading); --text-base: var(--neutral-soft-text-base); --text-muted: var(--neutral-soft-text-muted); --link: var(--neutral-soft-link); --link-hover: var(--neutral-soft-link-hover); --link-active: var(--neutral-soft-link-active); --border: var(--neutral-soft-border); --action-fill: var(--neutral-soft-action-fill); --action-fill-hover: var(--neutral-soft-action-fill-hover); --action-fill-active: var(--neutral-soft-action-fill-active); --action-text: var(--neutral-soft-action-text); --action-border: var(--neutral-soft-action-border); color: var(--neutral-soft-text-base); }
.hover\:bg-neutral-soft:hover { background-color: var(--neutral-soft); --bg-color: var(--neutral-soft); --text-heading: var(--neutral-soft-text-heading); --text-base: var(--neutral-soft-text-base); --text-muted: var(--neutral-soft-text-muted); --link: var(--neutral-soft-link); --link-hover: var(--neutral-soft-link-hover); --link-active: var(--neutral-soft-link-active); --border: var(--neutral-soft-border); --action-fill: var(--neutral-soft-action-fill); --action-fill-hover: var(--neutral-soft-action-fill-hover); --action-fill-active: var(--neutral-soft-action-fill-active); --action-text: var(--neutral-soft-action-text); --action-border: var(--neutral-soft-action-border); color: var(--neutral-soft-text-base); }
.active\:bg-neutral-soft:active { background-color: var(--neutral-soft); --bg-color: var(--neutral-soft); --text-heading: var(--neutral-soft-text-heading); --text-base: var(--neutral-soft-text-base); --text-muted: var(--neutral-soft-text-muted); --link: var(--neutral-soft-link); --link-hover: var(--neutral-soft-link-hover); --link-active: var(--neutral-soft-link-active); --border: var(--neutral-soft-border); --action-fill: var(--neutral-soft-action-fill); --action-fill-hover: var(--neutral-soft-action-fill-hover); --action-fill-active: var(--neutral-soft-action-fill-active); --action-text: var(--neutral-soft-action-text); --action-border: var(--neutral-soft-action-border); color: var(--neutral-soft-text-base); }
.surface-neutral-soft { background-color: var(--neutral-soft); --bg-color: var(--neutral-soft); --text-heading: var(--neutral-soft-text-heading); --text-base: var(--neutral-soft-text-base); --text-muted: var(--neutral-soft-text-muted); --link: var(--neutral-soft-link); --link-hover: var(--neutral-soft-link-hover); --link-active: var(--neutral-soft-link-active); --border: var(--neutral-soft-border); --action-fill: var(--neutral-soft-action-fill); --action-fill-hover: var(--neutral-soft-action-fill-hover); --action-fill-active: var(--neutral-soft-action-fill-active); --action-text: var(--neutral-soft-action-text); --action-border: var(--neutral-soft-action-border); color: var(--neutral-soft-text-base); }
.hover\:surface-neutral-soft:hover { background-color: var(--neutral-soft); --bg-color: var(--neutral-soft); --text-heading: var(--neutral-soft-text-heading); --text-base: var(--neutral-soft-text-base); --text-muted: var(--neutral-soft-text-muted); --link: var(--neutral-soft-link); --link-hover: var(--neutral-soft-link-hover); --link-active: var(--neutral-soft-link-active); --border: var(--neutral-soft-border); --action-fill: var(--neutral-soft-action-fill); --action-fill-hover: var(--neutral-soft-action-fill-hover); --action-fill-active: var(--neutral-soft-action-fill-active); --action-text: var(--neutral-soft-action-text); --action-border: var(--neutral-soft-action-border); color: var(--neutral-soft-text-base); }
.active\:surface-neutral-soft:active { background-color: var(--neutral-soft); --bg-color: var(--neutral-soft); --text-heading: var(--neutral-soft-text-heading); --text-base: var(--neutral-soft-text-base); --text-muted: var(--neutral-soft-text-muted); --link: var(--neutral-soft-link); --link-hover: var(--neutral-soft-link-hover); --link-active: var(--neutral-soft-link-active); --border: var(--neutral-soft-border); --action-fill: var(--neutral-soft-action-fill); --action-fill-hover: var(--neutral-soft-action-fill-hover); --action-fill-active: var(--neutral-soft-action-fill-active); --action-text: var(--neutral-soft-action-text); --action-border: var(--neutral-soft-action-border); color: var(--neutral-soft-text-base); }
.bg-neutral-soft\/10 { background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent); }
.hover\:bg-neutral-soft\/10:hover { background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent); }
.active\:bg-neutral-soft\/10:active { background-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 10%, transparent); }
.bg-neutral-soft\/30 { background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent); }
.hover\:bg-neutral-soft\/30:hover { background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent); }
.active\:bg-neutral-soft\/30:active { background-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 30%, transparent); }
.bg-neutral-soft\/50 { background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent); }
.hover\:bg-neutral-soft\/50:hover { background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent); }
.active\:bg-neutral-soft\/50:active { background-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 50%, transparent); }
.bg-neutral-soft\/70 { background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent); }
.hover\:bg-neutral-soft\/70:hover { background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent); }
.active\:bg-neutral-soft\/70:active { background-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 70%, transparent); }
.bg-neutral-soft\/90 { background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent); }
.hover\:bg-neutral-soft\/90:hover { background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent); }
.active\:bg-neutral-soft\/90:active { background-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-soft) 90%, transparent); }
.bg-neutral-base { background-color: var(--neutral-base); --bg-color: var(--neutral-base); --text-heading: var(--neutral-base-text-heading); --text-base: var(--neutral-base-text-base); --text-muted: var(--neutral-base-text-muted); --link: var(--neutral-base-link); --link-hover: var(--neutral-base-link-hover); --link-active: var(--neutral-base-link-active); --border: var(--neutral-base-border); --action-fill: var(--neutral-base-action-fill); --action-fill-hover: var(--neutral-base-action-fill-hover); --action-fill-active: var(--neutral-base-action-fill-active); --action-text: var(--neutral-base-action-text); --action-border: var(--neutral-base-action-border); color: var(--neutral-base-text-base); }
.hover\:bg-neutral-base:hover { background-color: var(--neutral-base); --bg-color: var(--neutral-base); --text-heading: var(--neutral-base-text-heading); --text-base: var(--neutral-base-text-base); --text-muted: var(--neutral-base-text-muted); --link: var(--neutral-base-link); --link-hover: var(--neutral-base-link-hover); --link-active: var(--neutral-base-link-active); --border: var(--neutral-base-border); --action-fill: var(--neutral-base-action-fill); --action-fill-hover: var(--neutral-base-action-fill-hover); --action-fill-active: var(--neutral-base-action-fill-active); --action-text: var(--neutral-base-action-text); --action-border: var(--neutral-base-action-border); color: var(--neutral-base-text-base); }
.active\:bg-neutral-base:active { background-color: var(--neutral-base); --bg-color: var(--neutral-base); --text-heading: var(--neutral-base-text-heading); --text-base: var(--neutral-base-text-base); --text-muted: var(--neutral-base-text-muted); --link: var(--neutral-base-link); --link-hover: var(--neutral-base-link-hover); --link-active: var(--neutral-base-link-active); --border: var(--neutral-base-border); --action-fill: var(--neutral-base-action-fill); --action-fill-hover: var(--neutral-base-action-fill-hover); --action-fill-active: var(--neutral-base-action-fill-active); --action-text: var(--neutral-base-action-text); --action-border: var(--neutral-base-action-border); color: var(--neutral-base-text-base); }
.surface-neutral-base { background-color: var(--neutral-base); --bg-color: var(--neutral-base); --text-heading: var(--neutral-base-text-heading); --text-base: var(--neutral-base-text-base); --text-muted: var(--neutral-base-text-muted); --link: var(--neutral-base-link); --link-hover: var(--neutral-base-link-hover); --link-active: var(--neutral-base-link-active); --border: var(--neutral-base-border); --action-fill: var(--neutral-base-action-fill); --action-fill-hover: var(--neutral-base-action-fill-hover); --action-fill-active: var(--neutral-base-action-fill-active); --action-text: var(--neutral-base-action-text); --action-border: var(--neutral-base-action-border); color: var(--neutral-base-text-base); }
.hover\:surface-neutral-base:hover { background-color: var(--neutral-base); --bg-color: var(--neutral-base); --text-heading: var(--neutral-base-text-heading); --text-base: var(--neutral-base-text-base); --text-muted: var(--neutral-base-text-muted); --link: var(--neutral-base-link); --link-hover: var(--neutral-base-link-hover); --link-active: var(--neutral-base-link-active); --border: var(--neutral-base-border); --action-fill: var(--neutral-base-action-fill); --action-fill-hover: var(--neutral-base-action-fill-hover); --action-fill-active: var(--neutral-base-action-fill-active); --action-text: var(--neutral-base-action-text); --action-border: var(--neutral-base-action-border); color: var(--neutral-base-text-base); }
.active\:surface-neutral-base:active { background-color: var(--neutral-base); --bg-color: var(--neutral-base); --text-heading: var(--neutral-base-text-heading); --text-base: var(--neutral-base-text-base); --text-muted: var(--neutral-base-text-muted); --link: var(--neutral-base-link); --link-hover: var(--neutral-base-link-hover); --link-active: var(--neutral-base-link-active); --border: var(--neutral-base-border); --action-fill: var(--neutral-base-action-fill); --action-fill-hover: var(--neutral-base-action-fill-hover); --action-fill-active: var(--neutral-base-action-fill-active); --action-text: var(--neutral-base-action-text); --action-border: var(--neutral-base-action-border); color: var(--neutral-base-text-base); }
.bg-neutral-base\/10 { background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent); }
.hover\:bg-neutral-base\/10:hover { background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent); }
.active\:bg-neutral-base\/10:active { background-color: color-mix(in srgb, var(--neutral-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 10%, transparent); }
.bg-neutral-base\/30 { background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent); }
.hover\:bg-neutral-base\/30:hover { background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent); }
.active\:bg-neutral-base\/30:active { background-color: color-mix(in srgb, var(--neutral-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 30%, transparent); }
.bg-neutral-base\/50 { background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent); }
.hover\:bg-neutral-base\/50:hover { background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent); }
.active\:bg-neutral-base\/50:active { background-color: color-mix(in srgb, var(--neutral-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 50%, transparent); }
.bg-neutral-base\/70 { background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent); }
.hover\:bg-neutral-base\/70:hover { background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent); }
.active\:bg-neutral-base\/70:active { background-color: color-mix(in srgb, var(--neutral-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 70%, transparent); }
.bg-neutral-base\/90 { background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent); }
.hover\:bg-neutral-base\/90:hover { background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent); }
.active\:bg-neutral-base\/90:active { background-color: color-mix(in srgb, var(--neutral-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-base) 90%, transparent); }
.bg-neutral-strong { background-color: var(--neutral-strong); --bg-color: var(--neutral-strong); --text-heading: var(--neutral-strong-text-heading); --text-base: var(--neutral-strong-text-base); --text-muted: var(--neutral-strong-text-muted); --link: var(--neutral-strong-link); --link-hover: var(--neutral-strong-link-hover); --link-active: var(--neutral-strong-link-active); --border: var(--neutral-strong-border); --action-fill: var(--neutral-strong-action-fill); --action-fill-hover: var(--neutral-strong-action-fill-hover); --action-fill-active: var(--neutral-strong-action-fill-active); --action-text: var(--neutral-strong-action-text); --action-border: var(--neutral-strong-action-border); color: var(--neutral-strong-text-base); }
.hover\:bg-neutral-strong:hover { background-color: var(--neutral-strong); --bg-color: var(--neutral-strong); --text-heading: var(--neutral-strong-text-heading); --text-base: var(--neutral-strong-text-base); --text-muted: var(--neutral-strong-text-muted); --link: var(--neutral-strong-link); --link-hover: var(--neutral-strong-link-hover); --link-active: var(--neutral-strong-link-active); --border: var(--neutral-strong-border); --action-fill: var(--neutral-strong-action-fill); --action-fill-hover: var(--neutral-strong-action-fill-hover); --action-fill-active: var(--neutral-strong-action-fill-active); --action-text: var(--neutral-strong-action-text); --action-border: var(--neutral-strong-action-border); color: var(--neutral-strong-text-base); }
.active\:bg-neutral-strong:active { background-color: var(--neutral-strong); --bg-color: var(--neutral-strong); --text-heading: var(--neutral-strong-text-heading); --text-base: var(--neutral-strong-text-base); --text-muted: var(--neutral-strong-text-muted); --link: var(--neutral-strong-link); --link-hover: var(--neutral-strong-link-hover); --link-active: var(--neutral-strong-link-active); --border: var(--neutral-strong-border); --action-fill: var(--neutral-strong-action-fill); --action-fill-hover: var(--neutral-strong-action-fill-hover); --action-fill-active: var(--neutral-strong-action-fill-active); --action-text: var(--neutral-strong-action-text); --action-border: var(--neutral-strong-action-border); color: var(--neutral-strong-text-base); }
.surface-neutral-strong { background-color: var(--neutral-strong); --bg-color: var(--neutral-strong); --text-heading: var(--neutral-strong-text-heading); --text-base: var(--neutral-strong-text-base); --text-muted: var(--neutral-strong-text-muted); --link: var(--neutral-strong-link); --link-hover: var(--neutral-strong-link-hover); --link-active: var(--neutral-strong-link-active); --border: var(--neutral-strong-border); --action-fill: var(--neutral-strong-action-fill); --action-fill-hover: var(--neutral-strong-action-fill-hover); --action-fill-active: var(--neutral-strong-action-fill-active); --action-text: var(--neutral-strong-action-text); --action-border: var(--neutral-strong-action-border); color: var(--neutral-strong-text-base); }
.hover\:surface-neutral-strong:hover { background-color: var(--neutral-strong); --bg-color: var(--neutral-strong); --text-heading: var(--neutral-strong-text-heading); --text-base: var(--neutral-strong-text-base); --text-muted: var(--neutral-strong-text-muted); --link: var(--neutral-strong-link); --link-hover: var(--neutral-strong-link-hover); --link-active: var(--neutral-strong-link-active); --border: var(--neutral-strong-border); --action-fill: var(--neutral-strong-action-fill); --action-fill-hover: var(--neutral-strong-action-fill-hover); --action-fill-active: var(--neutral-strong-action-fill-active); --action-text: var(--neutral-strong-action-text); --action-border: var(--neutral-strong-action-border); color: var(--neutral-strong-text-base); }
.active\:surface-neutral-strong:active { background-color: var(--neutral-strong); --bg-color: var(--neutral-strong); --text-heading: var(--neutral-strong-text-heading); --text-base: var(--neutral-strong-text-base); --text-muted: var(--neutral-strong-text-muted); --link: var(--neutral-strong-link); --link-hover: var(--neutral-strong-link-hover); --link-active: var(--neutral-strong-link-active); --border: var(--neutral-strong-border); --action-fill: var(--neutral-strong-action-fill); --action-fill-hover: var(--neutral-strong-action-fill-hover); --action-fill-active: var(--neutral-strong-action-fill-active); --action-text: var(--neutral-strong-action-text); --action-border: var(--neutral-strong-action-border); color: var(--neutral-strong-text-base); }
.bg-neutral-strong\/10 { background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent); }
.hover\:bg-neutral-strong\/10:hover { background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent); }
.active\:bg-neutral-strong\/10:active { background-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 10%, transparent); }
.bg-neutral-strong\/30 { background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent); }
.hover\:bg-neutral-strong\/30:hover { background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent); }
.active\:bg-neutral-strong\/30:active { background-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 30%, transparent); }
.bg-neutral-strong\/50 { background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent); }
.hover\:bg-neutral-strong\/50:hover { background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent); }
.active\:bg-neutral-strong\/50:active { background-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 50%, transparent); }
.bg-neutral-strong\/70 { background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent); }
.hover\:bg-neutral-strong\/70:hover { background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent); }
.active\:bg-neutral-strong\/70:active { background-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 70%, transparent); }
.bg-neutral-strong\/90 { background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent); }
.hover\:bg-neutral-strong\/90:hover { background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent); }
.active\:bg-neutral-strong\/90:active { background-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-strong) 90%, transparent); }
.bg-neutral-stronger { background-color: var(--neutral-stronger); --bg-color: var(--neutral-stronger); --text-heading: var(--neutral-stronger-text-heading); --text-base: var(--neutral-stronger-text-base); --text-muted: var(--neutral-stronger-text-muted); --link: var(--neutral-stronger-link); --link-hover: var(--neutral-stronger-link-hover); --link-active: var(--neutral-stronger-link-active); --border: var(--neutral-stronger-border); --action-fill: var(--neutral-stronger-action-fill); --action-fill-hover: var(--neutral-stronger-action-fill-hover); --action-fill-active: var(--neutral-stronger-action-fill-active); --action-text: var(--neutral-stronger-action-text); --action-border: var(--neutral-stronger-action-border); color: var(--neutral-stronger-text-base); }
.hover\:bg-neutral-stronger:hover { background-color: var(--neutral-stronger); --bg-color: var(--neutral-stronger); --text-heading: var(--neutral-stronger-text-heading); --text-base: var(--neutral-stronger-text-base); --text-muted: var(--neutral-stronger-text-muted); --link: var(--neutral-stronger-link); --link-hover: var(--neutral-stronger-link-hover); --link-active: var(--neutral-stronger-link-active); --border: var(--neutral-stronger-border); --action-fill: var(--neutral-stronger-action-fill); --action-fill-hover: var(--neutral-stronger-action-fill-hover); --action-fill-active: var(--neutral-stronger-action-fill-active); --action-text: var(--neutral-stronger-action-text); --action-border: var(--neutral-stronger-action-border); color: var(--neutral-stronger-text-base); }
.active\:bg-neutral-stronger:active { background-color: var(--neutral-stronger); --bg-color: var(--neutral-stronger); --text-heading: var(--neutral-stronger-text-heading); --text-base: var(--neutral-stronger-text-base); --text-muted: var(--neutral-stronger-text-muted); --link: var(--neutral-stronger-link); --link-hover: var(--neutral-stronger-link-hover); --link-active: var(--neutral-stronger-link-active); --border: var(--neutral-stronger-border); --action-fill: var(--neutral-stronger-action-fill); --action-fill-hover: var(--neutral-stronger-action-fill-hover); --action-fill-active: var(--neutral-stronger-action-fill-active); --action-text: var(--neutral-stronger-action-text); --action-border: var(--neutral-stronger-action-border); color: var(--neutral-stronger-text-base); }
.surface-neutral-stronger { background-color: var(--neutral-stronger); --bg-color: var(--neutral-stronger); --text-heading: var(--neutral-stronger-text-heading); --text-base: var(--neutral-stronger-text-base); --text-muted: var(--neutral-stronger-text-muted); --link: var(--neutral-stronger-link); --link-hover: var(--neutral-stronger-link-hover); --link-active: var(--neutral-stronger-link-active); --border: var(--neutral-stronger-border); --action-fill: var(--neutral-stronger-action-fill); --action-fill-hover: var(--neutral-stronger-action-fill-hover); --action-fill-active: var(--neutral-stronger-action-fill-active); --action-text: var(--neutral-stronger-action-text); --action-border: var(--neutral-stronger-action-border); color: var(--neutral-stronger-text-base); }
.hover\:surface-neutral-stronger:hover { background-color: var(--neutral-stronger); --bg-color: var(--neutral-stronger); --text-heading: var(--neutral-stronger-text-heading); --text-base: var(--neutral-stronger-text-base); --text-muted: var(--neutral-stronger-text-muted); --link: var(--neutral-stronger-link); --link-hover: var(--neutral-stronger-link-hover); --link-active: var(--neutral-stronger-link-active); --border: var(--neutral-stronger-border); --action-fill: var(--neutral-stronger-action-fill); --action-fill-hover: var(--neutral-stronger-action-fill-hover); --action-fill-active: var(--neutral-stronger-action-fill-active); --action-text: var(--neutral-stronger-action-text); --action-border: var(--neutral-stronger-action-border); color: var(--neutral-stronger-text-base); }
.active\:surface-neutral-stronger:active { background-color: var(--neutral-stronger); --bg-color: var(--neutral-stronger); --text-heading: var(--neutral-stronger-text-heading); --text-base: var(--neutral-stronger-text-base); --text-muted: var(--neutral-stronger-text-muted); --link: var(--neutral-stronger-link); --link-hover: var(--neutral-stronger-link-hover); --link-active: var(--neutral-stronger-link-active); --border: var(--neutral-stronger-border); --action-fill: var(--neutral-stronger-action-fill); --action-fill-hover: var(--neutral-stronger-action-fill-hover); --action-fill-active: var(--neutral-stronger-action-fill-active); --action-text: var(--neutral-stronger-action-text); --action-border: var(--neutral-stronger-action-border); color: var(--neutral-stronger-text-base); }
.bg-neutral-stronger\/10 { background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent); }
.hover\:bg-neutral-stronger\/10:hover { background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent); }
.active\:bg-neutral-stronger\/10:active { background-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 10%, transparent); }
.bg-neutral-stronger\/30 { background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent); }
.hover\:bg-neutral-stronger\/30:hover { background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent); }
.active\:bg-neutral-stronger\/30:active { background-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 30%, transparent); }
.bg-neutral-stronger\/50 { background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent); }
.hover\:bg-neutral-stronger\/50:hover { background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent); }
.active\:bg-neutral-stronger\/50:active { background-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 50%, transparent); }
.bg-neutral-stronger\/70 { background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent); }
.hover\:bg-neutral-stronger\/70:hover { background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent); }
.active\:bg-neutral-stronger\/70:active { background-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 70%, transparent); }
.bg-neutral-stronger\/90 { background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent); }
.hover\:bg-neutral-stronger\/90:hover { background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent); }
.active\:bg-neutral-stronger\/90:active { background-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--neutral-stronger) 90%, transparent); }
.bg-success-weak { background-color: var(--success-weak); --bg-color: var(--success-weak); --text-heading: var(--success-weak-text-heading); --text-base: var(--success-weak-text-base); --text-muted: var(--success-weak-text-muted); --link: var(--success-weak-link); --link-hover: var(--success-weak-link-hover); --link-active: var(--success-weak-link-active); --border: var(--success-weak-border); --action-fill: var(--success-weak-action-fill); --action-fill-hover: var(--success-weak-action-fill-hover); --action-fill-active: var(--success-weak-action-fill-active); --action-text: var(--success-weak-action-text); --action-border: var(--success-weak-action-border); color: var(--success-weak-text-base); }
.hover\:bg-success-weak:hover { background-color: var(--success-weak); --bg-color: var(--success-weak); --text-heading: var(--success-weak-text-heading); --text-base: var(--success-weak-text-base); --text-muted: var(--success-weak-text-muted); --link: var(--success-weak-link); --link-hover: var(--success-weak-link-hover); --link-active: var(--success-weak-link-active); --border: var(--success-weak-border); --action-fill: var(--success-weak-action-fill); --action-fill-hover: var(--success-weak-action-fill-hover); --action-fill-active: var(--success-weak-action-fill-active); --action-text: var(--success-weak-action-text); --action-border: var(--success-weak-action-border); color: var(--success-weak-text-base); }
.active\:bg-success-weak:active { background-color: var(--success-weak); --bg-color: var(--success-weak); --text-heading: var(--success-weak-text-heading); --text-base: var(--success-weak-text-base); --text-muted: var(--success-weak-text-muted); --link: var(--success-weak-link); --link-hover: var(--success-weak-link-hover); --link-active: var(--success-weak-link-active); --border: var(--success-weak-border); --action-fill: var(--success-weak-action-fill); --action-fill-hover: var(--success-weak-action-fill-hover); --action-fill-active: var(--success-weak-action-fill-active); --action-text: var(--success-weak-action-text); --action-border: var(--success-weak-action-border); color: var(--success-weak-text-base); }
.surface-success-weak { background-color: var(--success-weak); --bg-color: var(--success-weak); --text-heading: var(--success-weak-text-heading); --text-base: var(--success-weak-text-base); --text-muted: var(--success-weak-text-muted); --link: var(--success-weak-link); --link-hover: var(--success-weak-link-hover); --link-active: var(--success-weak-link-active); --border: var(--success-weak-border); --action-fill: var(--success-weak-action-fill); --action-fill-hover: var(--success-weak-action-fill-hover); --action-fill-active: var(--success-weak-action-fill-active); --action-text: var(--success-weak-action-text); --action-border: var(--success-weak-action-border); color: var(--success-weak-text-base); }
.hover\:surface-success-weak:hover { background-color: var(--success-weak); --bg-color: var(--success-weak); --text-heading: var(--success-weak-text-heading); --text-base: var(--success-weak-text-base); --text-muted: var(--success-weak-text-muted); --link: var(--success-weak-link); --link-hover: var(--success-weak-link-hover); --link-active: var(--success-weak-link-active); --border: var(--success-weak-border); --action-fill: var(--success-weak-action-fill); --action-fill-hover: var(--success-weak-action-fill-hover); --action-fill-active: var(--success-weak-action-fill-active); --action-text: var(--success-weak-action-text); --action-border: var(--success-weak-action-border); color: var(--success-weak-text-base); }
.active\:surface-success-weak:active { background-color: var(--success-weak); --bg-color: var(--success-weak); --text-heading: var(--success-weak-text-heading); --text-base: var(--success-weak-text-base); --text-muted: var(--success-weak-text-muted); --link: var(--success-weak-link); --link-hover: var(--success-weak-link-hover); --link-active: var(--success-weak-link-active); --border: var(--success-weak-border); --action-fill: var(--success-weak-action-fill); --action-fill-hover: var(--success-weak-action-fill-hover); --action-fill-active: var(--success-weak-action-fill-active); --action-text: var(--success-weak-action-text); --action-border: var(--success-weak-action-border); color: var(--success-weak-text-base); }
.bg-success-weak\/10 { background-color: color-mix(in srgb, var(--success-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent); }
.hover\:bg-success-weak\/10:hover { background-color: color-mix(in srgb, var(--success-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent); }
.active\:bg-success-weak\/10:active { background-color: color-mix(in srgb, var(--success-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 10%, transparent); }
.bg-success-weak\/30 { background-color: color-mix(in srgb, var(--success-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent); }
.hover\:bg-success-weak\/30:hover { background-color: color-mix(in srgb, var(--success-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent); }
.active\:bg-success-weak\/30:active { background-color: color-mix(in srgb, var(--success-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 30%, transparent); }
.bg-success-weak\/50 { background-color: color-mix(in srgb, var(--success-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent); }
.hover\:bg-success-weak\/50:hover { background-color: color-mix(in srgb, var(--success-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent); }
.active\:bg-success-weak\/50:active { background-color: color-mix(in srgb, var(--success-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 50%, transparent); }
.bg-success-weak\/70 { background-color: color-mix(in srgb, var(--success-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent); }
.hover\:bg-success-weak\/70:hover { background-color: color-mix(in srgb, var(--success-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent); }
.active\:bg-success-weak\/70:active { background-color: color-mix(in srgb, var(--success-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 70%, transparent); }
.bg-success-weak\/90 { background-color: color-mix(in srgb, var(--success-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent); }
.hover\:bg-success-weak\/90:hover { background-color: color-mix(in srgb, var(--success-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent); }
.active\:bg-success-weak\/90:active { background-color: color-mix(in srgb, var(--success-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-weak) 90%, transparent); }
.bg-success-base { background-color: var(--success-base); --bg-color: var(--success-base); --text-heading: var(--success-base-text-heading); --text-base: var(--success-base-text-base); --text-muted: var(--success-base-text-muted); --link: var(--success-base-link); --link-hover: var(--success-base-link-hover); --link-active: var(--success-base-link-active); --border: var(--success-base-border); --action-fill: var(--success-base-action-fill); --action-fill-hover: var(--success-base-action-fill-hover); --action-fill-active: var(--success-base-action-fill-active); --action-text: var(--success-base-action-text); --action-border: var(--success-base-action-border); color: var(--success-base-text-base); }
.hover\:bg-success-base:hover { background-color: var(--success-base); --bg-color: var(--success-base); --text-heading: var(--success-base-text-heading); --text-base: var(--success-base-text-base); --text-muted: var(--success-base-text-muted); --link: var(--success-base-link); --link-hover: var(--success-base-link-hover); --link-active: var(--success-base-link-active); --border: var(--success-base-border); --action-fill: var(--success-base-action-fill); --action-fill-hover: var(--success-base-action-fill-hover); --action-fill-active: var(--success-base-action-fill-active); --action-text: var(--success-base-action-text); --action-border: var(--success-base-action-border); color: var(--success-base-text-base); }
.active\:bg-success-base:active { background-color: var(--success-base); --bg-color: var(--success-base); --text-heading: var(--success-base-text-heading); --text-base: var(--success-base-text-base); --text-muted: var(--success-base-text-muted); --link: var(--success-base-link); --link-hover: var(--success-base-link-hover); --link-active: var(--success-base-link-active); --border: var(--success-base-border); --action-fill: var(--success-base-action-fill); --action-fill-hover: var(--success-base-action-fill-hover); --action-fill-active: var(--success-base-action-fill-active); --action-text: var(--success-base-action-text); --action-border: var(--success-base-action-border); color: var(--success-base-text-base); }
.surface-success-base { background-color: var(--success-base); --bg-color: var(--success-base); --text-heading: var(--success-base-text-heading); --text-base: var(--success-base-text-base); --text-muted: var(--success-base-text-muted); --link: var(--success-base-link); --link-hover: var(--success-base-link-hover); --link-active: var(--success-base-link-active); --border: var(--success-base-border); --action-fill: var(--success-base-action-fill); --action-fill-hover: var(--success-base-action-fill-hover); --action-fill-active: var(--success-base-action-fill-active); --action-text: var(--success-base-action-text); --action-border: var(--success-base-action-border); color: var(--success-base-text-base); }
.hover\:surface-success-base:hover { background-color: var(--success-base); --bg-color: var(--success-base); --text-heading: var(--success-base-text-heading); --text-base: var(--success-base-text-base); --text-muted: var(--success-base-text-muted); --link: var(--success-base-link); --link-hover: var(--success-base-link-hover); --link-active: var(--success-base-link-active); --border: var(--success-base-border); --action-fill: var(--success-base-action-fill); --action-fill-hover: var(--success-base-action-fill-hover); --action-fill-active: var(--success-base-action-fill-active); --action-text: var(--success-base-action-text); --action-border: var(--success-base-action-border); color: var(--success-base-text-base); }
.active\:surface-success-base:active { background-color: var(--success-base); --bg-color: var(--success-base); --text-heading: var(--success-base-text-heading); --text-base: var(--success-base-text-base); --text-muted: var(--success-base-text-muted); --link: var(--success-base-link); --link-hover: var(--success-base-link-hover); --link-active: var(--success-base-link-active); --border: var(--success-base-border); --action-fill: var(--success-base-action-fill); --action-fill-hover: var(--success-base-action-fill-hover); --action-fill-active: var(--success-base-action-fill-active); --action-text: var(--success-base-action-text); --action-border: var(--success-base-action-border); color: var(--success-base-text-base); }
.bg-success-base\/10 { background-color: color-mix(in srgb, var(--success-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent); }
.hover\:bg-success-base\/10:hover { background-color: color-mix(in srgb, var(--success-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent); }
.active\:bg-success-base\/10:active { background-color: color-mix(in srgb, var(--success-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 10%, transparent); }
.bg-success-base\/30 { background-color: color-mix(in srgb, var(--success-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent); }
.hover\:bg-success-base\/30:hover { background-color: color-mix(in srgb, var(--success-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent); }
.active\:bg-success-base\/30:active { background-color: color-mix(in srgb, var(--success-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 30%, transparent); }
.bg-success-base\/50 { background-color: color-mix(in srgb, var(--success-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent); }
.hover\:bg-success-base\/50:hover { background-color: color-mix(in srgb, var(--success-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent); }
.active\:bg-success-base\/50:active { background-color: color-mix(in srgb, var(--success-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 50%, transparent); }
.bg-success-base\/70 { background-color: color-mix(in srgb, var(--success-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent); }
.hover\:bg-success-base\/70:hover { background-color: color-mix(in srgb, var(--success-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent); }
.active\:bg-success-base\/70:active { background-color: color-mix(in srgb, var(--success-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 70%, transparent); }
.bg-success-base\/90 { background-color: color-mix(in srgb, var(--success-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent); }
.hover\:bg-success-base\/90:hover { background-color: color-mix(in srgb, var(--success-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent); }
.active\:bg-success-base\/90:active { background-color: color-mix(in srgb, var(--success-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-base) 90%, transparent); }
.bg-success-strong { background-color: var(--success-strong); --bg-color: var(--success-strong); --text-heading: var(--success-strong-text-heading); --text-base: var(--success-strong-text-base); --text-muted: var(--success-strong-text-muted); --link: var(--success-strong-link); --link-hover: var(--success-strong-link-hover); --link-active: var(--success-strong-link-active); --border: var(--success-strong-border); --action-fill: var(--success-strong-action-fill); --action-fill-hover: var(--success-strong-action-fill-hover); --action-fill-active: var(--success-strong-action-fill-active); --action-text: var(--success-strong-action-text); --action-border: var(--success-strong-action-border); color: var(--success-strong-text-base); }
.hover\:bg-success-strong:hover { background-color: var(--success-strong); --bg-color: var(--success-strong); --text-heading: var(--success-strong-text-heading); --text-base: var(--success-strong-text-base); --text-muted: var(--success-strong-text-muted); --link: var(--success-strong-link); --link-hover: var(--success-strong-link-hover); --link-active: var(--success-strong-link-active); --border: var(--success-strong-border); --action-fill: var(--success-strong-action-fill); --action-fill-hover: var(--success-strong-action-fill-hover); --action-fill-active: var(--success-strong-action-fill-active); --action-text: var(--success-strong-action-text); --action-border: var(--success-strong-action-border); color: var(--success-strong-text-base); }
.active\:bg-success-strong:active { background-color: var(--success-strong); --bg-color: var(--success-strong); --text-heading: var(--success-strong-text-heading); --text-base: var(--success-strong-text-base); --text-muted: var(--success-strong-text-muted); --link: var(--success-strong-link); --link-hover: var(--success-strong-link-hover); --link-active: var(--success-strong-link-active); --border: var(--success-strong-border); --action-fill: var(--success-strong-action-fill); --action-fill-hover: var(--success-strong-action-fill-hover); --action-fill-active: var(--success-strong-action-fill-active); --action-text: var(--success-strong-action-text); --action-border: var(--success-strong-action-border); color: var(--success-strong-text-base); }
.surface-success-strong { background-color: var(--success-strong); --bg-color: var(--success-strong); --text-heading: var(--success-strong-text-heading); --text-base: var(--success-strong-text-base); --text-muted: var(--success-strong-text-muted); --link: var(--success-strong-link); --link-hover: var(--success-strong-link-hover); --link-active: var(--success-strong-link-active); --border: var(--success-strong-border); --action-fill: var(--success-strong-action-fill); --action-fill-hover: var(--success-strong-action-fill-hover); --action-fill-active: var(--success-strong-action-fill-active); --action-text: var(--success-strong-action-text); --action-border: var(--success-strong-action-border); color: var(--success-strong-text-base); }
.hover\:surface-success-strong:hover { background-color: var(--success-strong); --bg-color: var(--success-strong); --text-heading: var(--success-strong-text-heading); --text-base: var(--success-strong-text-base); --text-muted: var(--success-strong-text-muted); --link: var(--success-strong-link); --link-hover: var(--success-strong-link-hover); --link-active: var(--success-strong-link-active); --border: var(--success-strong-border); --action-fill: var(--success-strong-action-fill); --action-fill-hover: var(--success-strong-action-fill-hover); --action-fill-active: var(--success-strong-action-fill-active); --action-text: var(--success-strong-action-text); --action-border: var(--success-strong-action-border); color: var(--success-strong-text-base); }
.active\:surface-success-strong:active { background-color: var(--success-strong); --bg-color: var(--success-strong); --text-heading: var(--success-strong-text-heading); --text-base: var(--success-strong-text-base); --text-muted: var(--success-strong-text-muted); --link: var(--success-strong-link); --link-hover: var(--success-strong-link-hover); --link-active: var(--success-strong-link-active); --border: var(--success-strong-border); --action-fill: var(--success-strong-action-fill); --action-fill-hover: var(--success-strong-action-fill-hover); --action-fill-active: var(--success-strong-action-fill-active); --action-text: var(--success-strong-action-text); --action-border: var(--success-strong-action-border); color: var(--success-strong-text-base); }
.bg-success-strong\/10 { background-color: color-mix(in srgb, var(--success-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent); }
.hover\:bg-success-strong\/10:hover { background-color: color-mix(in srgb, var(--success-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent); }
.active\:bg-success-strong\/10:active { background-color: color-mix(in srgb, var(--success-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 10%, transparent); }
.bg-success-strong\/30 { background-color: color-mix(in srgb, var(--success-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent); }
.hover\:bg-success-strong\/30:hover { background-color: color-mix(in srgb, var(--success-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent); }
.active\:bg-success-strong\/30:active { background-color: color-mix(in srgb, var(--success-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 30%, transparent); }
.bg-success-strong\/50 { background-color: color-mix(in srgb, var(--success-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent); }
.hover\:bg-success-strong\/50:hover { background-color: color-mix(in srgb, var(--success-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent); }
.active\:bg-success-strong\/50:active { background-color: color-mix(in srgb, var(--success-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 50%, transparent); }
.bg-success-strong\/70 { background-color: color-mix(in srgb, var(--success-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent); }
.hover\:bg-success-strong\/70:hover { background-color: color-mix(in srgb, var(--success-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent); }
.active\:bg-success-strong\/70:active { background-color: color-mix(in srgb, var(--success-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 70%, transparent); }
.bg-success-strong\/90 { background-color: color-mix(in srgb, var(--success-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent); }
.hover\:bg-success-strong\/90:hover { background-color: color-mix(in srgb, var(--success-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent); }
.active\:bg-success-strong\/90:active { background-color: color-mix(in srgb, var(--success-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-strong) 90%, transparent); }
.bg-info-base { background-color: var(--info-base); --bg-color: var(--info-base); --text-heading: var(--info-base-text-heading); --text-base: var(--info-base-text-base); --text-muted: var(--info-base-text-muted); --link: var(--info-base-link); --link-hover: var(--info-base-link-hover); --link-active: var(--info-base-link-active); --border: var(--info-base-border); --action-fill: var(--info-base-action-fill); --action-fill-hover: var(--info-base-action-fill-hover); --action-fill-active: var(--info-base-action-fill-active); --action-text: var(--info-base-action-text); --action-border: var(--info-base-action-border); color: var(--info-base-text-base); }
.hover\:bg-info-base:hover { background-color: var(--info-base); --bg-color: var(--info-base); --text-heading: var(--info-base-text-heading); --text-base: var(--info-base-text-base); --text-muted: var(--info-base-text-muted); --link: var(--info-base-link); --link-hover: var(--info-base-link-hover); --link-active: var(--info-base-link-active); --border: var(--info-base-border); --action-fill: var(--info-base-action-fill); --action-fill-hover: var(--info-base-action-fill-hover); --action-fill-active: var(--info-base-action-fill-active); --action-text: var(--info-base-action-text); --action-border: var(--info-base-action-border); color: var(--info-base-text-base); }
.active\:bg-info-base:active { background-color: var(--info-base); --bg-color: var(--info-base); --text-heading: var(--info-base-text-heading); --text-base: var(--info-base-text-base); --text-muted: var(--info-base-text-muted); --link: var(--info-base-link); --link-hover: var(--info-base-link-hover); --link-active: var(--info-base-link-active); --border: var(--info-base-border); --action-fill: var(--info-base-action-fill); --action-fill-hover: var(--info-base-action-fill-hover); --action-fill-active: var(--info-base-action-fill-active); --action-text: var(--info-base-action-text); --action-border: var(--info-base-action-border); color: var(--info-base-text-base); }
.surface-info-base { background-color: var(--info-base); --bg-color: var(--info-base); --text-heading: var(--info-base-text-heading); --text-base: var(--info-base-text-base); --text-muted: var(--info-base-text-muted); --link: var(--info-base-link); --link-hover: var(--info-base-link-hover); --link-active: var(--info-base-link-active); --border: var(--info-base-border); --action-fill: var(--info-base-action-fill); --action-fill-hover: var(--info-base-action-fill-hover); --action-fill-active: var(--info-base-action-fill-active); --action-text: var(--info-base-action-text); --action-border: var(--info-base-action-border); color: var(--info-base-text-base); }
.hover\:surface-info-base:hover { background-color: var(--info-base); --bg-color: var(--info-base); --text-heading: var(--info-base-text-heading); --text-base: var(--info-base-text-base); --text-muted: var(--info-base-text-muted); --link: var(--info-base-link); --link-hover: var(--info-base-link-hover); --link-active: var(--info-base-link-active); --border: var(--info-base-border); --action-fill: var(--info-base-action-fill); --action-fill-hover: var(--info-base-action-fill-hover); --action-fill-active: var(--info-base-action-fill-active); --action-text: var(--info-base-action-text); --action-border: var(--info-base-action-border); color: var(--info-base-text-base); }
.active\:surface-info-base:active { background-color: var(--info-base); --bg-color: var(--info-base); --text-heading: var(--info-base-text-heading); --text-base: var(--info-base-text-base); --text-muted: var(--info-base-text-muted); --link: var(--info-base-link); --link-hover: var(--info-base-link-hover); --link-active: var(--info-base-link-active); --border: var(--info-base-border); --action-fill: var(--info-base-action-fill); --action-fill-hover: var(--info-base-action-fill-hover); --action-fill-active: var(--info-base-action-fill-active); --action-text: var(--info-base-action-text); --action-border: var(--info-base-action-border); color: var(--info-base-text-base); }
.bg-info-base\/10 { background-color: color-mix(in srgb, var(--info-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent); }
.hover\:bg-info-base\/10:hover { background-color: color-mix(in srgb, var(--info-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent); }
.active\:bg-info-base\/10:active { background-color: color-mix(in srgb, var(--info-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 10%, transparent); }
.bg-info-base\/30 { background-color: color-mix(in srgb, var(--info-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent); }
.hover\:bg-info-base\/30:hover { background-color: color-mix(in srgb, var(--info-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent); }
.active\:bg-info-base\/30:active { background-color: color-mix(in srgb, var(--info-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 30%, transparent); }
.bg-info-base\/50 { background-color: color-mix(in srgb, var(--info-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent); }
.hover\:bg-info-base\/50:hover { background-color: color-mix(in srgb, var(--info-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent); }
.active\:bg-info-base\/50:active { background-color: color-mix(in srgb, var(--info-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 50%, transparent); }
.bg-info-base\/70 { background-color: color-mix(in srgb, var(--info-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent); }
.hover\:bg-info-base\/70:hover { background-color: color-mix(in srgb, var(--info-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent); }
.active\:bg-info-base\/70:active { background-color: color-mix(in srgb, var(--info-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 70%, transparent); }
.bg-info-base\/90 { background-color: color-mix(in srgb, var(--info-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent); }
.hover\:bg-info-base\/90:hover { background-color: color-mix(in srgb, var(--info-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent); }
.active\:bg-info-base\/90:active { background-color: color-mix(in srgb, var(--info-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-base) 90%, transparent); }
.bg-info-strong { background-color: var(--info-strong); --bg-color: var(--info-strong); --text-heading: var(--info-strong-text-heading); --text-base: var(--info-strong-text-base); --text-muted: var(--info-strong-text-muted); --link: var(--info-strong-link); --link-hover: var(--info-strong-link-hover); --link-active: var(--info-strong-link-active); --border: var(--info-strong-border); --action-fill: var(--info-strong-action-fill); --action-fill-hover: var(--info-strong-action-fill-hover); --action-fill-active: var(--info-strong-action-fill-active); --action-text: var(--info-strong-action-text); --action-border: var(--info-strong-action-border); color: var(--info-strong-text-base); }
.hover\:bg-info-strong:hover { background-color: var(--info-strong); --bg-color: var(--info-strong); --text-heading: var(--info-strong-text-heading); --text-base: var(--info-strong-text-base); --text-muted: var(--info-strong-text-muted); --link: var(--info-strong-link); --link-hover: var(--info-strong-link-hover); --link-active: var(--info-strong-link-active); --border: var(--info-strong-border); --action-fill: var(--info-strong-action-fill); --action-fill-hover: var(--info-strong-action-fill-hover); --action-fill-active: var(--info-strong-action-fill-active); --action-text: var(--info-strong-action-text); --action-border: var(--info-strong-action-border); color: var(--info-strong-text-base); }
.active\:bg-info-strong:active { background-color: var(--info-strong); --bg-color: var(--info-strong); --text-heading: var(--info-strong-text-heading); --text-base: var(--info-strong-text-base); --text-muted: var(--info-strong-text-muted); --link: var(--info-strong-link); --link-hover: var(--info-strong-link-hover); --link-active: var(--info-strong-link-active); --border: var(--info-strong-border); --action-fill: var(--info-strong-action-fill); --action-fill-hover: var(--info-strong-action-fill-hover); --action-fill-active: var(--info-strong-action-fill-active); --action-text: var(--info-strong-action-text); --action-border: var(--info-strong-action-border); color: var(--info-strong-text-base); }
.surface-info-strong { background-color: var(--info-strong); --bg-color: var(--info-strong); --text-heading: var(--info-strong-text-heading); --text-base: var(--info-strong-text-base); --text-muted: var(--info-strong-text-muted); --link: var(--info-strong-link); --link-hover: var(--info-strong-link-hover); --link-active: var(--info-strong-link-active); --border: var(--info-strong-border); --action-fill: var(--info-strong-action-fill); --action-fill-hover: var(--info-strong-action-fill-hover); --action-fill-active: var(--info-strong-action-fill-active); --action-text: var(--info-strong-action-text); --action-border: var(--info-strong-action-border); color: var(--info-strong-text-base); }
.hover\:surface-info-strong:hover { background-color: var(--info-strong); --bg-color: var(--info-strong); --text-heading: var(--info-strong-text-heading); --text-base: var(--info-strong-text-base); --text-muted: var(--info-strong-text-muted); --link: var(--info-strong-link); --link-hover: var(--info-strong-link-hover); --link-active: var(--info-strong-link-active); --border: var(--info-strong-border); --action-fill: var(--info-strong-action-fill); --action-fill-hover: var(--info-strong-action-fill-hover); --action-fill-active: var(--info-strong-action-fill-active); --action-text: var(--info-strong-action-text); --action-border: var(--info-strong-action-border); color: var(--info-strong-text-base); }
.active\:surface-info-strong:active { background-color: var(--info-strong); --bg-color: var(--info-strong); --text-heading: var(--info-strong-text-heading); --text-base: var(--info-strong-text-base); --text-muted: var(--info-strong-text-muted); --link: var(--info-strong-link); --link-hover: var(--info-strong-link-hover); --link-active: var(--info-strong-link-active); --border: var(--info-strong-border); --action-fill: var(--info-strong-action-fill); --action-fill-hover: var(--info-strong-action-fill-hover); --action-fill-active: var(--info-strong-action-fill-active); --action-text: var(--info-strong-action-text); --action-border: var(--info-strong-action-border); color: var(--info-strong-text-base); }
.bg-info-strong\/10 { background-color: color-mix(in srgb, var(--info-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent); }
.hover\:bg-info-strong\/10:hover { background-color: color-mix(in srgb, var(--info-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent); }
.active\:bg-info-strong\/10:active { background-color: color-mix(in srgb, var(--info-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 10%, transparent); }
.bg-info-strong\/30 { background-color: color-mix(in srgb, var(--info-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent); }
.hover\:bg-info-strong\/30:hover { background-color: color-mix(in srgb, var(--info-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent); }
.active\:bg-info-strong\/30:active { background-color: color-mix(in srgb, var(--info-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 30%, transparent); }
.bg-info-strong\/50 { background-color: color-mix(in srgb, var(--info-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent); }
.hover\:bg-info-strong\/50:hover { background-color: color-mix(in srgb, var(--info-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent); }
.active\:bg-info-strong\/50:active { background-color: color-mix(in srgb, var(--info-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 50%, transparent); }
.bg-info-strong\/70 { background-color: color-mix(in srgb, var(--info-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent); }
.hover\:bg-info-strong\/70:hover { background-color: color-mix(in srgb, var(--info-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent); }
.active\:bg-info-strong\/70:active { background-color: color-mix(in srgb, var(--info-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 70%, transparent); }
.bg-info-strong\/90 { background-color: color-mix(in srgb, var(--info-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent); }
.hover\:bg-info-strong\/90:hover { background-color: color-mix(in srgb, var(--info-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent); }
.active\:bg-info-strong\/90:active { background-color: color-mix(in srgb, var(--info-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-strong) 90%, transparent); }
.bg-info-weak { background-color: var(--info-weak); --bg-color: var(--info-weak); --text-heading: var(--info-weak-text-heading); --text-base: var(--info-weak-text-base); --text-muted: var(--info-weak-text-muted); --link: var(--info-weak-link); --link-hover: var(--info-weak-link-hover); --link-active: var(--info-weak-link-active); --border: var(--info-weak-border); --action-fill: var(--info-weak-action-fill); --action-fill-hover: var(--info-weak-action-fill-hover); --action-fill-active: var(--info-weak-action-fill-active); --action-text: var(--info-weak-action-text); --action-border: var(--info-weak-action-border); color: var(--info-weak-text-base); }
.hover\:bg-info-weak:hover { background-color: var(--info-weak); --bg-color: var(--info-weak); --text-heading: var(--info-weak-text-heading); --text-base: var(--info-weak-text-base); --text-muted: var(--info-weak-text-muted); --link: var(--info-weak-link); --link-hover: var(--info-weak-link-hover); --link-active: var(--info-weak-link-active); --border: var(--info-weak-border); --action-fill: var(--info-weak-action-fill); --action-fill-hover: var(--info-weak-action-fill-hover); --action-fill-active: var(--info-weak-action-fill-active); --action-text: var(--info-weak-action-text); --action-border: var(--info-weak-action-border); color: var(--info-weak-text-base); }
.active\:bg-info-weak:active { background-color: var(--info-weak); --bg-color: var(--info-weak); --text-heading: var(--info-weak-text-heading); --text-base: var(--info-weak-text-base); --text-muted: var(--info-weak-text-muted); --link: var(--info-weak-link); --link-hover: var(--info-weak-link-hover); --link-active: var(--info-weak-link-active); --border: var(--info-weak-border); --action-fill: var(--info-weak-action-fill); --action-fill-hover: var(--info-weak-action-fill-hover); --action-fill-active: var(--info-weak-action-fill-active); --action-text: var(--info-weak-action-text); --action-border: var(--info-weak-action-border); color: var(--info-weak-text-base); }
.surface-info-weak { background-color: var(--info-weak); --bg-color: var(--info-weak); --text-heading: var(--info-weak-text-heading); --text-base: var(--info-weak-text-base); --text-muted: var(--info-weak-text-muted); --link: var(--info-weak-link); --link-hover: var(--info-weak-link-hover); --link-active: var(--info-weak-link-active); --border: var(--info-weak-border); --action-fill: var(--info-weak-action-fill); --action-fill-hover: var(--info-weak-action-fill-hover); --action-fill-active: var(--info-weak-action-fill-active); --action-text: var(--info-weak-action-text); --action-border: var(--info-weak-action-border); color: var(--info-weak-text-base); }
.hover\:surface-info-weak:hover { background-color: var(--info-weak); --bg-color: var(--info-weak); --text-heading: var(--info-weak-text-heading); --text-base: var(--info-weak-text-base); --text-muted: var(--info-weak-text-muted); --link: var(--info-weak-link); --link-hover: var(--info-weak-link-hover); --link-active: var(--info-weak-link-active); --border: var(--info-weak-border); --action-fill: var(--info-weak-action-fill); --action-fill-hover: var(--info-weak-action-fill-hover); --action-fill-active: var(--info-weak-action-fill-active); --action-text: var(--info-weak-action-text); --action-border: var(--info-weak-action-border); color: var(--info-weak-text-base); }
.active\:surface-info-weak:active { background-color: var(--info-weak); --bg-color: var(--info-weak); --text-heading: var(--info-weak-text-heading); --text-base: var(--info-weak-text-base); --text-muted: var(--info-weak-text-muted); --link: var(--info-weak-link); --link-hover: var(--info-weak-link-hover); --link-active: var(--info-weak-link-active); --border: var(--info-weak-border); --action-fill: var(--info-weak-action-fill); --action-fill-hover: var(--info-weak-action-fill-hover); --action-fill-active: var(--info-weak-action-fill-active); --action-text: var(--info-weak-action-text); --action-border: var(--info-weak-action-border); color: var(--info-weak-text-base); }
.bg-info-weak\/10 { background-color: color-mix(in srgb, var(--info-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent); }
.hover\:bg-info-weak\/10:hover { background-color: color-mix(in srgb, var(--info-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent); }
.active\:bg-info-weak\/10:active { background-color: color-mix(in srgb, var(--info-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 10%, transparent); }
.bg-info-weak\/30 { background-color: color-mix(in srgb, var(--info-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent); }
.hover\:bg-info-weak\/30:hover { background-color: color-mix(in srgb, var(--info-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent); }
.active\:bg-info-weak\/30:active { background-color: color-mix(in srgb, var(--info-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 30%, transparent); }
.bg-info-weak\/50 { background-color: color-mix(in srgb, var(--info-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent); }
.hover\:bg-info-weak\/50:hover { background-color: color-mix(in srgb, var(--info-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent); }
.active\:bg-info-weak\/50:active { background-color: color-mix(in srgb, var(--info-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 50%, transparent); }
.bg-info-weak\/70 { background-color: color-mix(in srgb, var(--info-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent); }
.hover\:bg-info-weak\/70:hover { background-color: color-mix(in srgb, var(--info-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent); }
.active\:bg-info-weak\/70:active { background-color: color-mix(in srgb, var(--info-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 70%, transparent); }
.bg-info-weak\/90 { background-color: color-mix(in srgb, var(--info-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent); }
.hover\:bg-info-weak\/90:hover { background-color: color-mix(in srgb, var(--info-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent); }
.active\:bg-info-weak\/90:active { background-color: color-mix(in srgb, var(--info-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-weak) 90%, transparent); }
.bg-error-weak { background-color: var(--error-weak); --bg-color: var(--error-weak); --text-heading: var(--error-weak-text-heading); --text-base: var(--error-weak-text-base); --text-muted: var(--error-weak-text-muted); --link: var(--error-weak-link); --link-hover: var(--error-weak-link-hover); --link-active: var(--error-weak-link-active); --border: var(--error-weak-border); --action-fill: var(--error-weak-action-fill); --action-fill-hover: var(--error-weak-action-fill-hover); --action-fill-active: var(--error-weak-action-fill-active); --action-text: var(--error-weak-action-text); --action-border: var(--error-weak-action-border); color: var(--error-weak-text-base); }
.hover\:bg-error-weak:hover { background-color: var(--error-weak); --bg-color: var(--error-weak); --text-heading: var(--error-weak-text-heading); --text-base: var(--error-weak-text-base); --text-muted: var(--error-weak-text-muted); --link: var(--error-weak-link); --link-hover: var(--error-weak-link-hover); --link-active: var(--error-weak-link-active); --border: var(--error-weak-border); --action-fill: var(--error-weak-action-fill); --action-fill-hover: var(--error-weak-action-fill-hover); --action-fill-active: var(--error-weak-action-fill-active); --action-text: var(--error-weak-action-text); --action-border: var(--error-weak-action-border); color: var(--error-weak-text-base); }
.active\:bg-error-weak:active { background-color: var(--error-weak); --bg-color: var(--error-weak); --text-heading: var(--error-weak-text-heading); --text-base: var(--error-weak-text-base); --text-muted: var(--error-weak-text-muted); --link: var(--error-weak-link); --link-hover: var(--error-weak-link-hover); --link-active: var(--error-weak-link-active); --border: var(--error-weak-border); --action-fill: var(--error-weak-action-fill); --action-fill-hover: var(--error-weak-action-fill-hover); --action-fill-active: var(--error-weak-action-fill-active); --action-text: var(--error-weak-action-text); --action-border: var(--error-weak-action-border); color: var(--error-weak-text-base); }
.surface-error-weak { background-color: var(--error-weak); --bg-color: var(--error-weak); --text-heading: var(--error-weak-text-heading); --text-base: var(--error-weak-text-base); --text-muted: var(--error-weak-text-muted); --link: var(--error-weak-link); --link-hover: var(--error-weak-link-hover); --link-active: var(--error-weak-link-active); --border: var(--error-weak-border); --action-fill: var(--error-weak-action-fill); --action-fill-hover: var(--error-weak-action-fill-hover); --action-fill-active: var(--error-weak-action-fill-active); --action-text: var(--error-weak-action-text); --action-border: var(--error-weak-action-border); color: var(--error-weak-text-base); }
.hover\:surface-error-weak:hover { background-color: var(--error-weak); --bg-color: var(--error-weak); --text-heading: var(--error-weak-text-heading); --text-base: var(--error-weak-text-base); --text-muted: var(--error-weak-text-muted); --link: var(--error-weak-link); --link-hover: var(--error-weak-link-hover); --link-active: var(--error-weak-link-active); --border: var(--error-weak-border); --action-fill: var(--error-weak-action-fill); --action-fill-hover: var(--error-weak-action-fill-hover); --action-fill-active: var(--error-weak-action-fill-active); --action-text: var(--error-weak-action-text); --action-border: var(--error-weak-action-border); color: var(--error-weak-text-base); }
.active\:surface-error-weak:active { background-color: var(--error-weak); --bg-color: var(--error-weak); --text-heading: var(--error-weak-text-heading); --text-base: var(--error-weak-text-base); --text-muted: var(--error-weak-text-muted); --link: var(--error-weak-link); --link-hover: var(--error-weak-link-hover); --link-active: var(--error-weak-link-active); --border: var(--error-weak-border); --action-fill: var(--error-weak-action-fill); --action-fill-hover: var(--error-weak-action-fill-hover); --action-fill-active: var(--error-weak-action-fill-active); --action-text: var(--error-weak-action-text); --action-border: var(--error-weak-action-border); color: var(--error-weak-text-base); }
.bg-error-weak\/10 { background-color: color-mix(in srgb, var(--error-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent); }
.hover\:bg-error-weak\/10:hover { background-color: color-mix(in srgb, var(--error-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent); }
.active\:bg-error-weak\/10:active { background-color: color-mix(in srgb, var(--error-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 10%, transparent); }
.bg-error-weak\/30 { background-color: color-mix(in srgb, var(--error-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent); }
.hover\:bg-error-weak\/30:hover { background-color: color-mix(in srgb, var(--error-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent); }
.active\:bg-error-weak\/30:active { background-color: color-mix(in srgb, var(--error-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 30%, transparent); }
.bg-error-weak\/50 { background-color: color-mix(in srgb, var(--error-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent); }
.hover\:bg-error-weak\/50:hover { background-color: color-mix(in srgb, var(--error-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent); }
.active\:bg-error-weak\/50:active { background-color: color-mix(in srgb, var(--error-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 50%, transparent); }
.bg-error-weak\/70 { background-color: color-mix(in srgb, var(--error-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent); }
.hover\:bg-error-weak\/70:hover { background-color: color-mix(in srgb, var(--error-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent); }
.active\:bg-error-weak\/70:active { background-color: color-mix(in srgb, var(--error-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 70%, transparent); }
.bg-error-weak\/90 { background-color: color-mix(in srgb, var(--error-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent); }
.hover\:bg-error-weak\/90:hover { background-color: color-mix(in srgb, var(--error-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent); }
.active\:bg-error-weak\/90:active { background-color: color-mix(in srgb, var(--error-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-weak) 90%, transparent); }
.bg-error-base { background-color: var(--error-base); --bg-color: var(--error-base); --text-heading: var(--error-base-text-heading); --text-base: var(--error-base-text-base); --text-muted: var(--error-base-text-muted); --link: var(--error-base-link); --link-hover: var(--error-base-link-hover); --link-active: var(--error-base-link-active); --border: var(--error-base-border); --action-fill: var(--error-base-action-fill); --action-fill-hover: var(--error-base-action-fill-hover); --action-fill-active: var(--error-base-action-fill-active); --action-text: var(--error-base-action-text); --action-border: var(--error-base-action-border); color: var(--error-base-text-base); }
.hover\:bg-error-base:hover { background-color: var(--error-base); --bg-color: var(--error-base); --text-heading: var(--error-base-text-heading); --text-base: var(--error-base-text-base); --text-muted: var(--error-base-text-muted); --link: var(--error-base-link); --link-hover: var(--error-base-link-hover); --link-active: var(--error-base-link-active); --border: var(--error-base-border); --action-fill: var(--error-base-action-fill); --action-fill-hover: var(--error-base-action-fill-hover); --action-fill-active: var(--error-base-action-fill-active); --action-text: var(--error-base-action-text); --action-border: var(--error-base-action-border); color: var(--error-base-text-base); }
.active\:bg-error-base:active { background-color: var(--error-base); --bg-color: var(--error-base); --text-heading: var(--error-base-text-heading); --text-base: var(--error-base-text-base); --text-muted: var(--error-base-text-muted); --link: var(--error-base-link); --link-hover: var(--error-base-link-hover); --link-active: var(--error-base-link-active); --border: var(--error-base-border); --action-fill: var(--error-base-action-fill); --action-fill-hover: var(--error-base-action-fill-hover); --action-fill-active: var(--error-base-action-fill-active); --action-text: var(--error-base-action-text); --action-border: var(--error-base-action-border); color: var(--error-base-text-base); }
.surface-error-base { background-color: var(--error-base); --bg-color: var(--error-base); --text-heading: var(--error-base-text-heading); --text-base: var(--error-base-text-base); --text-muted: var(--error-base-text-muted); --link: var(--error-base-link); --link-hover: var(--error-base-link-hover); --link-active: var(--error-base-link-active); --border: var(--error-base-border); --action-fill: var(--error-base-action-fill); --action-fill-hover: var(--error-base-action-fill-hover); --action-fill-active: var(--error-base-action-fill-active); --action-text: var(--error-base-action-text); --action-border: var(--error-base-action-border); color: var(--error-base-text-base); }
.hover\:surface-error-base:hover { background-color: var(--error-base); --bg-color: var(--error-base); --text-heading: var(--error-base-text-heading); --text-base: var(--error-base-text-base); --text-muted: var(--error-base-text-muted); --link: var(--error-base-link); --link-hover: var(--error-base-link-hover); --link-active: var(--error-base-link-active); --border: var(--error-base-border); --action-fill: var(--error-base-action-fill); --action-fill-hover: var(--error-base-action-fill-hover); --action-fill-active: var(--error-base-action-fill-active); --action-text: var(--error-base-action-text); --action-border: var(--error-base-action-border); color: var(--error-base-text-base); }
.active\:surface-error-base:active { background-color: var(--error-base); --bg-color: var(--error-base); --text-heading: var(--error-base-text-heading); --text-base: var(--error-base-text-base); --text-muted: var(--error-base-text-muted); --link: var(--error-base-link); --link-hover: var(--error-base-link-hover); --link-active: var(--error-base-link-active); --border: var(--error-base-border); --action-fill: var(--error-base-action-fill); --action-fill-hover: var(--error-base-action-fill-hover); --action-fill-active: var(--error-base-action-fill-active); --action-text: var(--error-base-action-text); --action-border: var(--error-base-action-border); color: var(--error-base-text-base); }
.bg-error-base\/10 { background-color: color-mix(in srgb, var(--error-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent); }
.hover\:bg-error-base\/10:hover { background-color: color-mix(in srgb, var(--error-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent); }
.active\:bg-error-base\/10:active { background-color: color-mix(in srgb, var(--error-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 10%, transparent); }
.bg-error-base\/30 { background-color: color-mix(in srgb, var(--error-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent); }
.hover\:bg-error-base\/30:hover { background-color: color-mix(in srgb, var(--error-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent); }
.active\:bg-error-base\/30:active { background-color: color-mix(in srgb, var(--error-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 30%, transparent); }
.bg-error-base\/50 { background-color: color-mix(in srgb, var(--error-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent); }
.hover\:bg-error-base\/50:hover { background-color: color-mix(in srgb, var(--error-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent); }
.active\:bg-error-base\/50:active { background-color: color-mix(in srgb, var(--error-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 50%, transparent); }
.bg-error-base\/70 { background-color: color-mix(in srgb, var(--error-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent); }
.hover\:bg-error-base\/70:hover { background-color: color-mix(in srgb, var(--error-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent); }
.active\:bg-error-base\/70:active { background-color: color-mix(in srgb, var(--error-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 70%, transparent); }
.bg-error-base\/90 { background-color: color-mix(in srgb, var(--error-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent); }
.hover\:bg-error-base\/90:hover { background-color: color-mix(in srgb, var(--error-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent); }
.active\:bg-error-base\/90:active { background-color: color-mix(in srgb, var(--error-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-base) 90%, transparent); }
.bg-error-strong { background-color: var(--error-strong); --bg-color: var(--error-strong); --text-heading: var(--error-strong-text-heading); --text-base: var(--error-strong-text-base); --text-muted: var(--error-strong-text-muted); --link: var(--error-strong-link); --link-hover: var(--error-strong-link-hover); --link-active: var(--error-strong-link-active); --border: var(--error-strong-border); --action-fill: var(--error-strong-action-fill); --action-fill-hover: var(--error-strong-action-fill-hover); --action-fill-active: var(--error-strong-action-fill-active); --action-text: var(--error-strong-action-text); --action-border: var(--error-strong-action-border); color: var(--error-strong-text-base); }
.hover\:bg-error-strong:hover { background-color: var(--error-strong); --bg-color: var(--error-strong); --text-heading: var(--error-strong-text-heading); --text-base: var(--error-strong-text-base); --text-muted: var(--error-strong-text-muted); --link: var(--error-strong-link); --link-hover: var(--error-strong-link-hover); --link-active: var(--error-strong-link-active); --border: var(--error-strong-border); --action-fill: var(--error-strong-action-fill); --action-fill-hover: var(--error-strong-action-fill-hover); --action-fill-active: var(--error-strong-action-fill-active); --action-text: var(--error-strong-action-text); --action-border: var(--error-strong-action-border); color: var(--error-strong-text-base); }
.active\:bg-error-strong:active { background-color: var(--error-strong); --bg-color: var(--error-strong); --text-heading: var(--error-strong-text-heading); --text-base: var(--error-strong-text-base); --text-muted: var(--error-strong-text-muted); --link: var(--error-strong-link); --link-hover: var(--error-strong-link-hover); --link-active: var(--error-strong-link-active); --border: var(--error-strong-border); --action-fill: var(--error-strong-action-fill); --action-fill-hover: var(--error-strong-action-fill-hover); --action-fill-active: var(--error-strong-action-fill-active); --action-text: var(--error-strong-action-text); --action-border: var(--error-strong-action-border); color: var(--error-strong-text-base); }
.surface-error-strong { background-color: var(--error-strong); --bg-color: var(--error-strong); --text-heading: var(--error-strong-text-heading); --text-base: var(--error-strong-text-base); --text-muted: var(--error-strong-text-muted); --link: var(--error-strong-link); --link-hover: var(--error-strong-link-hover); --link-active: var(--error-strong-link-active); --border: var(--error-strong-border); --action-fill: var(--error-strong-action-fill); --action-fill-hover: var(--error-strong-action-fill-hover); --action-fill-active: var(--error-strong-action-fill-active); --action-text: var(--error-strong-action-text); --action-border: var(--error-strong-action-border); color: var(--error-strong-text-base); }
.hover\:surface-error-strong:hover { background-color: var(--error-strong); --bg-color: var(--error-strong); --text-heading: var(--error-strong-text-heading); --text-base: var(--error-strong-text-base); --text-muted: var(--error-strong-text-muted); --link: var(--error-strong-link); --link-hover: var(--error-strong-link-hover); --link-active: var(--error-strong-link-active); --border: var(--error-strong-border); --action-fill: var(--error-strong-action-fill); --action-fill-hover: var(--error-strong-action-fill-hover); --action-fill-active: var(--error-strong-action-fill-active); --action-text: var(--error-strong-action-text); --action-border: var(--error-strong-action-border); color: var(--error-strong-text-base); }
.active\:surface-error-strong:active { background-color: var(--error-strong); --bg-color: var(--error-strong); --text-heading: var(--error-strong-text-heading); --text-base: var(--error-strong-text-base); --text-muted: var(--error-strong-text-muted); --link: var(--error-strong-link); --link-hover: var(--error-strong-link-hover); --link-active: var(--error-strong-link-active); --border: var(--error-strong-border); --action-fill: var(--error-strong-action-fill); --action-fill-hover: var(--error-strong-action-fill-hover); --action-fill-active: var(--error-strong-action-fill-active); --action-text: var(--error-strong-action-text); --action-border: var(--error-strong-action-border); color: var(--error-strong-text-base); }
.bg-error-strong\/10 { background-color: color-mix(in srgb, var(--error-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent); }
.hover\:bg-error-strong\/10:hover { background-color: color-mix(in srgb, var(--error-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent); }
.active\:bg-error-strong\/10:active { background-color: color-mix(in srgb, var(--error-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 10%, transparent); }
.bg-error-strong\/30 { background-color: color-mix(in srgb, var(--error-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent); }
.hover\:bg-error-strong\/30:hover { background-color: color-mix(in srgb, var(--error-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent); }
.active\:bg-error-strong\/30:active { background-color: color-mix(in srgb, var(--error-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 30%, transparent); }
.bg-error-strong\/50 { background-color: color-mix(in srgb, var(--error-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent); }
.hover\:bg-error-strong\/50:hover { background-color: color-mix(in srgb, var(--error-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent); }
.active\:bg-error-strong\/50:active { background-color: color-mix(in srgb, var(--error-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 50%, transparent); }
.bg-error-strong\/70 { background-color: color-mix(in srgb, var(--error-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent); }
.hover\:bg-error-strong\/70:hover { background-color: color-mix(in srgb, var(--error-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent); }
.active\:bg-error-strong\/70:active { background-color: color-mix(in srgb, var(--error-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 70%, transparent); }
.bg-error-strong\/90 { background-color: color-mix(in srgb, var(--error-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent); }
.hover\:bg-error-strong\/90:hover { background-color: color-mix(in srgb, var(--error-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent); }
.active\:bg-error-strong\/90:active { background-color: color-mix(in srgb, var(--error-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-strong) 90%, transparent); }
.bg-warning-weak { background-color: var(--warning-weak); --bg-color: var(--warning-weak); --text-heading: var(--warning-weak-text-heading); --text-base: var(--warning-weak-text-base); --text-muted: var(--warning-weak-text-muted); --link: var(--warning-weak-link); --link-hover: var(--warning-weak-link-hover); --link-active: var(--warning-weak-link-active); --border: var(--warning-weak-border); --action-fill: var(--warning-weak-action-fill); --action-fill-hover: var(--warning-weak-action-fill-hover); --action-fill-active: var(--warning-weak-action-fill-active); --action-text: var(--warning-weak-action-text); --action-border: var(--warning-weak-action-border); color: var(--warning-weak-text-base); }
.hover\:bg-warning-weak:hover { background-color: var(--warning-weak); --bg-color: var(--warning-weak); --text-heading: var(--warning-weak-text-heading); --text-base: var(--warning-weak-text-base); --text-muted: var(--warning-weak-text-muted); --link: var(--warning-weak-link); --link-hover: var(--warning-weak-link-hover); --link-active: var(--warning-weak-link-active); --border: var(--warning-weak-border); --action-fill: var(--warning-weak-action-fill); --action-fill-hover: var(--warning-weak-action-fill-hover); --action-fill-active: var(--warning-weak-action-fill-active); --action-text: var(--warning-weak-action-text); --action-border: var(--warning-weak-action-border); color: var(--warning-weak-text-base); }
.active\:bg-warning-weak:active { background-color: var(--warning-weak); --bg-color: var(--warning-weak); --text-heading: var(--warning-weak-text-heading); --text-base: var(--warning-weak-text-base); --text-muted: var(--warning-weak-text-muted); --link: var(--warning-weak-link); --link-hover: var(--warning-weak-link-hover); --link-active: var(--warning-weak-link-active); --border: var(--warning-weak-border); --action-fill: var(--warning-weak-action-fill); --action-fill-hover: var(--warning-weak-action-fill-hover); --action-fill-active: var(--warning-weak-action-fill-active); --action-text: var(--warning-weak-action-text); --action-border: var(--warning-weak-action-border); color: var(--warning-weak-text-base); }
.surface-warning-weak { background-color: var(--warning-weak); --bg-color: var(--warning-weak); --text-heading: var(--warning-weak-text-heading); --text-base: var(--warning-weak-text-base); --text-muted: var(--warning-weak-text-muted); --link: var(--warning-weak-link); --link-hover: var(--warning-weak-link-hover); --link-active: var(--warning-weak-link-active); --border: var(--warning-weak-border); --action-fill: var(--warning-weak-action-fill); --action-fill-hover: var(--warning-weak-action-fill-hover); --action-fill-active: var(--warning-weak-action-fill-active); --action-text: var(--warning-weak-action-text); --action-border: var(--warning-weak-action-border); color: var(--warning-weak-text-base); }
.hover\:surface-warning-weak:hover { background-color: var(--warning-weak); --bg-color: var(--warning-weak); --text-heading: var(--warning-weak-text-heading); --text-base: var(--warning-weak-text-base); --text-muted: var(--warning-weak-text-muted); --link: var(--warning-weak-link); --link-hover: var(--warning-weak-link-hover); --link-active: var(--warning-weak-link-active); --border: var(--warning-weak-border); --action-fill: var(--warning-weak-action-fill); --action-fill-hover: var(--warning-weak-action-fill-hover); --action-fill-active: var(--warning-weak-action-fill-active); --action-text: var(--warning-weak-action-text); --action-border: var(--warning-weak-action-border); color: var(--warning-weak-text-base); }
.active\:surface-warning-weak:active { background-color: var(--warning-weak); --bg-color: var(--warning-weak); --text-heading: var(--warning-weak-text-heading); --text-base: var(--warning-weak-text-base); --text-muted: var(--warning-weak-text-muted); --link: var(--warning-weak-link); --link-hover: var(--warning-weak-link-hover); --link-active: var(--warning-weak-link-active); --border: var(--warning-weak-border); --action-fill: var(--warning-weak-action-fill); --action-fill-hover: var(--warning-weak-action-fill-hover); --action-fill-active: var(--warning-weak-action-fill-active); --action-text: var(--warning-weak-action-text); --action-border: var(--warning-weak-action-border); color: var(--warning-weak-text-base); }
.bg-warning-weak\/10 { background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent); }
.hover\:bg-warning-weak\/10:hover { background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent); }
.active\:bg-warning-weak\/10:active { background-color: color-mix(in srgb, var(--warning-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 10%, transparent); }
.bg-warning-weak\/30 { background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent); }
.hover\:bg-warning-weak\/30:hover { background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent); }
.active\:bg-warning-weak\/30:active { background-color: color-mix(in srgb, var(--warning-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 30%, transparent); }
.bg-warning-weak\/50 { background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent); }
.hover\:bg-warning-weak\/50:hover { background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent); }
.active\:bg-warning-weak\/50:active { background-color: color-mix(in srgb, var(--warning-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 50%, transparent); }
.bg-warning-weak\/70 { background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent); }
.hover\:bg-warning-weak\/70:hover { background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent); }
.active\:bg-warning-weak\/70:active { background-color: color-mix(in srgb, var(--warning-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 70%, transparent); }
.bg-warning-weak\/90 { background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent); }
.hover\:bg-warning-weak\/90:hover { background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent); }
.active\:bg-warning-weak\/90:active { background-color: color-mix(in srgb, var(--warning-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-weak) 90%, transparent); }
.bg-warning-base { background-color: var(--warning-base); --bg-color: var(--warning-base); --text-heading: var(--warning-base-text-heading); --text-base: var(--warning-base-text-base); --text-muted: var(--warning-base-text-muted); --link: var(--warning-base-link); --link-hover: var(--warning-base-link-hover); --link-active: var(--warning-base-link-active); --border: var(--warning-base-border); --action-fill: var(--warning-base-action-fill); --action-fill-hover: var(--warning-base-action-fill-hover); --action-fill-active: var(--warning-base-action-fill-active); --action-text: var(--warning-base-action-text); --action-border: var(--warning-base-action-border); color: var(--warning-base-text-base); }
.hover\:bg-warning-base:hover { background-color: var(--warning-base); --bg-color: var(--warning-base); --text-heading: var(--warning-base-text-heading); --text-base: var(--warning-base-text-base); --text-muted: var(--warning-base-text-muted); --link: var(--warning-base-link); --link-hover: var(--warning-base-link-hover); --link-active: var(--warning-base-link-active); --border: var(--warning-base-border); --action-fill: var(--warning-base-action-fill); --action-fill-hover: var(--warning-base-action-fill-hover); --action-fill-active: var(--warning-base-action-fill-active); --action-text: var(--warning-base-action-text); --action-border: var(--warning-base-action-border); color: var(--warning-base-text-base); }
.active\:bg-warning-base:active { background-color: var(--warning-base); --bg-color: var(--warning-base); --text-heading: var(--warning-base-text-heading); --text-base: var(--warning-base-text-base); --text-muted: var(--warning-base-text-muted); --link: var(--warning-base-link); --link-hover: var(--warning-base-link-hover); --link-active: var(--warning-base-link-active); --border: var(--warning-base-border); --action-fill: var(--warning-base-action-fill); --action-fill-hover: var(--warning-base-action-fill-hover); --action-fill-active: var(--warning-base-action-fill-active); --action-text: var(--warning-base-action-text); --action-border: var(--warning-base-action-border); color: var(--warning-base-text-base); }
.surface-warning-base { background-color: var(--warning-base); --bg-color: var(--warning-base); --text-heading: var(--warning-base-text-heading); --text-base: var(--warning-base-text-base); --text-muted: var(--warning-base-text-muted); --link: var(--warning-base-link); --link-hover: var(--warning-base-link-hover); --link-active: var(--warning-base-link-active); --border: var(--warning-base-border); --action-fill: var(--warning-base-action-fill); --action-fill-hover: var(--warning-base-action-fill-hover); --action-fill-active: var(--warning-base-action-fill-active); --action-text: var(--warning-base-action-text); --action-border: var(--warning-base-action-border); color: var(--warning-base-text-base); }
.hover\:surface-warning-base:hover { background-color: var(--warning-base); --bg-color: var(--warning-base); --text-heading: var(--warning-base-text-heading); --text-base: var(--warning-base-text-base); --text-muted: var(--warning-base-text-muted); --link: var(--warning-base-link); --link-hover: var(--warning-base-link-hover); --link-active: var(--warning-base-link-active); --border: var(--warning-base-border); --action-fill: var(--warning-base-action-fill); --action-fill-hover: var(--warning-base-action-fill-hover); --action-fill-active: var(--warning-base-action-fill-active); --action-text: var(--warning-base-action-text); --action-border: var(--warning-base-action-border); color: var(--warning-base-text-base); }
.active\:surface-warning-base:active { background-color: var(--warning-base); --bg-color: var(--warning-base); --text-heading: var(--warning-base-text-heading); --text-base: var(--warning-base-text-base); --text-muted: var(--warning-base-text-muted); --link: var(--warning-base-link); --link-hover: var(--warning-base-link-hover); --link-active: var(--warning-base-link-active); --border: var(--warning-base-border); --action-fill: var(--warning-base-action-fill); --action-fill-hover: var(--warning-base-action-fill-hover); --action-fill-active: var(--warning-base-action-fill-active); --action-text: var(--warning-base-action-text); --action-border: var(--warning-base-action-border); color: var(--warning-base-text-base); }
.bg-warning-base\/10 { background-color: color-mix(in srgb, var(--warning-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent); }
.hover\:bg-warning-base\/10:hover { background-color: color-mix(in srgb, var(--warning-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent); }
.active\:bg-warning-base\/10:active { background-color: color-mix(in srgb, var(--warning-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 10%, transparent); }
.bg-warning-base\/30 { background-color: color-mix(in srgb, var(--warning-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent); }
.hover\:bg-warning-base\/30:hover { background-color: color-mix(in srgb, var(--warning-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent); }
.active\:bg-warning-base\/30:active { background-color: color-mix(in srgb, var(--warning-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 30%, transparent); }
.bg-warning-base\/50 { background-color: color-mix(in srgb, var(--warning-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent); }
.hover\:bg-warning-base\/50:hover { background-color: color-mix(in srgb, var(--warning-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent); }
.active\:bg-warning-base\/50:active { background-color: color-mix(in srgb, var(--warning-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 50%, transparent); }
.bg-warning-base\/70 { background-color: color-mix(in srgb, var(--warning-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent); }
.hover\:bg-warning-base\/70:hover { background-color: color-mix(in srgb, var(--warning-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent); }
.active\:bg-warning-base\/70:active { background-color: color-mix(in srgb, var(--warning-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 70%, transparent); }
.bg-warning-base\/90 { background-color: color-mix(in srgb, var(--warning-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent); }
.hover\:bg-warning-base\/90:hover { background-color: color-mix(in srgb, var(--warning-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent); }
.active\:bg-warning-base\/90:active { background-color: color-mix(in srgb, var(--warning-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-base) 90%, transparent); }
.bg-warning-strong { background-color: var(--warning-strong); --bg-color: var(--warning-strong); --text-heading: var(--warning-strong-text-heading); --text-base: var(--warning-strong-text-base); --text-muted: var(--warning-strong-text-muted); --link: var(--warning-strong-link); --link-hover: var(--warning-strong-link-hover); --link-active: var(--warning-strong-link-active); --border: var(--warning-strong-border); --action-fill: var(--warning-strong-action-fill); --action-fill-hover: var(--warning-strong-action-fill-hover); --action-fill-active: var(--warning-strong-action-fill-active); --action-text: var(--warning-strong-action-text); --action-border: var(--warning-strong-action-border); color: var(--warning-strong-text-base); }
.hover\:bg-warning-strong:hover { background-color: var(--warning-strong); --bg-color: var(--warning-strong); --text-heading: var(--warning-strong-text-heading); --text-base: var(--warning-strong-text-base); --text-muted: var(--warning-strong-text-muted); --link: var(--warning-strong-link); --link-hover: var(--warning-strong-link-hover); --link-active: var(--warning-strong-link-active); --border: var(--warning-strong-border); --action-fill: var(--warning-strong-action-fill); --action-fill-hover: var(--warning-strong-action-fill-hover); --action-fill-active: var(--warning-strong-action-fill-active); --action-text: var(--warning-strong-action-text); --action-border: var(--warning-strong-action-border); color: var(--warning-strong-text-base); }
.active\:bg-warning-strong:active { background-color: var(--warning-strong); --bg-color: var(--warning-strong); --text-heading: var(--warning-strong-text-heading); --text-base: var(--warning-strong-text-base); --text-muted: var(--warning-strong-text-muted); --link: var(--warning-strong-link); --link-hover: var(--warning-strong-link-hover); --link-active: var(--warning-strong-link-active); --border: var(--warning-strong-border); --action-fill: var(--warning-strong-action-fill); --action-fill-hover: var(--warning-strong-action-fill-hover); --action-fill-active: var(--warning-strong-action-fill-active); --action-text: var(--warning-strong-action-text); --action-border: var(--warning-strong-action-border); color: var(--warning-strong-text-base); }
.surface-warning-strong { background-color: var(--warning-strong); --bg-color: var(--warning-strong); --text-heading: var(--warning-strong-text-heading); --text-base: var(--warning-strong-text-base); --text-muted: var(--warning-strong-text-muted); --link: var(--warning-strong-link); --link-hover: var(--warning-strong-link-hover); --link-active: var(--warning-strong-link-active); --border: var(--warning-strong-border); --action-fill: var(--warning-strong-action-fill); --action-fill-hover: var(--warning-strong-action-fill-hover); --action-fill-active: var(--warning-strong-action-fill-active); --action-text: var(--warning-strong-action-text); --action-border: var(--warning-strong-action-border); color: var(--warning-strong-text-base); }
.hover\:surface-warning-strong:hover { background-color: var(--warning-strong); --bg-color: var(--warning-strong); --text-heading: var(--warning-strong-text-heading); --text-base: var(--warning-strong-text-base); --text-muted: var(--warning-strong-text-muted); --link: var(--warning-strong-link); --link-hover: var(--warning-strong-link-hover); --link-active: var(--warning-strong-link-active); --border: var(--warning-strong-border); --action-fill: var(--warning-strong-action-fill); --action-fill-hover: var(--warning-strong-action-fill-hover); --action-fill-active: var(--warning-strong-action-fill-active); --action-text: var(--warning-strong-action-text); --action-border: var(--warning-strong-action-border); color: var(--warning-strong-text-base); }
.active\:surface-warning-strong:active { background-color: var(--warning-strong); --bg-color: var(--warning-strong); --text-heading: var(--warning-strong-text-heading); --text-base: var(--warning-strong-text-base); --text-muted: var(--warning-strong-text-muted); --link: var(--warning-strong-link); --link-hover: var(--warning-strong-link-hover); --link-active: var(--warning-strong-link-active); --border: var(--warning-strong-border); --action-fill: var(--warning-strong-action-fill); --action-fill-hover: var(--warning-strong-action-fill-hover); --action-fill-active: var(--warning-strong-action-fill-active); --action-text: var(--warning-strong-action-text); --action-border: var(--warning-strong-action-border); color: var(--warning-strong-text-base); }
.bg-warning-strong\/10 { background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent); }
.hover\:bg-warning-strong\/10:hover { background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent); }
.active\:bg-warning-strong\/10:active { background-color: color-mix(in srgb, var(--warning-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 10%, transparent); }
.bg-warning-strong\/30 { background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent); }
.hover\:bg-warning-strong\/30:hover { background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent); }
.active\:bg-warning-strong\/30:active { background-color: color-mix(in srgb, var(--warning-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 30%, transparent); }
.bg-warning-strong\/50 { background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent); }
.hover\:bg-warning-strong\/50:hover { background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent); }
.active\:bg-warning-strong\/50:active { background-color: color-mix(in srgb, var(--warning-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 50%, transparent); }
.bg-warning-strong\/70 { background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent); }
.hover\:bg-warning-strong\/70:hover { background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent); }
.active\:bg-warning-strong\/70:active { background-color: color-mix(in srgb, var(--warning-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 70%, transparent); }
.bg-warning-strong\/90 { background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent); }
.hover\:bg-warning-strong\/90:hover { background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent); }
.active\:bg-warning-strong\/90:active { background-color: color-mix(in srgb, var(--warning-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-strong) 90%, transparent); }
.bg-header { background-color: var(--header); --bg-color: var(--header); --text-heading: var(--header-text-heading); --text-base: var(--header-text-base); --text-muted: var(--header-text-muted); --link: var(--header-link); --link-hover: var(--header-link-hover); --link-active: var(--header-link-active); --border: var(--header-border); --action-fill: var(--header-action-fill); --action-fill-hover: var(--header-action-fill-hover); --action-fill-active: var(--header-action-fill-active); --action-text: var(--header-action-text); --action-border: var(--header-action-border); color: var(--header-text-base); }
.hover\:bg-header:hover { background-color: var(--header); --bg-color: var(--header); --text-heading: var(--header-text-heading); --text-base: var(--header-text-base); --text-muted: var(--header-text-muted); --link: var(--header-link); --link-hover: var(--header-link-hover); --link-active: var(--header-link-active); --border: var(--header-border); --action-fill: var(--header-action-fill); --action-fill-hover: var(--header-action-fill-hover); --action-fill-active: var(--header-action-fill-active); --action-text: var(--header-action-text); --action-border: var(--header-action-border); color: var(--header-text-base); }
.active\:bg-header:active { background-color: var(--header); --bg-color: var(--header); --text-heading: var(--header-text-heading); --text-base: var(--header-text-base); --text-muted: var(--header-text-muted); --link: var(--header-link); --link-hover: var(--header-link-hover); --link-active: var(--header-link-active); --border: var(--header-border); --action-fill: var(--header-action-fill); --action-fill-hover: var(--header-action-fill-hover); --action-fill-active: var(--header-action-fill-active); --action-text: var(--header-action-text); --action-border: var(--header-action-border); color: var(--header-text-base); }
.surface-header { background-color: var(--header); --bg-color: var(--header); --text-heading: var(--header-text-heading); --text-base: var(--header-text-base); --text-muted: var(--header-text-muted); --link: var(--header-link); --link-hover: var(--header-link-hover); --link-active: var(--header-link-active); --border: var(--header-border); --action-fill: var(--header-action-fill); --action-fill-hover: var(--header-action-fill-hover); --action-fill-active: var(--header-action-fill-active); --action-text: var(--header-action-text); --action-border: var(--header-action-border); color: var(--header-text-base); }
.hover\:surface-header:hover { background-color: var(--header); --bg-color: var(--header); --text-heading: var(--header-text-heading); --text-base: var(--header-text-base); --text-muted: var(--header-text-muted); --link: var(--header-link); --link-hover: var(--header-link-hover); --link-active: var(--header-link-active); --border: var(--header-border); --action-fill: var(--header-action-fill); --action-fill-hover: var(--header-action-fill-hover); --action-fill-active: var(--header-action-fill-active); --action-text: var(--header-action-text); --action-border: var(--header-action-border); color: var(--header-text-base); }
.active\:surface-header:active { background-color: var(--header); --bg-color: var(--header); --text-heading: var(--header-text-heading); --text-base: var(--header-text-base); --text-muted: var(--header-text-muted); --link: var(--header-link); --link-hover: var(--header-link-hover); --link-active: var(--header-link-active); --border: var(--header-border); --action-fill: var(--header-action-fill); --action-fill-hover: var(--header-action-fill-hover); --action-fill-active: var(--header-action-fill-active); --action-text: var(--header-action-text); --action-border: var(--header-action-border); color: var(--header-text-base); }
.bg-header\/10 { background-color: color-mix(in srgb, var(--header) 10%, transparent); --bg-color: color-mix(in srgb, var(--header) 10%, transparent); }
.hover\:bg-header\/10:hover { background-color: color-mix(in srgb, var(--header) 10%, transparent); --bg-color: color-mix(in srgb, var(--header) 10%, transparent); }
.active\:bg-header\/10:active { background-color: color-mix(in srgb, var(--header) 10%, transparent); --bg-color: color-mix(in srgb, var(--header) 10%, transparent); }
.bg-header\/30 { background-color: color-mix(in srgb, var(--header) 30%, transparent); --bg-color: color-mix(in srgb, var(--header) 30%, transparent); }
.hover\:bg-header\/30:hover { background-color: color-mix(in srgb, var(--header) 30%, transparent); --bg-color: color-mix(in srgb, var(--header) 30%, transparent); }
.active\:bg-header\/30:active { background-color: color-mix(in srgb, var(--header) 30%, transparent); --bg-color: color-mix(in srgb, var(--header) 30%, transparent); }
.bg-header\/50 { background-color: color-mix(in srgb, var(--header) 50%, transparent); --bg-color: color-mix(in srgb, var(--header) 50%, transparent); }
.hover\:bg-header\/50:hover { background-color: color-mix(in srgb, var(--header) 50%, transparent); --bg-color: color-mix(in srgb, var(--header) 50%, transparent); }
.active\:bg-header\/50:active { background-color: color-mix(in srgb, var(--header) 50%, transparent); --bg-color: color-mix(in srgb, var(--header) 50%, transparent); }
.bg-header\/70 { background-color: color-mix(in srgb, var(--header) 70%, transparent); --bg-color: color-mix(in srgb, var(--header) 70%, transparent); }
.hover\:bg-header\/70:hover { background-color: color-mix(in srgb, var(--header) 70%, transparent); --bg-color: color-mix(in srgb, var(--header) 70%, transparent); }
.active\:bg-header\/70:active { background-color: color-mix(in srgb, var(--header) 70%, transparent); --bg-color: color-mix(in srgb, var(--header) 70%, transparent); }
.bg-header\/90 { background-color: color-mix(in srgb, var(--header) 90%, transparent); --bg-color: color-mix(in srgb, var(--header) 90%, transparent); }
.hover\:bg-header\/90:hover { background-color: color-mix(in srgb, var(--header) 90%, transparent); --bg-color: color-mix(in srgb, var(--header) 90%, transparent); }
.active\:bg-header\/90:active { background-color: color-mix(in srgb, var(--header) 90%, transparent); --bg-color: color-mix(in srgb, var(--header) 90%, transparent); }
.bg-accent-base { background-color: var(--accent-base); --bg-color: var(--accent-base); --text-heading: var(--accent-base-text-heading); --text-base: var(--accent-base-text-base); --text-muted: var(--accent-base-text-muted); --link: var(--accent-base-link); --link-hover: var(--accent-base-link-hover); --link-active: var(--accent-base-link-active); --border: var(--accent-base-border); --action-fill: var(--accent-base-action-fill); --action-fill-hover: var(--accent-base-action-fill-hover); --action-fill-active: var(--accent-base-action-fill-active); --action-text: var(--accent-base-action-text); --action-border: var(--accent-base-action-border); color: var(--accent-base-text-base); }
.hover\:bg-accent-base:hover { background-color: var(--accent-base); --bg-color: var(--accent-base); --text-heading: var(--accent-base-text-heading); --text-base: var(--accent-base-text-base); --text-muted: var(--accent-base-text-muted); --link: var(--accent-base-link); --link-hover: var(--accent-base-link-hover); --link-active: var(--accent-base-link-active); --border: var(--accent-base-border); --action-fill: var(--accent-base-action-fill); --action-fill-hover: var(--accent-base-action-fill-hover); --action-fill-active: var(--accent-base-action-fill-active); --action-text: var(--accent-base-action-text); --action-border: var(--accent-base-action-border); color: var(--accent-base-text-base); }
.active\:bg-accent-base:active { background-color: var(--accent-base); --bg-color: var(--accent-base); --text-heading: var(--accent-base-text-heading); --text-base: var(--accent-base-text-base); --text-muted: var(--accent-base-text-muted); --link: var(--accent-base-link); --link-hover: var(--accent-base-link-hover); --link-active: var(--accent-base-link-active); --border: var(--accent-base-border); --action-fill: var(--accent-base-action-fill); --action-fill-hover: var(--accent-base-action-fill-hover); --action-fill-active: var(--accent-base-action-fill-active); --action-text: var(--accent-base-action-text); --action-border: var(--accent-base-action-border); color: var(--accent-base-text-base); }
.surface-accent-base { background-color: var(--accent-base); --bg-color: var(--accent-base); --text-heading: var(--accent-base-text-heading); --text-base: var(--accent-base-text-base); --text-muted: var(--accent-base-text-muted); --link: var(--accent-base-link); --link-hover: var(--accent-base-link-hover); --link-active: var(--accent-base-link-active); --border: var(--accent-base-border); --action-fill: var(--accent-base-action-fill); --action-fill-hover: var(--accent-base-action-fill-hover); --action-fill-active: var(--accent-base-action-fill-active); --action-text: var(--accent-base-action-text); --action-border: var(--accent-base-action-border); color: var(--accent-base-text-base); }
.hover\:surface-accent-base:hover { background-color: var(--accent-base); --bg-color: var(--accent-base); --text-heading: var(--accent-base-text-heading); --text-base: var(--accent-base-text-base); --text-muted: var(--accent-base-text-muted); --link: var(--accent-base-link); --link-hover: var(--accent-base-link-hover); --link-active: var(--accent-base-link-active); --border: var(--accent-base-border); --action-fill: var(--accent-base-action-fill); --action-fill-hover: var(--accent-base-action-fill-hover); --action-fill-active: var(--accent-base-action-fill-active); --action-text: var(--accent-base-action-text); --action-border: var(--accent-base-action-border); color: var(--accent-base-text-base); }
.active\:surface-accent-base:active { background-color: var(--accent-base); --bg-color: var(--accent-base); --text-heading: var(--accent-base-text-heading); --text-base: var(--accent-base-text-base); --text-muted: var(--accent-base-text-muted); --link: var(--accent-base-link); --link-hover: var(--accent-base-link-hover); --link-active: var(--accent-base-link-active); --border: var(--accent-base-border); --action-fill: var(--accent-base-action-fill); --action-fill-hover: var(--accent-base-action-fill-hover); --action-fill-active: var(--accent-base-action-fill-active); --action-text: var(--accent-base-action-text); --action-border: var(--accent-base-action-border); color: var(--accent-base-text-base); }
.bg-accent-base\/10 { background-color: color-mix(in srgb, var(--accent-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent); }
.hover\:bg-accent-base\/10:hover { background-color: color-mix(in srgb, var(--accent-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent); }
.active\:bg-accent-base\/10:active { background-color: color-mix(in srgb, var(--accent-base) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 10%, transparent); }
.bg-accent-base\/30 { background-color: color-mix(in srgb, var(--accent-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent); }
.hover\:bg-accent-base\/30:hover { background-color: color-mix(in srgb, var(--accent-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent); }
.active\:bg-accent-base\/30:active { background-color: color-mix(in srgb, var(--accent-base) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 30%, transparent); }
.bg-accent-base\/50 { background-color: color-mix(in srgb, var(--accent-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent); }
.hover\:bg-accent-base\/50:hover { background-color: color-mix(in srgb, var(--accent-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent); }
.active\:bg-accent-base\/50:active { background-color: color-mix(in srgb, var(--accent-base) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 50%, transparent); }
.bg-accent-base\/70 { background-color: color-mix(in srgb, var(--accent-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent); }
.hover\:bg-accent-base\/70:hover { background-color: color-mix(in srgb, var(--accent-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent); }
.active\:bg-accent-base\/70:active { background-color: color-mix(in srgb, var(--accent-base) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 70%, transparent); }
.bg-accent-base\/90 { background-color: color-mix(in srgb, var(--accent-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent); }
.hover\:bg-accent-base\/90:hover { background-color: color-mix(in srgb, var(--accent-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent); }
.active\:bg-accent-base\/90:active { background-color: color-mix(in srgb, var(--accent-base) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-base) 90%, transparent); }
.bg-accent-soft { background-color: var(--accent-soft); --bg-color: var(--accent-soft); --text-heading: var(--accent-soft-text-heading); --text-base: var(--accent-soft-text-base); --text-muted: var(--accent-soft-text-muted); --link: var(--accent-soft-link); --link-hover: var(--accent-soft-link-hover); --link-active: var(--accent-soft-link-active); --border: var(--accent-soft-border); --action-fill: var(--accent-soft-action-fill); --action-fill-hover: var(--accent-soft-action-fill-hover); --action-fill-active: var(--accent-soft-action-fill-active); --action-text: var(--accent-soft-action-text); --action-border: var(--accent-soft-action-border); color: var(--accent-soft-text-base); }
.hover\:bg-accent-soft:hover { background-color: var(--accent-soft); --bg-color: var(--accent-soft); --text-heading: var(--accent-soft-text-heading); --text-base: var(--accent-soft-text-base); --text-muted: var(--accent-soft-text-muted); --link: var(--accent-soft-link); --link-hover: var(--accent-soft-link-hover); --link-active: var(--accent-soft-link-active); --border: var(--accent-soft-border); --action-fill: var(--accent-soft-action-fill); --action-fill-hover: var(--accent-soft-action-fill-hover); --action-fill-active: var(--accent-soft-action-fill-active); --action-text: var(--accent-soft-action-text); --action-border: var(--accent-soft-action-border); color: var(--accent-soft-text-base); }
.active\:bg-accent-soft:active { background-color: var(--accent-soft); --bg-color: var(--accent-soft); --text-heading: var(--accent-soft-text-heading); --text-base: var(--accent-soft-text-base); --text-muted: var(--accent-soft-text-muted); --link: var(--accent-soft-link); --link-hover: var(--accent-soft-link-hover); --link-active: var(--accent-soft-link-active); --border: var(--accent-soft-border); --action-fill: var(--accent-soft-action-fill); --action-fill-hover: var(--accent-soft-action-fill-hover); --action-fill-active: var(--accent-soft-action-fill-active); --action-text: var(--accent-soft-action-text); --action-border: var(--accent-soft-action-border); color: var(--accent-soft-text-base); }
.surface-accent-soft { background-color: var(--accent-soft); --bg-color: var(--accent-soft); --text-heading: var(--accent-soft-text-heading); --text-base: var(--accent-soft-text-base); --text-muted: var(--accent-soft-text-muted); --link: var(--accent-soft-link); --link-hover: var(--accent-soft-link-hover); --link-active: var(--accent-soft-link-active); --border: var(--accent-soft-border); --action-fill: var(--accent-soft-action-fill); --action-fill-hover: var(--accent-soft-action-fill-hover); --action-fill-active: var(--accent-soft-action-fill-active); --action-text: var(--accent-soft-action-text); --action-border: var(--accent-soft-action-border); color: var(--accent-soft-text-base); }
.hover\:surface-accent-soft:hover { background-color: var(--accent-soft); --bg-color: var(--accent-soft); --text-heading: var(--accent-soft-text-heading); --text-base: var(--accent-soft-text-base); --text-muted: var(--accent-soft-text-muted); --link: var(--accent-soft-link); --link-hover: var(--accent-soft-link-hover); --link-active: var(--accent-soft-link-active); --border: var(--accent-soft-border); --action-fill: var(--accent-soft-action-fill); --action-fill-hover: var(--accent-soft-action-fill-hover); --action-fill-active: var(--accent-soft-action-fill-active); --action-text: var(--accent-soft-action-text); --action-border: var(--accent-soft-action-border); color: var(--accent-soft-text-base); }
.active\:surface-accent-soft:active { background-color: var(--accent-soft); --bg-color: var(--accent-soft); --text-heading: var(--accent-soft-text-heading); --text-base: var(--accent-soft-text-base); --text-muted: var(--accent-soft-text-muted); --link: var(--accent-soft-link); --link-hover: var(--accent-soft-link-hover); --link-active: var(--accent-soft-link-active); --border: var(--accent-soft-border); --action-fill: var(--accent-soft-action-fill); --action-fill-hover: var(--accent-soft-action-fill-hover); --action-fill-active: var(--accent-soft-action-fill-active); --action-text: var(--accent-soft-action-text); --action-border: var(--accent-soft-action-border); color: var(--accent-soft-text-base); }
.bg-accent-soft\/10 { background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent); }
.hover\:bg-accent-soft\/10:hover { background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent); }
.active\:bg-accent-soft\/10:active { background-color: color-mix(in srgb, var(--accent-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 10%, transparent); }
.bg-accent-soft\/30 { background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.hover\:bg-accent-soft\/30:hover { background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.active\:bg-accent-soft\/30:active { background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.bg-accent-soft\/50 { background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.hover\:bg-accent-soft\/50:hover { background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.active\:bg-accent-soft\/50:active { background-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.bg-accent-soft\/70 { background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.hover\:bg-accent-soft\/70:hover { background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.active\:bg-accent-soft\/70:active { background-color: color-mix(in srgb, var(--accent-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.bg-accent-soft\/90 { background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent); }
.hover\:bg-accent-soft\/90:hover { background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent); }
.active\:bg-accent-soft\/90:active { background-color: color-mix(in srgb, var(--accent-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-soft) 90%, transparent); }
.bg-accent-strong { background-color: var(--accent-strong); --bg-color: var(--accent-strong); --text-heading: var(--accent-strong-text-heading); --text-base: var(--accent-strong-text-base); --text-muted: var(--accent-strong-text-muted); --link: var(--accent-strong-link); --link-hover: var(--accent-strong-link-hover); --link-active: var(--accent-strong-link-active); --border: var(--accent-strong-border); --action-fill: var(--accent-strong-action-fill); --action-fill-hover: var(--accent-strong-action-fill-hover); --action-fill-active: var(--accent-strong-action-fill-active); --action-text: var(--accent-strong-action-text); --action-border: var(--accent-strong-action-border); color: var(--accent-strong-text-base); }
.hover\:bg-accent-strong:hover { background-color: var(--accent-strong); --bg-color: var(--accent-strong); --text-heading: var(--accent-strong-text-heading); --text-base: var(--accent-strong-text-base); --text-muted: var(--accent-strong-text-muted); --link: var(--accent-strong-link); --link-hover: var(--accent-strong-link-hover); --link-active: var(--accent-strong-link-active); --border: var(--accent-strong-border); --action-fill: var(--accent-strong-action-fill); --action-fill-hover: var(--accent-strong-action-fill-hover); --action-fill-active: var(--accent-strong-action-fill-active); --action-text: var(--accent-strong-action-text); --action-border: var(--accent-strong-action-border); color: var(--accent-strong-text-base); }
.active\:bg-accent-strong:active { background-color: var(--accent-strong); --bg-color: var(--accent-strong); --text-heading: var(--accent-strong-text-heading); --text-base: var(--accent-strong-text-base); --text-muted: var(--accent-strong-text-muted); --link: var(--accent-strong-link); --link-hover: var(--accent-strong-link-hover); --link-active: var(--accent-strong-link-active); --border: var(--accent-strong-border); --action-fill: var(--accent-strong-action-fill); --action-fill-hover: var(--accent-strong-action-fill-hover); --action-fill-active: var(--accent-strong-action-fill-active); --action-text: var(--accent-strong-action-text); --action-border: var(--accent-strong-action-border); color: var(--accent-strong-text-base); }
.surface-accent-strong { background-color: var(--accent-strong); --bg-color: var(--accent-strong); --text-heading: var(--accent-strong-text-heading); --text-base: var(--accent-strong-text-base); --text-muted: var(--accent-strong-text-muted); --link: var(--accent-strong-link); --link-hover: var(--accent-strong-link-hover); --link-active: var(--accent-strong-link-active); --border: var(--accent-strong-border); --action-fill: var(--accent-strong-action-fill); --action-fill-hover: var(--accent-strong-action-fill-hover); --action-fill-active: var(--accent-strong-action-fill-active); --action-text: var(--accent-strong-action-text); --action-border: var(--accent-strong-action-border); color: var(--accent-strong-text-base); }
.hover\:surface-accent-strong:hover { background-color: var(--accent-strong); --bg-color: var(--accent-strong); --text-heading: var(--accent-strong-text-heading); --text-base: var(--accent-strong-text-base); --text-muted: var(--accent-strong-text-muted); --link: var(--accent-strong-link); --link-hover: var(--accent-strong-link-hover); --link-active: var(--accent-strong-link-active); --border: var(--accent-strong-border); --action-fill: var(--accent-strong-action-fill); --action-fill-hover: var(--accent-strong-action-fill-hover); --action-fill-active: var(--accent-strong-action-fill-active); --action-text: var(--accent-strong-action-text); --action-border: var(--accent-strong-action-border); color: var(--accent-strong-text-base); }
.active\:surface-accent-strong:active { background-color: var(--accent-strong); --bg-color: var(--accent-strong); --text-heading: var(--accent-strong-text-heading); --text-base: var(--accent-strong-text-base); --text-muted: var(--accent-strong-text-muted); --link: var(--accent-strong-link); --link-hover: var(--accent-strong-link-hover); --link-active: var(--accent-strong-link-active); --border: var(--accent-strong-border); --action-fill: var(--accent-strong-action-fill); --action-fill-hover: var(--accent-strong-action-fill-hover); --action-fill-active: var(--accent-strong-action-fill-active); --action-text: var(--accent-strong-action-text); --action-border: var(--accent-strong-action-border); color: var(--accent-strong-text-base); }
.bg-accent-strong\/10 { background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); }
.hover\:bg-accent-strong\/10:hover { background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); }
.active\:bg-accent-strong\/10:active { background-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 10%, transparent); }
.bg-accent-strong\/30 { background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); }
.hover\:bg-accent-strong\/30:hover { background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); }
.active\:bg-accent-strong\/30:active { background-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 30%, transparent); }
.bg-accent-strong\/50 { background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent); }
.hover\:bg-accent-strong\/50:hover { background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent); }
.active\:bg-accent-strong\/50:active { background-color: color-mix(in srgb, var(--accent-strong) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 50%, transparent); }
.bg-accent-strong\/70 { background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent); }
.hover\:bg-accent-strong\/70:hover { background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent); }
.active\:bg-accent-strong\/70:active { background-color: color-mix(in srgb, var(--accent-strong) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 70%, transparent); }
.bg-accent-strong\/90 { background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent); }
.hover\:bg-accent-strong\/90:hover { background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent); }
.active\:bg-accent-strong\/90:active { background-color: color-mix(in srgb, var(--accent-strong) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-strong) 90%, transparent); }
.bg-accent-weak { background-color: var(--accent-weak); --bg-color: var(--accent-weak); --text-heading: var(--accent-weak-text-heading); --text-base: var(--accent-weak-text-base); --text-muted: var(--accent-weak-text-muted); --link: var(--accent-weak-link); --link-hover: var(--accent-weak-link-hover); --link-active: var(--accent-weak-link-active); --border: var(--accent-weak-border); --action-fill: var(--accent-weak-action-fill); --action-fill-hover: var(--accent-weak-action-fill-hover); --action-fill-active: var(--accent-weak-action-fill-active); --action-text: var(--accent-weak-action-text); --action-border: var(--accent-weak-action-border); color: var(--accent-weak-text-base); }
.hover\:bg-accent-weak:hover { background-color: var(--accent-weak); --bg-color: var(--accent-weak); --text-heading: var(--accent-weak-text-heading); --text-base: var(--accent-weak-text-base); --text-muted: var(--accent-weak-text-muted); --link: var(--accent-weak-link); --link-hover: var(--accent-weak-link-hover); --link-active: var(--accent-weak-link-active); --border: var(--accent-weak-border); --action-fill: var(--accent-weak-action-fill); --action-fill-hover: var(--accent-weak-action-fill-hover); --action-fill-active: var(--accent-weak-action-fill-active); --action-text: var(--accent-weak-action-text); --action-border: var(--accent-weak-action-border); color: var(--accent-weak-text-base); }
.active\:bg-accent-weak:active { background-color: var(--accent-weak); --bg-color: var(--accent-weak); --text-heading: var(--accent-weak-text-heading); --text-base: var(--accent-weak-text-base); --text-muted: var(--accent-weak-text-muted); --link: var(--accent-weak-link); --link-hover: var(--accent-weak-link-hover); --link-active: var(--accent-weak-link-active); --border: var(--accent-weak-border); --action-fill: var(--accent-weak-action-fill); --action-fill-hover: var(--accent-weak-action-fill-hover); --action-fill-active: var(--accent-weak-action-fill-active); --action-text: var(--accent-weak-action-text); --action-border: var(--accent-weak-action-border); color: var(--accent-weak-text-base); }
.surface-accent-weak { background-color: var(--accent-weak); --bg-color: var(--accent-weak); --text-heading: var(--accent-weak-text-heading); --text-base: var(--accent-weak-text-base); --text-muted: var(--accent-weak-text-muted); --link: var(--accent-weak-link); --link-hover: var(--accent-weak-link-hover); --link-active: var(--accent-weak-link-active); --border: var(--accent-weak-border); --action-fill: var(--accent-weak-action-fill); --action-fill-hover: var(--accent-weak-action-fill-hover); --action-fill-active: var(--accent-weak-action-fill-active); --action-text: var(--accent-weak-action-text); --action-border: var(--accent-weak-action-border); color: var(--accent-weak-text-base); }
.hover\:surface-accent-weak:hover { background-color: var(--accent-weak); --bg-color: var(--accent-weak); --text-heading: var(--accent-weak-text-heading); --text-base: var(--accent-weak-text-base); --text-muted: var(--accent-weak-text-muted); --link: var(--accent-weak-link); --link-hover: var(--accent-weak-link-hover); --link-active: var(--accent-weak-link-active); --border: var(--accent-weak-border); --action-fill: var(--accent-weak-action-fill); --action-fill-hover: var(--accent-weak-action-fill-hover); --action-fill-active: var(--accent-weak-action-fill-active); --action-text: var(--accent-weak-action-text); --action-border: var(--accent-weak-action-border); color: var(--accent-weak-text-base); }
.active\:surface-accent-weak:active { background-color: var(--accent-weak); --bg-color: var(--accent-weak); --text-heading: var(--accent-weak-text-heading); --text-base: var(--accent-weak-text-base); --text-muted: var(--accent-weak-text-muted); --link: var(--accent-weak-link); --link-hover: var(--accent-weak-link-hover); --link-active: var(--accent-weak-link-active); --border: var(--accent-weak-border); --action-fill: var(--accent-weak-action-fill); --action-fill-hover: var(--accent-weak-action-fill-hover); --action-fill-active: var(--accent-weak-action-fill-active); --action-text: var(--accent-weak-action-text); --action-border: var(--accent-weak-action-border); color: var(--accent-weak-text-base); }
.bg-accent-weak\/10 { background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent); }
.hover\:bg-accent-weak\/10:hover { background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent); }
.active\:bg-accent-weak\/10:active { background-color: color-mix(in srgb, var(--accent-weak) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 10%, transparent); }
.bg-accent-weak\/30 { background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent); }
.hover\:bg-accent-weak\/30:hover { background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent); }
.active\:bg-accent-weak\/30:active { background-color: color-mix(in srgb, var(--accent-weak) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 30%, transparent); }
.bg-accent-weak\/50 { background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent); }
.hover\:bg-accent-weak\/50:hover { background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent); }
.active\:bg-accent-weak\/50:active { background-color: color-mix(in srgb, var(--accent-weak) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 50%, transparent); }
.bg-accent-weak\/70 { background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent); }
.hover\:bg-accent-weak\/70:hover { background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent); }
.active\:bg-accent-weak\/70:active { background-color: color-mix(in srgb, var(--accent-weak) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 70%, transparent); }
.bg-accent-weak\/90 { background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent); }
.hover\:bg-accent-weak\/90:hover { background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent); }
.active\:bg-accent-weak\/90:active { background-color: color-mix(in srgb, var(--accent-weak) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-weak) 90%, transparent); }
.bg-error-soft { background-color: var(--error-soft); --bg-color: var(--error-soft); --text-heading: var(--error-soft-text-heading); --text-base: var(--error-soft-text-base); --text-muted: var(--error-soft-text-muted); --link: var(--error-soft-link); --link-hover: var(--error-soft-link-hover); --link-active: var(--error-soft-link-active); --border: var(--error-soft-border); --action-fill: var(--error-soft-action-fill); --action-fill-hover: var(--error-soft-action-fill-hover); --action-fill-active: var(--error-soft-action-fill-active); --action-text: var(--error-soft-action-text); --action-border: var(--error-soft-action-border); color: var(--error-soft-text-base); }
.hover\:bg-error-soft:hover { background-color: var(--error-soft); --bg-color: var(--error-soft); --text-heading: var(--error-soft-text-heading); --text-base: var(--error-soft-text-base); --text-muted: var(--error-soft-text-muted); --link: var(--error-soft-link); --link-hover: var(--error-soft-link-hover); --link-active: var(--error-soft-link-active); --border: var(--error-soft-border); --action-fill: var(--error-soft-action-fill); --action-fill-hover: var(--error-soft-action-fill-hover); --action-fill-active: var(--error-soft-action-fill-active); --action-text: var(--error-soft-action-text); --action-border: var(--error-soft-action-border); color: var(--error-soft-text-base); }
.active\:bg-error-soft:active { background-color: var(--error-soft); --bg-color: var(--error-soft); --text-heading: var(--error-soft-text-heading); --text-base: var(--error-soft-text-base); --text-muted: var(--error-soft-text-muted); --link: var(--error-soft-link); --link-hover: var(--error-soft-link-hover); --link-active: var(--error-soft-link-active); --border: var(--error-soft-border); --action-fill: var(--error-soft-action-fill); --action-fill-hover: var(--error-soft-action-fill-hover); --action-fill-active: var(--error-soft-action-fill-active); --action-text: var(--error-soft-action-text); --action-border: var(--error-soft-action-border); color: var(--error-soft-text-base); }
.surface-error-soft { background-color: var(--error-soft); --bg-color: var(--error-soft); --text-heading: var(--error-soft-text-heading); --text-base: var(--error-soft-text-base); --text-muted: var(--error-soft-text-muted); --link: var(--error-soft-link); --link-hover: var(--error-soft-link-hover); --link-active: var(--error-soft-link-active); --border: var(--error-soft-border); --action-fill: var(--error-soft-action-fill); --action-fill-hover: var(--error-soft-action-fill-hover); --action-fill-active: var(--error-soft-action-fill-active); --action-text: var(--error-soft-action-text); --action-border: var(--error-soft-action-border); color: var(--error-soft-text-base); }
.hover\:surface-error-soft:hover { background-color: var(--error-soft); --bg-color: var(--error-soft); --text-heading: var(--error-soft-text-heading); --text-base: var(--error-soft-text-base); --text-muted: var(--error-soft-text-muted); --link: var(--error-soft-link); --link-hover: var(--error-soft-link-hover); --link-active: var(--error-soft-link-active); --border: var(--error-soft-border); --action-fill: var(--error-soft-action-fill); --action-fill-hover: var(--error-soft-action-fill-hover); --action-fill-active: var(--error-soft-action-fill-active); --action-text: var(--error-soft-action-text); --action-border: var(--error-soft-action-border); color: var(--error-soft-text-base); }
.active\:surface-error-soft:active { background-color: var(--error-soft); --bg-color: var(--error-soft); --text-heading: var(--error-soft-text-heading); --text-base: var(--error-soft-text-base); --text-muted: var(--error-soft-text-muted); --link: var(--error-soft-link); --link-hover: var(--error-soft-link-hover); --link-active: var(--error-soft-link-active); --border: var(--error-soft-border); --action-fill: var(--error-soft-action-fill); --action-fill-hover: var(--error-soft-action-fill-hover); --action-fill-active: var(--error-soft-action-fill-active); --action-text: var(--error-soft-action-text); --action-border: var(--error-soft-action-border); color: var(--error-soft-text-base); }
.bg-error-soft\/10 { background-color: color-mix(in srgb, var(--error-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent); }
.hover\:bg-error-soft\/10:hover { background-color: color-mix(in srgb, var(--error-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent); }
.active\:bg-error-soft\/10:active { background-color: color-mix(in srgb, var(--error-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 10%, transparent); }
.bg-error-soft\/30 { background-color: color-mix(in srgb, var(--error-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent); }
.hover\:bg-error-soft\/30:hover { background-color: color-mix(in srgb, var(--error-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent); }
.active\:bg-error-soft\/30:active { background-color: color-mix(in srgb, var(--error-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 30%, transparent); }
.bg-error-soft\/50 { background-color: color-mix(in srgb, var(--error-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent); }
.hover\:bg-error-soft\/50:hover { background-color: color-mix(in srgb, var(--error-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent); }
.active\:bg-error-soft\/50:active { background-color: color-mix(in srgb, var(--error-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 50%, transparent); }
.bg-error-soft\/70 { background-color: color-mix(in srgb, var(--error-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent); }
.hover\:bg-error-soft\/70:hover { background-color: color-mix(in srgb, var(--error-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent); }
.active\:bg-error-soft\/70:active { background-color: color-mix(in srgb, var(--error-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 70%, transparent); }
.bg-error-soft\/90 { background-color: color-mix(in srgb, var(--error-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent); }
.hover\:bg-error-soft\/90:hover { background-color: color-mix(in srgb, var(--error-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent); }
.active\:bg-error-soft\/90:active { background-color: color-mix(in srgb, var(--error-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-soft) 90%, transparent); }
.bg-success-soft { background-color: var(--success-soft); --bg-color: var(--success-soft); --text-heading: var(--success-soft-text-heading); --text-base: var(--success-soft-text-base); --text-muted: var(--success-soft-text-muted); --link: var(--success-soft-link); --link-hover: var(--success-soft-link-hover); --link-active: var(--success-soft-link-active); --border: var(--success-soft-border); --action-fill: var(--success-soft-action-fill); --action-fill-hover: var(--success-soft-action-fill-hover); --action-fill-active: var(--success-soft-action-fill-active); --action-text: var(--success-soft-action-text); --action-border: var(--success-soft-action-border); color: var(--success-soft-text-base); }
.hover\:bg-success-soft:hover { background-color: var(--success-soft); --bg-color: var(--success-soft); --text-heading: var(--success-soft-text-heading); --text-base: var(--success-soft-text-base); --text-muted: var(--success-soft-text-muted); --link: var(--success-soft-link); --link-hover: var(--success-soft-link-hover); --link-active: var(--success-soft-link-active); --border: var(--success-soft-border); --action-fill: var(--success-soft-action-fill); --action-fill-hover: var(--success-soft-action-fill-hover); --action-fill-active: var(--success-soft-action-fill-active); --action-text: var(--success-soft-action-text); --action-border: var(--success-soft-action-border); color: var(--success-soft-text-base); }
.active\:bg-success-soft:active { background-color: var(--success-soft); --bg-color: var(--success-soft); --text-heading: var(--success-soft-text-heading); --text-base: var(--success-soft-text-base); --text-muted: var(--success-soft-text-muted); --link: var(--success-soft-link); --link-hover: var(--success-soft-link-hover); --link-active: var(--success-soft-link-active); --border: var(--success-soft-border); --action-fill: var(--success-soft-action-fill); --action-fill-hover: var(--success-soft-action-fill-hover); --action-fill-active: var(--success-soft-action-fill-active); --action-text: var(--success-soft-action-text); --action-border: var(--success-soft-action-border); color: var(--success-soft-text-base); }
.surface-success-soft { background-color: var(--success-soft); --bg-color: var(--success-soft); --text-heading: var(--success-soft-text-heading); --text-base: var(--success-soft-text-base); --text-muted: var(--success-soft-text-muted); --link: var(--success-soft-link); --link-hover: var(--success-soft-link-hover); --link-active: var(--success-soft-link-active); --border: var(--success-soft-border); --action-fill: var(--success-soft-action-fill); --action-fill-hover: var(--success-soft-action-fill-hover); --action-fill-active: var(--success-soft-action-fill-active); --action-text: var(--success-soft-action-text); --action-border: var(--success-soft-action-border); color: var(--success-soft-text-base); }
.hover\:surface-success-soft:hover { background-color: var(--success-soft); --bg-color: var(--success-soft); --text-heading: var(--success-soft-text-heading); --text-base: var(--success-soft-text-base); --text-muted: var(--success-soft-text-muted); --link: var(--success-soft-link); --link-hover: var(--success-soft-link-hover); --link-active: var(--success-soft-link-active); --border: var(--success-soft-border); --action-fill: var(--success-soft-action-fill); --action-fill-hover: var(--success-soft-action-fill-hover); --action-fill-active: var(--success-soft-action-fill-active); --action-text: var(--success-soft-action-text); --action-border: var(--success-soft-action-border); color: var(--success-soft-text-base); }
.active\:surface-success-soft:active { background-color: var(--success-soft); --bg-color: var(--success-soft); --text-heading: var(--success-soft-text-heading); --text-base: var(--success-soft-text-base); --text-muted: var(--success-soft-text-muted); --link: var(--success-soft-link); --link-hover: var(--success-soft-link-hover); --link-active: var(--success-soft-link-active); --border: var(--success-soft-border); --action-fill: var(--success-soft-action-fill); --action-fill-hover: var(--success-soft-action-fill-hover); --action-fill-active: var(--success-soft-action-fill-active); --action-text: var(--success-soft-action-text); --action-border: var(--success-soft-action-border); color: var(--success-soft-text-base); }
.bg-success-soft\/10 { background-color: color-mix(in srgb, var(--success-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent); }
.hover\:bg-success-soft\/10:hover { background-color: color-mix(in srgb, var(--success-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent); }
.active\:bg-success-soft\/10:active { background-color: color-mix(in srgb, var(--success-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 10%, transparent); }
.bg-success-soft\/30 { background-color: color-mix(in srgb, var(--success-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent); }
.hover\:bg-success-soft\/30:hover { background-color: color-mix(in srgb, var(--success-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent); }
.active\:bg-success-soft\/30:active { background-color: color-mix(in srgb, var(--success-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 30%, transparent); }
.bg-success-soft\/50 { background-color: color-mix(in srgb, var(--success-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent); }
.hover\:bg-success-soft\/50:hover { background-color: color-mix(in srgb, var(--success-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent); }
.active\:bg-success-soft\/50:active { background-color: color-mix(in srgb, var(--success-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 50%, transparent); }
.bg-success-soft\/70 { background-color: color-mix(in srgb, var(--success-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent); }
.hover\:bg-success-soft\/70:hover { background-color: color-mix(in srgb, var(--success-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent); }
.active\:bg-success-soft\/70:active { background-color: color-mix(in srgb, var(--success-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 70%, transparent); }
.bg-success-soft\/90 { background-color: color-mix(in srgb, var(--success-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent); }
.hover\:bg-success-soft\/90:hover { background-color: color-mix(in srgb, var(--success-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent); }
.active\:bg-success-soft\/90:active { background-color: color-mix(in srgb, var(--success-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-soft) 90%, transparent); }
.bg-info-soft { background-color: var(--info-soft); --bg-color: var(--info-soft); --text-heading: var(--info-soft-text-heading); --text-base: var(--info-soft-text-base); --text-muted: var(--info-soft-text-muted); --link: var(--info-soft-link); --link-hover: var(--info-soft-link-hover); --link-active: var(--info-soft-link-active); --border: var(--info-soft-border); --action-fill: var(--info-soft-action-fill); --action-fill-hover: var(--info-soft-action-fill-hover); --action-fill-active: var(--info-soft-action-fill-active); --action-text: var(--info-soft-action-text); --action-border: var(--info-soft-action-border); color: var(--info-soft-text-base); }
.hover\:bg-info-soft:hover { background-color: var(--info-soft); --bg-color: var(--info-soft); --text-heading: var(--info-soft-text-heading); --text-base: var(--info-soft-text-base); --text-muted: var(--info-soft-text-muted); --link: var(--info-soft-link); --link-hover: var(--info-soft-link-hover); --link-active: var(--info-soft-link-active); --border: var(--info-soft-border); --action-fill: var(--info-soft-action-fill); --action-fill-hover: var(--info-soft-action-fill-hover); --action-fill-active: var(--info-soft-action-fill-active); --action-text: var(--info-soft-action-text); --action-border: var(--info-soft-action-border); color: var(--info-soft-text-base); }
.active\:bg-info-soft:active { background-color: var(--info-soft); --bg-color: var(--info-soft); --text-heading: var(--info-soft-text-heading); --text-base: var(--info-soft-text-base); --text-muted: var(--info-soft-text-muted); --link: var(--info-soft-link); --link-hover: var(--info-soft-link-hover); --link-active: var(--info-soft-link-active); --border: var(--info-soft-border); --action-fill: var(--info-soft-action-fill); --action-fill-hover: var(--info-soft-action-fill-hover); --action-fill-active: var(--info-soft-action-fill-active); --action-text: var(--info-soft-action-text); --action-border: var(--info-soft-action-border); color: var(--info-soft-text-base); }
.surface-info-soft { background-color: var(--info-soft); --bg-color: var(--info-soft); --text-heading: var(--info-soft-text-heading); --text-base: var(--info-soft-text-base); --text-muted: var(--info-soft-text-muted); --link: var(--info-soft-link); --link-hover: var(--info-soft-link-hover); --link-active: var(--info-soft-link-active); --border: var(--info-soft-border); --action-fill: var(--info-soft-action-fill); --action-fill-hover: var(--info-soft-action-fill-hover); --action-fill-active: var(--info-soft-action-fill-active); --action-text: var(--info-soft-action-text); --action-border: var(--info-soft-action-border); color: var(--info-soft-text-base); }
.hover\:surface-info-soft:hover { background-color: var(--info-soft); --bg-color: var(--info-soft); --text-heading: var(--info-soft-text-heading); --text-base: var(--info-soft-text-base); --text-muted: var(--info-soft-text-muted); --link: var(--info-soft-link); --link-hover: var(--info-soft-link-hover); --link-active: var(--info-soft-link-active); --border: var(--info-soft-border); --action-fill: var(--info-soft-action-fill); --action-fill-hover: var(--info-soft-action-fill-hover); --action-fill-active: var(--info-soft-action-fill-active); --action-text: var(--info-soft-action-text); --action-border: var(--info-soft-action-border); color: var(--info-soft-text-base); }
.active\:surface-info-soft:active { background-color: var(--info-soft); --bg-color: var(--info-soft); --text-heading: var(--info-soft-text-heading); --text-base: var(--info-soft-text-base); --text-muted: var(--info-soft-text-muted); --link: var(--info-soft-link); --link-hover: var(--info-soft-link-hover); --link-active: var(--info-soft-link-active); --border: var(--info-soft-border); --action-fill: var(--info-soft-action-fill); --action-fill-hover: var(--info-soft-action-fill-hover); --action-fill-active: var(--info-soft-action-fill-active); --action-text: var(--info-soft-action-text); --action-border: var(--info-soft-action-border); color: var(--info-soft-text-base); }
.bg-info-soft\/10 { background-color: color-mix(in srgb, var(--info-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent); }
.hover\:bg-info-soft\/10:hover { background-color: color-mix(in srgb, var(--info-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent); }
.active\:bg-info-soft\/10:active { background-color: color-mix(in srgb, var(--info-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 10%, transparent); }
.bg-info-soft\/30 { background-color: color-mix(in srgb, var(--info-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent); }
.hover\:bg-info-soft\/30:hover { background-color: color-mix(in srgb, var(--info-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent); }
.active\:bg-info-soft\/30:active { background-color: color-mix(in srgb, var(--info-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 30%, transparent); }
.bg-info-soft\/50 { background-color: color-mix(in srgb, var(--info-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent); }
.hover\:bg-info-soft\/50:hover { background-color: color-mix(in srgb, var(--info-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent); }
.active\:bg-info-soft\/50:active { background-color: color-mix(in srgb, var(--info-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 50%, transparent); }
.bg-info-soft\/70 { background-color: color-mix(in srgb, var(--info-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent); }
.hover\:bg-info-soft\/70:hover { background-color: color-mix(in srgb, var(--info-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent); }
.active\:bg-info-soft\/70:active { background-color: color-mix(in srgb, var(--info-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 70%, transparent); }
.bg-info-soft\/90 { background-color: color-mix(in srgb, var(--info-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent); }
.hover\:bg-info-soft\/90:hover { background-color: color-mix(in srgb, var(--info-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent); }
.active\:bg-info-soft\/90:active { background-color: color-mix(in srgb, var(--info-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-soft) 90%, transparent); }
.bg-warning-soft { background-color: var(--warning-soft); --bg-color: var(--warning-soft); --text-heading: var(--warning-soft-text-heading); --text-base: var(--warning-soft-text-base); --text-muted: var(--warning-soft-text-muted); --link: var(--warning-soft-link); --link-hover: var(--warning-soft-link-hover); --link-active: var(--warning-soft-link-active); --border: var(--warning-soft-border); --action-fill: var(--warning-soft-action-fill); --action-fill-hover: var(--warning-soft-action-fill-hover); --action-fill-active: var(--warning-soft-action-fill-active); --action-text: var(--warning-soft-action-text); --action-border: var(--warning-soft-action-border); color: var(--warning-soft-text-base); }
.hover\:bg-warning-soft:hover { background-color: var(--warning-soft); --bg-color: var(--warning-soft); --text-heading: var(--warning-soft-text-heading); --text-base: var(--warning-soft-text-base); --text-muted: var(--warning-soft-text-muted); --link: var(--warning-soft-link); --link-hover: var(--warning-soft-link-hover); --link-active: var(--warning-soft-link-active); --border: var(--warning-soft-border); --action-fill: var(--warning-soft-action-fill); --action-fill-hover: var(--warning-soft-action-fill-hover); --action-fill-active: var(--warning-soft-action-fill-active); --action-text: var(--warning-soft-action-text); --action-border: var(--warning-soft-action-border); color: var(--warning-soft-text-base); }
.active\:bg-warning-soft:active { background-color: var(--warning-soft); --bg-color: var(--warning-soft); --text-heading: var(--warning-soft-text-heading); --text-base: var(--warning-soft-text-base); --text-muted: var(--warning-soft-text-muted); --link: var(--warning-soft-link); --link-hover: var(--warning-soft-link-hover); --link-active: var(--warning-soft-link-active); --border: var(--warning-soft-border); --action-fill: var(--warning-soft-action-fill); --action-fill-hover: var(--warning-soft-action-fill-hover); --action-fill-active: var(--warning-soft-action-fill-active); --action-text: var(--warning-soft-action-text); --action-border: var(--warning-soft-action-border); color: var(--warning-soft-text-base); }
.surface-warning-soft { background-color: var(--warning-soft); --bg-color: var(--warning-soft); --text-heading: var(--warning-soft-text-heading); --text-base: var(--warning-soft-text-base); --text-muted: var(--warning-soft-text-muted); --link: var(--warning-soft-link); --link-hover: var(--warning-soft-link-hover); --link-active: var(--warning-soft-link-active); --border: var(--warning-soft-border); --action-fill: var(--warning-soft-action-fill); --action-fill-hover: var(--warning-soft-action-fill-hover); --action-fill-active: var(--warning-soft-action-fill-active); --action-text: var(--warning-soft-action-text); --action-border: var(--warning-soft-action-border); color: var(--warning-soft-text-base); }
.hover\:surface-warning-soft:hover { background-color: var(--warning-soft); --bg-color: var(--warning-soft); --text-heading: var(--warning-soft-text-heading); --text-base: var(--warning-soft-text-base); --text-muted: var(--warning-soft-text-muted); --link: var(--warning-soft-link); --link-hover: var(--warning-soft-link-hover); --link-active: var(--warning-soft-link-active); --border: var(--warning-soft-border); --action-fill: var(--warning-soft-action-fill); --action-fill-hover: var(--warning-soft-action-fill-hover); --action-fill-active: var(--warning-soft-action-fill-active); --action-text: var(--warning-soft-action-text); --action-border: var(--warning-soft-action-border); color: var(--warning-soft-text-base); }
.active\:surface-warning-soft:active { background-color: var(--warning-soft); --bg-color: var(--warning-soft); --text-heading: var(--warning-soft-text-heading); --text-base: var(--warning-soft-text-base); --text-muted: var(--warning-soft-text-muted); --link: var(--warning-soft-link); --link-hover: var(--warning-soft-link-hover); --link-active: var(--warning-soft-link-active); --border: var(--warning-soft-border); --action-fill: var(--warning-soft-action-fill); --action-fill-hover: var(--warning-soft-action-fill-hover); --action-fill-active: var(--warning-soft-action-fill-active); --action-text: var(--warning-soft-action-text); --action-border: var(--warning-soft-action-border); color: var(--warning-soft-text-base); }
.bg-warning-soft\/10 { background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent); }
.hover\:bg-warning-soft\/10:hover { background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent); }
.active\:bg-warning-soft\/10:active { background-color: color-mix(in srgb, var(--warning-soft) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 10%, transparent); }
.bg-warning-soft\/30 { background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); }
.hover\:bg-warning-soft\/30:hover { background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); }
.active\:bg-warning-soft\/30:active { background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); }
.bg-warning-soft\/50 { background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); }
.hover\:bg-warning-soft\/50:hover { background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); }
.active\:bg-warning-soft\/50:active { background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); }
.bg-warning-soft\/70 { background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent); }
.hover\:bg-warning-soft\/70:hover { background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent); }
.active\:bg-warning-soft\/70:active { background-color: color-mix(in srgb, var(--warning-soft) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 70%, transparent); }
.bg-warning-soft\/90 { background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent); }
.hover\:bg-warning-soft\/90:hover { background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent); }
.active\:bg-warning-soft\/90:active { background-color: color-mix(in srgb, var(--warning-soft) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-soft) 90%, transparent); }
.bg-warning-stronger { background-color: var(--warning-stronger); --bg-color: var(--warning-stronger); --text-heading: var(--warning-stronger-text-heading); --text-base: var(--warning-stronger-text-base); --text-muted: var(--warning-stronger-text-muted); --link: var(--warning-stronger-link); --link-hover: var(--warning-stronger-link-hover); --link-active: var(--warning-stronger-link-active); --border: var(--warning-stronger-border); --action-fill: var(--warning-stronger-action-fill); --action-fill-hover: var(--warning-stronger-action-fill-hover); --action-fill-active: var(--warning-stronger-action-fill-active); --action-text: var(--warning-stronger-action-text); --action-border: var(--warning-stronger-action-border); color: var(--warning-stronger-text-base); }
.hover\:bg-warning-stronger:hover { background-color: var(--warning-stronger); --bg-color: var(--warning-stronger); --text-heading: var(--warning-stronger-text-heading); --text-base: var(--warning-stronger-text-base); --text-muted: var(--warning-stronger-text-muted); --link: var(--warning-stronger-link); --link-hover: var(--warning-stronger-link-hover); --link-active: var(--warning-stronger-link-active); --border: var(--warning-stronger-border); --action-fill: var(--warning-stronger-action-fill); --action-fill-hover: var(--warning-stronger-action-fill-hover); --action-fill-active: var(--warning-stronger-action-fill-active); --action-text: var(--warning-stronger-action-text); --action-border: var(--warning-stronger-action-border); color: var(--warning-stronger-text-base); }
.active\:bg-warning-stronger:active { background-color: var(--warning-stronger); --bg-color: var(--warning-stronger); --text-heading: var(--warning-stronger-text-heading); --text-base: var(--warning-stronger-text-base); --text-muted: var(--warning-stronger-text-muted); --link: var(--warning-stronger-link); --link-hover: var(--warning-stronger-link-hover); --link-active: var(--warning-stronger-link-active); --border: var(--warning-stronger-border); --action-fill: var(--warning-stronger-action-fill); --action-fill-hover: var(--warning-stronger-action-fill-hover); --action-fill-active: var(--warning-stronger-action-fill-active); --action-text: var(--warning-stronger-action-text); --action-border: var(--warning-stronger-action-border); color: var(--warning-stronger-text-base); }
.surface-warning-stronger { background-color: var(--warning-stronger); --bg-color: var(--warning-stronger); --text-heading: var(--warning-stronger-text-heading); --text-base: var(--warning-stronger-text-base); --text-muted: var(--warning-stronger-text-muted); --link: var(--warning-stronger-link); --link-hover: var(--warning-stronger-link-hover); --link-active: var(--warning-stronger-link-active); --border: var(--warning-stronger-border); --action-fill: var(--warning-stronger-action-fill); --action-fill-hover: var(--warning-stronger-action-fill-hover); --action-fill-active: var(--warning-stronger-action-fill-active); --action-text: var(--warning-stronger-action-text); --action-border: var(--warning-stronger-action-border); color: var(--warning-stronger-text-base); }
.hover\:surface-warning-stronger:hover { background-color: var(--warning-stronger); --bg-color: var(--warning-stronger); --text-heading: var(--warning-stronger-text-heading); --text-base: var(--warning-stronger-text-base); --text-muted: var(--warning-stronger-text-muted); --link: var(--warning-stronger-link); --link-hover: var(--warning-stronger-link-hover); --link-active: var(--warning-stronger-link-active); --border: var(--warning-stronger-border); --action-fill: var(--warning-stronger-action-fill); --action-fill-hover: var(--warning-stronger-action-fill-hover); --action-fill-active: var(--warning-stronger-action-fill-active); --action-text: var(--warning-stronger-action-text); --action-border: var(--warning-stronger-action-border); color: var(--warning-stronger-text-base); }
.active\:surface-warning-stronger:active { background-color: var(--warning-stronger); --bg-color: var(--warning-stronger); --text-heading: var(--warning-stronger-text-heading); --text-base: var(--warning-stronger-text-base); --text-muted: var(--warning-stronger-text-muted); --link: var(--warning-stronger-link); --link-hover: var(--warning-stronger-link-hover); --link-active: var(--warning-stronger-link-active); --border: var(--warning-stronger-border); --action-fill: var(--warning-stronger-action-fill); --action-fill-hover: var(--warning-stronger-action-fill-hover); --action-fill-active: var(--warning-stronger-action-fill-active); --action-text: var(--warning-stronger-action-text); --action-border: var(--warning-stronger-action-border); color: var(--warning-stronger-text-base); }
.bg-warning-stronger\/10 { background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent); }
.hover\:bg-warning-stronger\/10:hover { background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent); }
.active\:bg-warning-stronger\/10:active { background-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 10%, transparent); }
.bg-warning-stronger\/30 { background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent); }
.hover\:bg-warning-stronger\/30:hover { background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent); }
.active\:bg-warning-stronger\/30:active { background-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 30%, transparent); }
.bg-warning-stronger\/50 { background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent); }
.hover\:bg-warning-stronger\/50:hover { background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent); }
.active\:bg-warning-stronger\/50:active { background-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 50%, transparent); }
.bg-warning-stronger\/70 { background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent); }
.hover\:bg-warning-stronger\/70:hover { background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent); }
.active\:bg-warning-stronger\/70:active { background-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 70%, transparent); }
.bg-warning-stronger\/90 { background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent); }
.hover\:bg-warning-stronger\/90:hover { background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent); }
.active\:bg-warning-stronger\/90:active { background-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--warning-stronger) 90%, transparent); }
.bg-accent-stronger { background-color: var(--accent-stronger); --bg-color: var(--accent-stronger); --text-heading: var(--accent-stronger-text-heading); --text-base: var(--accent-stronger-text-base); --text-muted: var(--accent-stronger-text-muted); --link: var(--accent-stronger-link); --link-hover: var(--accent-stronger-link-hover); --link-active: var(--accent-stronger-link-active); --border: var(--accent-stronger-border); --action-fill: var(--accent-stronger-action-fill); --action-fill-hover: var(--accent-stronger-action-fill-hover); --action-fill-active: var(--accent-stronger-action-fill-active); --action-text: var(--accent-stronger-action-text); --action-border: var(--accent-stronger-action-border); color: var(--accent-stronger-text-base); }
.hover\:bg-accent-stronger:hover { background-color: var(--accent-stronger); --bg-color: var(--accent-stronger); --text-heading: var(--accent-stronger-text-heading); --text-base: var(--accent-stronger-text-base); --text-muted: var(--accent-stronger-text-muted); --link: var(--accent-stronger-link); --link-hover: var(--accent-stronger-link-hover); --link-active: var(--accent-stronger-link-active); --border: var(--accent-stronger-border); --action-fill: var(--accent-stronger-action-fill); --action-fill-hover: var(--accent-stronger-action-fill-hover); --action-fill-active: var(--accent-stronger-action-fill-active); --action-text: var(--accent-stronger-action-text); --action-border: var(--accent-stronger-action-border); color: var(--accent-stronger-text-base); }
.active\:bg-accent-stronger:active { background-color: var(--accent-stronger); --bg-color: var(--accent-stronger); --text-heading: var(--accent-stronger-text-heading); --text-base: var(--accent-stronger-text-base); --text-muted: var(--accent-stronger-text-muted); --link: var(--accent-stronger-link); --link-hover: var(--accent-stronger-link-hover); --link-active: var(--accent-stronger-link-active); --border: var(--accent-stronger-border); --action-fill: var(--accent-stronger-action-fill); --action-fill-hover: var(--accent-stronger-action-fill-hover); --action-fill-active: var(--accent-stronger-action-fill-active); --action-text: var(--accent-stronger-action-text); --action-border: var(--accent-stronger-action-border); color: var(--accent-stronger-text-base); }
.surface-accent-stronger { background-color: var(--accent-stronger); --bg-color: var(--accent-stronger); --text-heading: var(--accent-stronger-text-heading); --text-base: var(--accent-stronger-text-base); --text-muted: var(--accent-stronger-text-muted); --link: var(--accent-stronger-link); --link-hover: var(--accent-stronger-link-hover); --link-active: var(--accent-stronger-link-active); --border: var(--accent-stronger-border); --action-fill: var(--accent-stronger-action-fill); --action-fill-hover: var(--accent-stronger-action-fill-hover); --action-fill-active: var(--accent-stronger-action-fill-active); --action-text: var(--accent-stronger-action-text); --action-border: var(--accent-stronger-action-border); color: var(--accent-stronger-text-base); }
.hover\:surface-accent-stronger:hover { background-color: var(--accent-stronger); --bg-color: var(--accent-stronger); --text-heading: var(--accent-stronger-text-heading); --text-base: var(--accent-stronger-text-base); --text-muted: var(--accent-stronger-text-muted); --link: var(--accent-stronger-link); --link-hover: var(--accent-stronger-link-hover); --link-active: var(--accent-stronger-link-active); --border: var(--accent-stronger-border); --action-fill: var(--accent-stronger-action-fill); --action-fill-hover: var(--accent-stronger-action-fill-hover); --action-fill-active: var(--accent-stronger-action-fill-active); --action-text: var(--accent-stronger-action-text); --action-border: var(--accent-stronger-action-border); color: var(--accent-stronger-text-base); }
.active\:surface-accent-stronger:active { background-color: var(--accent-stronger); --bg-color: var(--accent-stronger); --text-heading: var(--accent-stronger-text-heading); --text-base: var(--accent-stronger-text-base); --text-muted: var(--accent-stronger-text-muted); --link: var(--accent-stronger-link); --link-hover: var(--accent-stronger-link-hover); --link-active: var(--accent-stronger-link-active); --border: var(--accent-stronger-border); --action-fill: var(--accent-stronger-action-fill); --action-fill-hover: var(--accent-stronger-action-fill-hover); --action-fill-active: var(--accent-stronger-action-fill-active); --action-text: var(--accent-stronger-action-text); --action-border: var(--accent-stronger-action-border); color: var(--accent-stronger-text-base); }
.bg-accent-stronger\/10 { background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent); }
.hover\:bg-accent-stronger\/10:hover { background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent); }
.active\:bg-accent-stronger\/10:active { background-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 10%, transparent); }
.bg-accent-stronger\/30 { background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent); }
.hover\:bg-accent-stronger\/30:hover { background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent); }
.active\:bg-accent-stronger\/30:active { background-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 30%, transparent); }
.bg-accent-stronger\/50 { background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent); }
.hover\:bg-accent-stronger\/50:hover { background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent); }
.active\:bg-accent-stronger\/50:active { background-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 50%, transparent); }
.bg-accent-stronger\/70 { background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent); }
.hover\:bg-accent-stronger\/70:hover { background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent); }
.active\:bg-accent-stronger\/70:active { background-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 70%, transparent); }
.bg-accent-stronger\/90 { background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent); }
.hover\:bg-accent-stronger\/90:hover { background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent); }
.active\:bg-accent-stronger\/90:active { background-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--accent-stronger) 90%, transparent); }
.bg-success-stronger { background-color: var(--success-stronger); --bg-color: var(--success-stronger); --text-heading: var(--success-stronger-text-heading); --text-base: var(--success-stronger-text-base); --text-muted: var(--success-stronger-text-muted); --link: var(--success-stronger-link); --link-hover: var(--success-stronger-link-hover); --link-active: var(--success-stronger-link-active); --border: var(--success-stronger-border); --action-fill: var(--success-stronger-action-fill); --action-fill-hover: var(--success-stronger-action-fill-hover); --action-fill-active: var(--success-stronger-action-fill-active); --action-text: var(--success-stronger-action-text); --action-border: var(--success-stronger-action-border); color: var(--success-stronger-text-base); }
.hover\:bg-success-stronger:hover { background-color: var(--success-stronger); --bg-color: var(--success-stronger); --text-heading: var(--success-stronger-text-heading); --text-base: var(--success-stronger-text-base); --text-muted: var(--success-stronger-text-muted); --link: var(--success-stronger-link); --link-hover: var(--success-stronger-link-hover); --link-active: var(--success-stronger-link-active); --border: var(--success-stronger-border); --action-fill: var(--success-stronger-action-fill); --action-fill-hover: var(--success-stronger-action-fill-hover); --action-fill-active: var(--success-stronger-action-fill-active); --action-text: var(--success-stronger-action-text); --action-border: var(--success-stronger-action-border); color: var(--success-stronger-text-base); }
.active\:bg-success-stronger:active { background-color: var(--success-stronger); --bg-color: var(--success-stronger); --text-heading: var(--success-stronger-text-heading); --text-base: var(--success-stronger-text-base); --text-muted: var(--success-stronger-text-muted); --link: var(--success-stronger-link); --link-hover: var(--success-stronger-link-hover); --link-active: var(--success-stronger-link-active); --border: var(--success-stronger-border); --action-fill: var(--success-stronger-action-fill); --action-fill-hover: var(--success-stronger-action-fill-hover); --action-fill-active: var(--success-stronger-action-fill-active); --action-text: var(--success-stronger-action-text); --action-border: var(--success-stronger-action-border); color: var(--success-stronger-text-base); }
.surface-success-stronger { background-color: var(--success-stronger); --bg-color: var(--success-stronger); --text-heading: var(--success-stronger-text-heading); --text-base: var(--success-stronger-text-base); --text-muted: var(--success-stronger-text-muted); --link: var(--success-stronger-link); --link-hover: var(--success-stronger-link-hover); --link-active: var(--success-stronger-link-active); --border: var(--success-stronger-border); --action-fill: var(--success-stronger-action-fill); --action-fill-hover: var(--success-stronger-action-fill-hover); --action-fill-active: var(--success-stronger-action-fill-active); --action-text: var(--success-stronger-action-text); --action-border: var(--success-stronger-action-border); color: var(--success-stronger-text-base); }
.hover\:surface-success-stronger:hover { background-color: var(--success-stronger); --bg-color: var(--success-stronger); --text-heading: var(--success-stronger-text-heading); --text-base: var(--success-stronger-text-base); --text-muted: var(--success-stronger-text-muted); --link: var(--success-stronger-link); --link-hover: var(--success-stronger-link-hover); --link-active: var(--success-stronger-link-active); --border: var(--success-stronger-border); --action-fill: var(--success-stronger-action-fill); --action-fill-hover: var(--success-stronger-action-fill-hover); --action-fill-active: var(--success-stronger-action-fill-active); --action-text: var(--success-stronger-action-text); --action-border: var(--success-stronger-action-border); color: var(--success-stronger-text-base); }
.active\:surface-success-stronger:active { background-color: var(--success-stronger); --bg-color: var(--success-stronger); --text-heading: var(--success-stronger-text-heading); --text-base: var(--success-stronger-text-base); --text-muted: var(--success-stronger-text-muted); --link: var(--success-stronger-link); --link-hover: var(--success-stronger-link-hover); --link-active: var(--success-stronger-link-active); --border: var(--success-stronger-border); --action-fill: var(--success-stronger-action-fill); --action-fill-hover: var(--success-stronger-action-fill-hover); --action-fill-active: var(--success-stronger-action-fill-active); --action-text: var(--success-stronger-action-text); --action-border: var(--success-stronger-action-border); color: var(--success-stronger-text-base); }
.bg-success-stronger\/10 { background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent); }
.hover\:bg-success-stronger\/10:hover { background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent); }
.active\:bg-success-stronger\/10:active { background-color: color-mix(in srgb, var(--success-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 10%, transparent); }
.bg-success-stronger\/30 { background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent); }
.hover\:bg-success-stronger\/30:hover { background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent); }
.active\:bg-success-stronger\/30:active { background-color: color-mix(in srgb, var(--success-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 30%, transparent); }
.bg-success-stronger\/50 { background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent); }
.hover\:bg-success-stronger\/50:hover { background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent); }
.active\:bg-success-stronger\/50:active { background-color: color-mix(in srgb, var(--success-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 50%, transparent); }
.bg-success-stronger\/70 { background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent); }
.hover\:bg-success-stronger\/70:hover { background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent); }
.active\:bg-success-stronger\/70:active { background-color: color-mix(in srgb, var(--success-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 70%, transparent); }
.bg-success-stronger\/90 { background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent); }
.hover\:bg-success-stronger\/90:hover { background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent); }
.active\:bg-success-stronger\/90:active { background-color: color-mix(in srgb, var(--success-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--success-stronger) 90%, transparent); }
.bg-info-stronger { background-color: var(--info-stronger); --bg-color: var(--info-stronger); --text-heading: var(--info-stronger-text-heading); --text-base: var(--info-stronger-text-base); --text-muted: var(--info-stronger-text-muted); --link: var(--info-stronger-link); --link-hover: var(--info-stronger-link-hover); --link-active: var(--info-stronger-link-active); --border: var(--info-stronger-border); --action-fill: var(--info-stronger-action-fill); --action-fill-hover: var(--info-stronger-action-fill-hover); --action-fill-active: var(--info-stronger-action-fill-active); --action-text: var(--info-stronger-action-text); --action-border: var(--info-stronger-action-border); color: var(--info-stronger-text-base); }
.hover\:bg-info-stronger:hover { background-color: var(--info-stronger); --bg-color: var(--info-stronger); --text-heading: var(--info-stronger-text-heading); --text-base: var(--info-stronger-text-base); --text-muted: var(--info-stronger-text-muted); --link: var(--info-stronger-link); --link-hover: var(--info-stronger-link-hover); --link-active: var(--info-stronger-link-active); --border: var(--info-stronger-border); --action-fill: var(--info-stronger-action-fill); --action-fill-hover: var(--info-stronger-action-fill-hover); --action-fill-active: var(--info-stronger-action-fill-active); --action-text: var(--info-stronger-action-text); --action-border: var(--info-stronger-action-border); color: var(--info-stronger-text-base); }
.active\:bg-info-stronger:active { background-color: var(--info-stronger); --bg-color: var(--info-stronger); --text-heading: var(--info-stronger-text-heading); --text-base: var(--info-stronger-text-base); --text-muted: var(--info-stronger-text-muted); --link: var(--info-stronger-link); --link-hover: var(--info-stronger-link-hover); --link-active: var(--info-stronger-link-active); --border: var(--info-stronger-border); --action-fill: var(--info-stronger-action-fill); --action-fill-hover: var(--info-stronger-action-fill-hover); --action-fill-active: var(--info-stronger-action-fill-active); --action-text: var(--info-stronger-action-text); --action-border: var(--info-stronger-action-border); color: var(--info-stronger-text-base); }
.surface-info-stronger { background-color: var(--info-stronger); --bg-color: var(--info-stronger); --text-heading: var(--info-stronger-text-heading); --text-base: var(--info-stronger-text-base); --text-muted: var(--info-stronger-text-muted); --link: var(--info-stronger-link); --link-hover: var(--info-stronger-link-hover); --link-active: var(--info-stronger-link-active); --border: var(--info-stronger-border); --action-fill: var(--info-stronger-action-fill); --action-fill-hover: var(--info-stronger-action-fill-hover); --action-fill-active: var(--info-stronger-action-fill-active); --action-text: var(--info-stronger-action-text); --action-border: var(--info-stronger-action-border); color: var(--info-stronger-text-base); }
.hover\:surface-info-stronger:hover { background-color: var(--info-stronger); --bg-color: var(--info-stronger); --text-heading: var(--info-stronger-text-heading); --text-base: var(--info-stronger-text-base); --text-muted: var(--info-stronger-text-muted); --link: var(--info-stronger-link); --link-hover: var(--info-stronger-link-hover); --link-active: var(--info-stronger-link-active); --border: var(--info-stronger-border); --action-fill: var(--info-stronger-action-fill); --action-fill-hover: var(--info-stronger-action-fill-hover); --action-fill-active: var(--info-stronger-action-fill-active); --action-text: var(--info-stronger-action-text); --action-border: var(--info-stronger-action-border); color: var(--info-stronger-text-base); }
.active\:surface-info-stronger:active { background-color: var(--info-stronger); --bg-color: var(--info-stronger); --text-heading: var(--info-stronger-text-heading); --text-base: var(--info-stronger-text-base); --text-muted: var(--info-stronger-text-muted); --link: var(--info-stronger-link); --link-hover: var(--info-stronger-link-hover); --link-active: var(--info-stronger-link-active); --border: var(--info-stronger-border); --action-fill: var(--info-stronger-action-fill); --action-fill-hover: var(--info-stronger-action-fill-hover); --action-fill-active: var(--info-stronger-action-fill-active); --action-text: var(--info-stronger-action-text); --action-border: var(--info-stronger-action-border); color: var(--info-stronger-text-base); }
.bg-info-stronger\/10 { background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent); }
.hover\:bg-info-stronger\/10:hover { background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent); }
.active\:bg-info-stronger\/10:active { background-color: color-mix(in srgb, var(--info-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 10%, transparent); }
.bg-info-stronger\/30 { background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent); }
.hover\:bg-info-stronger\/30:hover { background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent); }
.active\:bg-info-stronger\/30:active { background-color: color-mix(in srgb, var(--info-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 30%, transparent); }
.bg-info-stronger\/50 { background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent); }
.hover\:bg-info-stronger\/50:hover { background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent); }
.active\:bg-info-stronger\/50:active { background-color: color-mix(in srgb, var(--info-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 50%, transparent); }
.bg-info-stronger\/70 { background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent); }
.hover\:bg-info-stronger\/70:hover { background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent); }
.active\:bg-info-stronger\/70:active { background-color: color-mix(in srgb, var(--info-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 70%, transparent); }
.bg-info-stronger\/90 { background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent); }
.hover\:bg-info-stronger\/90:hover { background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent); }
.active\:bg-info-stronger\/90:active { background-color: color-mix(in srgb, var(--info-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--info-stronger) 90%, transparent); }
.bg-error-stronger { background-color: var(--error-stronger); --bg-color: var(--error-stronger); --text-heading: var(--error-stronger-text-heading); --text-base: var(--error-stronger-text-base); --text-muted: var(--error-stronger-text-muted); --link: var(--error-stronger-link); --link-hover: var(--error-stronger-link-hover); --link-active: var(--error-stronger-link-active); --border: var(--error-stronger-border); --action-fill: var(--error-stronger-action-fill); --action-fill-hover: var(--error-stronger-action-fill-hover); --action-fill-active: var(--error-stronger-action-fill-active); --action-text: var(--error-stronger-action-text); --action-border: var(--error-stronger-action-border); color: var(--error-stronger-text-base); }
.hover\:bg-error-stronger:hover { background-color: var(--error-stronger); --bg-color: var(--error-stronger); --text-heading: var(--error-stronger-text-heading); --text-base: var(--error-stronger-text-base); --text-muted: var(--error-stronger-text-muted); --link: var(--error-stronger-link); --link-hover: var(--error-stronger-link-hover); --link-active: var(--error-stronger-link-active); --border: var(--error-stronger-border); --action-fill: var(--error-stronger-action-fill); --action-fill-hover: var(--error-stronger-action-fill-hover); --action-fill-active: var(--error-stronger-action-fill-active); --action-text: var(--error-stronger-action-text); --action-border: var(--error-stronger-action-border); color: var(--error-stronger-text-base); }
.active\:bg-error-stronger:active { background-color: var(--error-stronger); --bg-color: var(--error-stronger); --text-heading: var(--error-stronger-text-heading); --text-base: var(--error-stronger-text-base); --text-muted: var(--error-stronger-text-muted); --link: var(--error-stronger-link); --link-hover: var(--error-stronger-link-hover); --link-active: var(--error-stronger-link-active); --border: var(--error-stronger-border); --action-fill: var(--error-stronger-action-fill); --action-fill-hover: var(--error-stronger-action-fill-hover); --action-fill-active: var(--error-stronger-action-fill-active); --action-text: var(--error-stronger-action-text); --action-border: var(--error-stronger-action-border); color: var(--error-stronger-text-base); }
.surface-error-stronger { background-color: var(--error-stronger); --bg-color: var(--error-stronger); --text-heading: var(--error-stronger-text-heading); --text-base: var(--error-stronger-text-base); --text-muted: var(--error-stronger-text-muted); --link: var(--error-stronger-link); --link-hover: var(--error-stronger-link-hover); --link-active: var(--error-stronger-link-active); --border: var(--error-stronger-border); --action-fill: var(--error-stronger-action-fill); --action-fill-hover: var(--error-stronger-action-fill-hover); --action-fill-active: var(--error-stronger-action-fill-active); --action-text: var(--error-stronger-action-text); --action-border: var(--error-stronger-action-border); color: var(--error-stronger-text-base); }
.hover\:surface-error-stronger:hover { background-color: var(--error-stronger); --bg-color: var(--error-stronger); --text-heading: var(--error-stronger-text-heading); --text-base: var(--error-stronger-text-base); --text-muted: var(--error-stronger-text-muted); --link: var(--error-stronger-link); --link-hover: var(--error-stronger-link-hover); --link-active: var(--error-stronger-link-active); --border: var(--error-stronger-border); --action-fill: var(--error-stronger-action-fill); --action-fill-hover: var(--error-stronger-action-fill-hover); --action-fill-active: var(--error-stronger-action-fill-active); --action-text: var(--error-stronger-action-text); --action-border: var(--error-stronger-action-border); color: var(--error-stronger-text-base); }
.active\:surface-error-stronger:active { background-color: var(--error-stronger); --bg-color: var(--error-stronger); --text-heading: var(--error-stronger-text-heading); --text-base: var(--error-stronger-text-base); --text-muted: var(--error-stronger-text-muted); --link: var(--error-stronger-link); --link-hover: var(--error-stronger-link-hover); --link-active: var(--error-stronger-link-active); --border: var(--error-stronger-border); --action-fill: var(--error-stronger-action-fill); --action-fill-hover: var(--error-stronger-action-fill-hover); --action-fill-active: var(--error-stronger-action-fill-active); --action-text: var(--error-stronger-action-text); --action-border: var(--error-stronger-action-border); color: var(--error-stronger-text-base); }
.bg-error-stronger\/10 { background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent); }
.hover\:bg-error-stronger\/10:hover { background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent); }
.active\:bg-error-stronger\/10:active { background-color: color-mix(in srgb, var(--error-stronger) 10%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 10%, transparent); }
.bg-error-stronger\/30 { background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent); }
.hover\:bg-error-stronger\/30:hover { background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent); }
.active\:bg-error-stronger\/30:active { background-color: color-mix(in srgb, var(--error-stronger) 30%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 30%, transparent); }
.bg-error-stronger\/50 { background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent); }
.hover\:bg-error-stronger\/50:hover { background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent); }
.active\:bg-error-stronger\/50:active { background-color: color-mix(in srgb, var(--error-stronger) 50%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 50%, transparent); }
.bg-error-stronger\/70 { background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent); }
.hover\:bg-error-stronger\/70:hover { background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent); }
.active\:bg-error-stronger\/70:active { background-color: color-mix(in srgb, var(--error-stronger) 70%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 70%, transparent); }
.bg-error-stronger\/90 { background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent); }
.hover\:bg-error-stronger\/90:hover { background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent); }
.active\:bg-error-stronger\/90:active { background-color: color-mix(in srgb, var(--error-stronger) 90%, transparent); --bg-color: color-mix(in srgb, var(--error-stronger) 90%, transparent); }
.bg-footer { background-color: var(--footer); --bg-color: var(--footer); --text-heading: var(--footer-text-heading); --text-base: var(--footer-text-base); --text-muted: var(--footer-text-muted); --link: var(--footer-link); --link-hover: var(--footer-link-hover); --link-active: var(--footer-link-active); --border: var(--footer-border); --action-fill: var(--footer-action-fill); --action-fill-hover: var(--footer-action-fill-hover); --action-fill-active: var(--footer-action-fill-active); --action-text: var(--footer-action-text); --action-border: var(--footer-action-border); color: var(--footer-text-base); }
.hover\:bg-footer:hover { background-color: var(--footer); --bg-color: var(--footer); --text-heading: var(--footer-text-heading); --text-base: var(--footer-text-base); --text-muted: var(--footer-text-muted); --link: var(--footer-link); --link-hover: var(--footer-link-hover); --link-active: var(--footer-link-active); --border: var(--footer-border); --action-fill: var(--footer-action-fill); --action-fill-hover: var(--footer-action-fill-hover); --action-fill-active: var(--footer-action-fill-active); --action-text: var(--footer-action-text); --action-border: var(--footer-action-border); color: var(--footer-text-base); }
.active\:bg-footer:active { background-color: var(--footer); --bg-color: var(--footer); --text-heading: var(--footer-text-heading); --text-base: var(--footer-text-base); --text-muted: var(--footer-text-muted); --link: var(--footer-link); --link-hover: var(--footer-link-hover); --link-active: var(--footer-link-active); --border: var(--footer-border); --action-fill: var(--footer-action-fill); --action-fill-hover: var(--footer-action-fill-hover); --action-fill-active: var(--footer-action-fill-active); --action-text: var(--footer-action-text); --action-border: var(--footer-action-border); color: var(--footer-text-base); }
.surface-footer { background-color: var(--footer); --bg-color: var(--footer); --text-heading: var(--footer-text-heading); --text-base: var(--footer-text-base); --text-muted: var(--footer-text-muted); --link: var(--footer-link); --link-hover: var(--footer-link-hover); --link-active: var(--footer-link-active); --border: var(--footer-border); --action-fill: var(--footer-action-fill); --action-fill-hover: var(--footer-action-fill-hover); --action-fill-active: var(--footer-action-fill-active); --action-text: var(--footer-action-text); --action-border: var(--footer-action-border); color: var(--footer-text-base); }
.hover\:surface-footer:hover { background-color: var(--footer); --bg-color: var(--footer); --text-heading: var(--footer-text-heading); --text-base: var(--footer-text-base); --text-muted: var(--footer-text-muted); --link: var(--footer-link); --link-hover: var(--footer-link-hover); --link-active: var(--footer-link-active); --border: var(--footer-border); --action-fill: var(--footer-action-fill); --action-fill-hover: var(--footer-action-fill-hover); --action-fill-active: var(--footer-action-fill-active); --action-text: var(--footer-action-text); --action-border: var(--footer-action-border); color: var(--footer-text-base); }
.active\:surface-footer:active { background-color: var(--footer); --bg-color: var(--footer); --text-heading: var(--footer-text-heading); --text-base: var(--footer-text-base); --text-muted: var(--footer-text-muted); --link: var(--footer-link); --link-hover: var(--footer-link-hover); --link-active: var(--footer-link-active); --border: var(--footer-border); --action-fill: var(--footer-action-fill); --action-fill-hover: var(--footer-action-fill-hover); --action-fill-active: var(--footer-action-fill-active); --action-text: var(--footer-action-text); --action-border: var(--footer-action-border); color: var(--footer-text-base); }
.bg-footer\/10 { background-color: color-mix(in srgb, var(--footer) 10%, transparent); --bg-color: color-mix(in srgb, var(--footer) 10%, transparent); }
.hover\:bg-footer\/10:hover { background-color: color-mix(in srgb, var(--footer) 10%, transparent); --bg-color: color-mix(in srgb, var(--footer) 10%, transparent); }
.active\:bg-footer\/10:active { background-color: color-mix(in srgb, var(--footer) 10%, transparent); --bg-color: color-mix(in srgb, var(--footer) 10%, transparent); }
.bg-footer\/30 { background-color: color-mix(in srgb, var(--footer) 30%, transparent); --bg-color: color-mix(in srgb, var(--footer) 30%, transparent); }
.hover\:bg-footer\/30:hover { background-color: color-mix(in srgb, var(--footer) 30%, transparent); --bg-color: color-mix(in srgb, var(--footer) 30%, transparent); }
.active\:bg-footer\/30:active { background-color: color-mix(in srgb, var(--footer) 30%, transparent); --bg-color: color-mix(in srgb, var(--footer) 30%, transparent); }
.bg-footer\/50 { background-color: color-mix(in srgb, var(--footer) 50%, transparent); --bg-color: color-mix(in srgb, var(--footer) 50%, transparent); }
.hover\:bg-footer\/50:hover { background-color: color-mix(in srgb, var(--footer) 50%, transparent); --bg-color: color-mix(in srgb, var(--footer) 50%, transparent); }
.active\:bg-footer\/50:active { background-color: color-mix(in srgb, var(--footer) 50%, transparent); --bg-color: color-mix(in srgb, var(--footer) 50%, transparent); }
.bg-footer\/70 { background-color: color-mix(in srgb, var(--footer) 70%, transparent); --bg-color: color-mix(in srgb, var(--footer) 70%, transparent); }
.hover\:bg-footer\/70:hover { background-color: color-mix(in srgb, var(--footer) 70%, transparent); --bg-color: color-mix(in srgb, var(--footer) 70%, transparent); }
.active\:bg-footer\/70:active { background-color: color-mix(in srgb, var(--footer) 70%, transparent); --bg-color: color-mix(in srgb, var(--footer) 70%, transparent); }
.bg-footer\/90 { background-color: color-mix(in srgb, var(--footer) 90%, transparent); --bg-color: color-mix(in srgb, var(--footer) 90%, transparent); }
.hover\:bg-footer\/90:hover { background-color: color-mix(in srgb, var(--footer) 90%, transparent); --bg-color: color-mix(in srgb, var(--footer) 90%, transparent); }
.active\:bg-footer\/90:active { background-color: color-mix(in srgb, var(--footer) 90%, transparent); --bg-color: color-mix(in srgb, var(--footer) 90%, transparent); }
/* === Border Utility Classes === */
.border-secondary-base { border-color: var(--secondary-base); }
.hover\:border-secondary-base:hover { border-color: var(--secondary-base); }
.active\:border-secondary-base:active { border-color: var(--secondary-base); }
.border-secondary-strong { border-color: var(--secondary-strong); }
.hover\:border-secondary-strong:hover { border-color: var(--secondary-strong); }
.active\:border-secondary-strong:active { border-color: var(--secondary-strong); }
.border-default { border-color: var(--default); }
.hover\:border-default:hover { border-color: var(--default); }
.active\:border-default:active { border-color: var(--default); }
.border-primary-weak { border-color: var(--primary-weak); }
.hover\:border-primary-weak:hover { border-color: var(--primary-weak); }
.active\:border-primary-weak:active { border-color: var(--primary-weak); }
.border-primary-soft { border-color: var(--primary-soft); }
.hover\:border-primary-soft:hover { border-color: var(--primary-soft); }
.active\:border-primary-soft:active { border-color: var(--primary-soft); }
.border-primary-strong { border-color: var(--primary-strong); }
.hover\:border-primary-strong:hover { border-color: var(--primary-strong); }
.active\:border-primary-strong:active { border-color: var(--primary-strong); }
.border-primary-stronger { border-color: var(--primary-stronger); }
.hover\:border-primary-stronger:hover { border-color: var(--primary-stronger); }
.active\:border-primary-stronger:active { border-color: var(--primary-stronger); }
.border-primary-base { border-color: var(--primary-base); }
.hover\:border-primary-base:hover { border-color: var(--primary-base); }
.active\:border-primary-base:active { border-color: var(--primary-base); }
.border-secondary-weak { border-color: var(--secondary-weak); }
.hover\:border-secondary-weak:hover { border-color: var(--secondary-weak); }
.active\:border-secondary-weak:active { border-color: var(--secondary-weak); }
.border-secondary-soft { border-color: var(--secondary-soft); }
.hover\:border-secondary-soft:hover { border-color: var(--secondary-soft); }
.active\:border-secondary-soft:active { border-color: var(--secondary-soft); }
.border-secondary-stronger { border-color: var(--secondary-stronger); }
.hover\:border-secondary-stronger:hover { border-color: var(--secondary-stronger); }
.active\:border-secondary-stronger:active { border-color: var(--secondary-stronger); }
.border-neutral-weak { border-color: var(--neutral-weak); }
.hover\:border-neutral-weak:hover { border-color: var(--neutral-weak); }
.active\:border-neutral-weak:active { border-color: var(--neutral-weak); }
.border-neutral-soft { border-color: var(--neutral-soft); }
.hover\:border-neutral-soft:hover { border-color: var(--neutral-soft); }
.active\:border-neutral-soft:active { border-color: var(--neutral-soft); }
.border-neutral-base { border-color: var(--neutral-base); }
.hover\:border-neutral-base:hover { border-color: var(--neutral-base); }
.active\:border-neutral-base:active { border-color: var(--neutral-base); }
.border-neutral-strong { border-color: var(--neutral-strong); }
.hover\:border-neutral-strong:hover { border-color: var(--neutral-strong); }
.active\:border-neutral-strong:active { border-color: var(--neutral-strong); }
.border-neutral-stronger { border-color: var(--neutral-stronger); }
.hover\:border-neutral-stronger:hover { border-color: var(--neutral-stronger); }
.active\:border-neutral-stronger:active { border-color: var(--neutral-stronger); }
.border-success-weak { border-color: var(--success-weak); }
.hover\:border-success-weak:hover { border-color: var(--success-weak); }
.active\:border-success-weak:active { border-color: var(--success-weak); }
.border-success-base { border-color: var(--success-base); }
.hover\:border-success-base:hover { border-color: var(--success-base); }
.active\:border-success-base:active { border-color: var(--success-base); }
.border-success-strong { border-color: var(--success-strong); }
.hover\:border-success-strong:hover { border-color: var(--success-strong); }
.active\:border-success-strong:active { border-color: var(--success-strong); }
.border-info-base { border-color: var(--info-base); }
.hover\:border-info-base:hover { border-color: var(--info-base); }
.active\:border-info-base:active { border-color: var(--info-base); }
.border-info-strong { border-color: var(--info-strong); }
.hover\:border-info-strong:hover { border-color: var(--info-strong); }
.active\:border-info-strong:active { border-color: var(--info-strong); }
.border-info-weak { border-color: var(--info-weak); }
.hover\:border-info-weak:hover { border-color: var(--info-weak); }
.active\:border-info-weak:active { border-color: var(--info-weak); }
.border-error-weak { border-color: var(--error-weak); }
.hover\:border-error-weak:hover { border-color: var(--error-weak); }
.active\:border-error-weak:active { border-color: var(--error-weak); }
.border-error-base { border-color: var(--error-base); }
.hover\:border-error-base:hover { border-color: var(--error-base); }
.active\:border-error-base:active { border-color: var(--error-base); }
.border-error-strong { border-color: var(--error-strong); }
.hover\:border-error-strong:hover { border-color: var(--error-strong); }
.active\:border-error-strong:active { border-color: var(--error-strong); }
.border-warning-weak { border-color: var(--warning-weak); }
.hover\:border-warning-weak:hover { border-color: var(--warning-weak); }
.active\:border-warning-weak:active { border-color: var(--warning-weak); }
.border-warning-base { border-color: var(--warning-base); }
.hover\:border-warning-base:hover { border-color: var(--warning-base); }
.active\:border-warning-base:active { border-color: var(--warning-base); }
.border-warning-strong { border-color: var(--warning-strong); }
.hover\:border-warning-strong:hover { border-color: var(--warning-strong); }
.active\:border-warning-strong:active { border-color: var(--warning-strong); }
.border-header { border-color: var(--header); }
.hover\:border-header:hover { border-color: var(--header); }
.active\:border-header:active { border-color: var(--header); }
.border-accent-base { border-color: var(--accent-base); }
.hover\:border-accent-base:hover { border-color: var(--accent-base); }
.active\:border-accent-base:active { border-color: var(--accent-base); }
.border-accent-soft { border-color: var(--accent-soft); }
.hover\:border-accent-soft:hover { border-color: var(--accent-soft); }
.active\:border-accent-soft:active { border-color: var(--accent-soft); }
.border-accent-strong { border-color: var(--accent-strong); }
.hover\:border-accent-strong:hover { border-color: var(--accent-strong); }
.active\:border-accent-strong:active { border-color: var(--accent-strong); }
.border-accent-weak { border-color: var(--accent-weak); }
.hover\:border-accent-weak:hover { border-color: var(--accent-weak); }
.active\:border-accent-weak:active { border-color: var(--accent-weak); }
.border-error-soft { border-color: var(--error-soft); }
.hover\:border-error-soft:hover { border-color: var(--error-soft); }
.active\:border-error-soft:active { border-color: var(--error-soft); }
.border-success-soft { border-color: var(--success-soft); }
.hover\:border-success-soft:hover { border-color: var(--success-soft); }
.active\:border-success-soft:active { border-color: var(--success-soft); }
.border-info-soft { border-color: var(--info-soft); }
.hover\:border-info-soft:hover { border-color: var(--info-soft); }
.active\:border-info-soft:active { border-color: var(--info-soft); }
.border-warning-soft { border-color: var(--warning-soft); }
.hover\:border-warning-soft:hover { border-color: var(--warning-soft); }
.active\:border-warning-soft:active { border-color: var(--warning-soft); }
.border-warning-stronger { border-color: var(--warning-stronger); }
.hover\:border-warning-stronger:hover { border-color: var(--warning-stronger); }
.active\:border-warning-stronger:active { border-color: var(--warning-stronger); }
.border-accent-stronger { border-color: var(--accent-stronger); }
.hover\:border-accent-stronger:hover { border-color: var(--accent-stronger); }
.active\:border-accent-stronger:active { border-color: var(--accent-stronger); }
.border-success-stronger { border-color: var(--success-stronger); }
.hover\:border-success-stronger:hover { border-color: var(--success-stronger); }
.active\:border-success-stronger:active { border-color: var(--success-stronger); }
.border-info-stronger { border-color: var(--info-stronger); }
.hover\:border-info-stronger:hover { border-color: var(--info-stronger); }
.active\:border-info-stronger:active { border-color: var(--info-stronger); }
.border-error-stronger { border-color: var(--error-stronger); }
.hover\:border-error-stronger:hover { border-color: var(--error-stronger); }
.active\:border-error-stronger:active { border-color: var(--error-stronger); }
.border-footer { border-color: var(--footer); }
.hover\:border-footer:hover { border-color: var(--footer); }
.active\:border-footer:active { border-color: var(--footer); }