/* === Theme Variables === */
:root { --accent-base: #052d61; --accent-base-text-heading: #fcfcfc; --accent-base-text-base: #f2f2f2; --accent-base-text-muted: #fbf9f9; --accent-base-link: #ffffff; --accent-base-link-hover: #ffffff; --accent-base-link-active: #ffffff; --accent-base-border: #8c8c8c; --accent-base-action-fill: #d6d6d6; --accent-base-action-fill-hover: #dedede; --accent-base-action-fill-active: #e6e6e6; --accent-base-action-text: #000000; --accent-base-action-border: #ffffff; --accent-soft: #18519a; --accent-soft-text-heading: #000000; --accent-soft-text-base: #000000; --accent-soft-text-muted: #000000; --accent-soft-link: #000000; --accent-soft-link-hover: #000000; --accent-soft-link-active: #000000; --accent-soft-border: #000000; --accent-soft-action-fill: #000000; --accent-soft-action-fill-hover: #000000; --accent-soft-action-fill-active: #000000; --accent-soft-action-text: #000000; --accent-soft-action-border: #000000; --accent-strong: #212121; --accent-strong-text-heading: #000000; --accent-strong-text-base: #000000; --accent-strong-text-muted: #000000; --accent-strong-link: #000000; --accent-strong-link-hover: #000000; --accent-strong-link-active: #000000; --accent-strong-border: #000000; --accent-strong-action-fill: #000000; --accent-strong-action-fill-hover: #000000; --accent-strong-action-fill-active: #000000; --accent-strong-action-text: #000000; --accent-strong-action-border: #000000; --accent-stronger: #000000; --accent-stronger-text-heading: #000000; --accent-stronger-text-base: #000000; --accent-stronger-text-muted: #000000; --accent-stronger-link: #000000; --accent-stronger-link-hover: #000000; --accent-stronger-link-active: #000000; --accent-stronger-border: #000000; --accent-stronger-action-fill: #000000; --accent-stronger-action-fill-hover: #000000; --accent-stronger-action-fill-active: #000000; --accent-stronger-action-text: #000000; --accent-stronger-action-border: #000000; --accent-weak: #f0f6ff; --accent-weak-text-heading: #ffdddd; --accent-weak-text-base: #000000; --accent-weak-text-muted: #000000; --accent-weak-link: #000000; --accent-weak-link-hover: #000000; --accent-weak-link-active: #000000; --accent-weak-border: #000000; --accent-weak-action-fill: #052d61; --accent-weak-action-fill-hover: #000000; --accent-weak-action-fill-active: #000000; --accent-weak-action-text: #ffffff; --accent-weak-action-border: #000000; --default: #ffffff; --default-text-heading: #000000; --default-text-base: #272626; --default-text-muted: #8f8f8f; --default-link: #a41034; --default-link-hover: #a41034; --default-link-active: #a41034; --default-border: #e3e3e3; --default-action-fill: #a41034; --default-action-fill-hover: #a41034; --default-action-fill-active: #a41034; --default-action-text: #ffffff; --default-action-border: #c20f18; --error-base: #dc2626; --error-base-text-heading: #ffffff; --error-base-text-base: #d01616; --error-base-text-muted: #ffb8b8; --error-base-link: #fff5f5; --error-base-link-hover: #ffe3e3; --error-base-link-active: #ffc4c4; --error-base-border: #f05252; --error-base-action-fill: #ffffff; --error-base-action-fill-hover: #ffe5e5; --error-base-action-fill-active: #ffcfcf; --error-base-action-text: #dc2626; --error-base-action-border: #ffffff; --error-soft: #fff1f2; --error-soft-text-heading: #7a0d0d; --error-soft-text-base: #d01616; --error-soft-text-muted: #a94444; --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; --error-strong: #991b1b; --error-strong-text-heading: #ffffff; --error-strong-text-base: #ffd9d9; --error-strong-text-muted: #ff9e9e; --error-strong-link: #fff1f1; --error-strong-link-hover: #ffdede; --error-strong-link-active: #ffbcbc; --error-strong-border: #a63333; --error-strong-action-fill: #ffffff; --error-strong-action-fill-hover: #ffe2e2; --error-strong-action-fill-active: #ffcaca; --error-strong-action-text: #7f1d1d; --error-strong-action-border: #ffffff; --error-stronger: #000000; --error-stronger-text-heading: #000000; --error-stronger-text-base: #000000; --error-stronger-text-muted: #000000; --error-stronger-link: #000000; --error-stronger-link-hover: #000000; --error-stronger-link-active: #000000; --error-stronger-border: #000000; --error-stronger-action-fill: #000000; --error-stronger-action-fill-hover: #000000; --error-stronger-action-fill-active: #000000; --error-stronger-action-text: #000000; --error-stronger-action-border: #000000; --error-weak: #ffffff; --error-weak-text-heading: #7f1d1d; --error-weak-text-base: #dc2626; --error-weak-text-muted: #b91c1c; --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; --footer: #111827; --footer-text-heading: #ffffff; --footer-text-base: #ffffff; --footer-text-muted: #9ca3af; --footer-link: #b9aaaa; --footer-link-hover: #ffffff; --footer-link-active: #ffffff; --footer-border: #9c9c9c; --footer-action-fill: #ffffff; --footer-action-fill-hover: #a3a3a3; --footer-action-fill-active: #4a4a4a; --footer-action-text: #3d3d3d; --footer-action-border: #ffffff; --header: #ffffff; --header-text-heading: #000000; --header-text-base: #6e6e6e; --header-text-muted: #9ca3af; --header-link: #0f0f0f; --header-link-hover: #000000; --header-link-active: #000000; --header-border: #000000; --header-action-fill: #1c1736; --header-action-fill-hover: #4a4a4a; --header-action-fill-active: #4a4a4a; --header-action-text: #ffffff; --header-action-border: #1c1736; --info-base: #2563eb; --info-base-text-heading: #ffffff; --info-base-text-base: #e0e7ff; --info-base-text-muted: #bfdbfe; --info-base-link: #ffffff; --info-base-link-hover: #e0e7ff; --info-base-link-active: #bfdbfe; --info-base-border: #3b82f6; --info-base-action-fill: #ffffff; --info-base-action-fill-hover: #e0e7ff; --info-base-action-fill-active: #bfdbfe; --info-base-action-text: #2563eb; --info-base-action-border: #ffffff; --info-soft: #eff6ff; --info-soft-text-heading: #1e3a8a; --info-soft-text-base: #1e40af; --info-soft-text-muted: #475569; --info-soft-link: #2563eb; --info-soft-link-hover: #1d4ed8; --info-soft-link-active: #1e40af; --info-soft-border: #bfdbfe; --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; --info-strong: #1e40af; --info-strong-text-heading: #ffffff; --info-strong-text-base: #dbeafe; --info-strong-text-muted: #93c5fd; --info-strong-link: #ffffff; --info-strong-link-hover: #dbeafe; --info-strong-link-active: #bfdbfe; --info-strong-border: #3b82f6; --info-strong-action-fill: #ffffff; --info-strong-action-fill-hover: #e0e7ff; --info-strong-action-fill-active: #c7d2fe; --info-strong-action-text: #1e40af; --info-strong-action-border: #ffffff; --info-stronger: #000000; --info-stronger-text-heading: #000000; --info-stronger-text-base: #000000; --info-stronger-text-muted: #000000; --info-stronger-link: #000000; --info-stronger-link-hover: #000000; --info-stronger-link-active: #000000; --info-stronger-border: #000000; --info-stronger-action-fill: #000000; --info-stronger-action-fill-hover: #000000; --info-stronger-action-fill-active: #000000; --info-stronger-action-text: #000000; --info-stronger-action-border: #000000; --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; --neutral-base: #e5e5e5; --neutral-base-text-heading: #111827; --neutral-base-text-base: #374151; --neutral-base-text-muted: #6b7280; --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-soft: #f0f0f0; --neutral-soft-text-heading: #111827; --neutral-soft-text-base: #374151; --neutral-soft-text-muted: #6b7280; --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-strong: #9ca3af; --neutral-strong-text-heading: #ffffff; --neutral-strong-text-base: #f3f4f6; --neutral-strong-text-muted: #e5e7eb; --neutral-strong-link: #ffffff; --neutral-strong-link-hover: #e5e7eb; --neutral-strong-link-active: #d1d5db; --neutral-strong-border: #6b7280; --neutral-strong-action-fill: #ffffff; --neutral-strong-action-fill-hover: #f3f4f6; --neutral-strong-action-fill-active: #e5e7eb; --neutral-strong-action-text: #374151; --neutral-strong-action-border: #ffffff; --neutral-stronger: #4b5563; --neutral-stronger-text-heading: #ffffff; --neutral-stronger-text-base: #f9fafb; --neutral-stronger-text-muted: #d1d5db; --neutral-stronger-link: #ffffff; --neutral-stronger-link-hover: #e5e7eb; --neutral-stronger-link-active: #cbd5e1; --neutral-stronger-border: #6b7280; --neutral-stronger-action-fill: #ffffff; --neutral-stronger-action-fill-hover: #f3f4f6; --neutral-stronger-action-fill-active: #e5e7eb; --neutral-stronger-action-text: #4b5563; --neutral-stronger-action-border: #ffffff; --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: #e5e7eb; --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; --primary-base: #c20f18; --primary-base-text-heading: #ffffff; --primary-base-text-base: #ffe8ea; --primary-base-text-muted: #f3aeb2; --primary-base-link: #fff5f6; --primary-base-link-hover: #ffffff; --primary-base-link-active: #fff5f5; --primary-base-border: #de4a52; --primary-base-action-fill: #ffffff; --primary-base-action-fill-hover: #ffe4e6; --primary-base-action-fill-active: #ffd0d4; --primary-base-action-text: #c20f18; --primary-base-action-border: #ffffff; --primary-soft: #f8d6d8; --primary-soft-text-heading: #321013; --primary-soft-text-base: #4e1a1f; --primary-soft-text-muted: #7d5156; --primary-soft-link: #b3131c; --primary-soft-link-hover: #921017; --primary-soft-link-active: #6e0c12; --primary-soft-border: #dda2a6; --primary-soft-action-fill: #c51620; --primary-soft-action-fill-hover: #a7131b; --primary-soft-action-fill-active: #861016; --primary-soft-action-text: #fffafa; --primary-soft-action-border: #a7131b; --primary-strong: #8f1320; --primary-strong-text-heading: #fffefe; --primary-strong-text-base: #ffe0e3; --primary-strong-text-muted: #e8a0a7; --primary-strong-link: #fff4f5; --primary-strong-link-hover: #ffd7da; --primary-strong-link-active: #ffadb4; --primary-strong-border: #b64551; --primary-strong-action-fill: #fffefe; --primary-strong-action-fill-hover: #ffe9eb; --primary-strong-action-fill-active: #ffd4d8; --primary-strong-action-text: #8f1320; --primary-strong-action-border: #fffefe; --primary-stronger: #5a0f1a; --primary-stronger-text-heading: #fffdfd; --primary-stronger-text-base: #ffe1e4; --primary-stronger-text-muted: #df949b; --primary-stronger-link: #fff3f5; --primary-stronger-link-hover: #ffd8dc; --primary-stronger-link-active: #ffadb5; --primary-stronger-border: #8c3240; --primary-stronger-action-fill: #fffdfd; --primary-stronger-action-fill-hover: #ffe6ea; --primary-stronger-action-fill-active: #ffd2d7; --primary-stronger-action-text: #5a0f1a; --primary-stronger-action-border: #fffdfd; --primary-weak: #fff6f7; --primary-weak-text-heading: #3a0a0d; --primary-weak-text-base: #5b1116; --primary-weak-text-muted: #9f6a6f; --primary-weak-link: #c20f18; --primary-weak-link-hover: #a00c13; --primary-weak-link-active: #7a090e; --primary-weak-border: #f0d4d6; --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: #c20f18; --secondary-base: #8629ff; --secondary-base-text-heading: #ffffff; --secondary-base-text-base: #efe6ff; --secondary-base-text-muted: #c6a9ff; --secondary-base-link: #f3ebff; --secondary-base-link-hover: #ffffff; --secondary-base-link-active: #d6c2ff; --secondary-base-border: #a666ff; --secondary-base-action-fill: #ffffff; --secondary-base-action-fill-hover: #efe5ff; --secondary-base-action-fill-active: #e0d0ff; --secondary-base-action-text: #8629ff; --secondary-base-action-border: #ffffff; --secondary-soft: #e4d4ff; --secondary-soft-text-heading: #1a1030; --secondary-soft-text-base: #2c1c4a; --secondary-soft-text-muted: #6c5b93; --secondary-soft-link: #7a26e6; --secondary-soft-link-hover: #651fc2; --secondary-soft-link-active: #4e1897; --secondary-soft-border: #cdb7ff; --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-strong: #6a21cc; --secondary-strong-text-heading: #fefcff; --secondary-strong-text-base: #e9deff; --secondary-strong-text-muted: #bfa5ff; --secondary-strong-link: #ffffff; --secondary-strong-link-hover: #efe6ff; --secondary-strong-link-active: #d6c2ff; --secondary-strong-border: #8f4fe6; --secondary-strong-action-fill: #ffffff; --secondary-strong-action-fill-hover: #f1e9ff; --secondary-strong-action-fill-active: #e0d3ff; --secondary-strong-action-text: #6a21cc; --secondary-strong-action-border: #ffffff; --secondary-stronger: #440e8b; --secondary-stronger-text-heading: #fdfcff; --secondary-stronger-text-base: #ece3ff; --secondary-stronger-text-muted: #b69fff; --secondary-stronger-link: #ffffff; --secondary-stronger-link-hover: #efe6ff; --secondary-stronger-link-active: #d7c4ff; --secondary-stronger-border: #6c3bb3; --secondary-stronger-action-fill: #ffffff; --secondary-stronger-action-fill-hover: #f3ecff; --secondary-stronger-action-fill-active: #e2d6ff; --secondary-stronger-action-text: #4b178f; --secondary-stronger-action-border: #ffffff; --secondary-weak: #f7f2ff; --secondary-weak-text-heading: #1e1238; --secondary-weak-text-base: #34205a; --secondary-weak-text-muted: #8575a8; --secondary-weak-link: #8629ff; --secondary-weak-link-hover: #6e22d1; --secondary-weak-link-active: #551aa1; --secondary-weak-border: #e6dcff; --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; --success-base: #1f9d55; --success-base-text-heading: #ffffff; --success-base-text-base: #e7f9ef; --success-base-text-muted: #a6e1c1; --success-base-link: #ecfff5; --success-base-link-hover: #ffffff; --success-base-link-active: #c7f2db; --success-base-border: #3fb875; --success-base-action-fill: #ffffff; --success-base-action-fill-hover: #e7f7ee; --success-base-action-fill-active: #d2f0df; --success-base-action-text: #1f9d55; --success-base-action-border: #ffffff; --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; --success-strong: #136f3b; --success-strong-text-heading: #ffffff; --success-strong-text-base: #d9f5e7; --success-strong-text-muted: #8fd0ae; --success-strong-link: #ffffff; --success-strong-link-hover: #d6f5e2; --success-strong-link-active: #b4ebcf; --success-strong-border: #2b925c; --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; --success-stronger: #000000; --success-stronger-text-heading: #000000; --success-stronger-text-base: #000000; --success-stronger-text-muted: #000000; --success-stronger-link: #000000; --success-stronger-link-hover: #000000; --success-stronger-link-active: #000000; --success-stronger-border: #000000; --success-stronger-action-fill: #000000; --success-stronger-action-fill-hover: #000000; --success-stronger-action-fill-active: #000000; --success-stronger-action-text: #000000; --success-stronger-action-border: #000000; --success-weak: #ffffff; --success-weak-text-heading: #05331c; --success-weak-text-base: #145c3b; --success-weak-text-muted: #6fa88c; --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; --warning-base: #ffb029; --warning-base-text-heading: #ffffff; --warning-base-text-base: #ffffff; --warning-base-text-muted: #ffffff; --warning-base-link: #8a4b00; --warning-base-link-hover: #6e3c00; --warning-base-link-active: #522d00; --warning-base-border: #ffcc80; --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-soft: #ffefd1; --warning-soft-text-heading: #5a2e00; --warning-soft-text-base: #7c4500; --warning-soft-text-muted: #a16207; --warning-soft-link: #ea8a00; --warning-soft-link-hover: #cf7a00; --warning-soft-link-active: #a86400; --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-strong: #d97706; --warning-strong-text-heading: #ffffff; --warning-strong-text-base: #fff4e6; --warning-strong-text-muted: #ffd08a; --warning-strong-link: #ffffff; --warning-strong-link-hover: #fff1db; --warning-strong-link-active: #ffe2b8; --warning-strong-border: #f59e0b; --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; --warning-stronger: #ffdd00; --warning-stronger-text-heading: #000000; --warning-stronger-text-base: #000000; --warning-stronger-text-muted: #000000; --warning-stronger-link: #000000; --warning-stronger-link-hover: #000000; --warning-stronger-link-active: #000000; --warning-stronger-border: #000000; --warning-stronger-action-fill: #000000; --warning-stronger-action-fill-hover: #000000; --warning-stronger-action-fill-active: #000000; --warning-stronger-action-text: #000000; --warning-stronger-action-border: #000000; --warning-weak: #ffffff; --warning-weak-text-heading: #3a2200; --warning-weak-text-base: #6b3f00; --warning-weak-text-muted: #b07a2c; --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; }
/* === Background Utility Classes === */
.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-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-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-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-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-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-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-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-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-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); }
.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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); }
/* === Border Utility Classes === */
.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-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-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-default { border-color: var(--default); }
.hover\:border-default:hover { border-color: var(--default); }
.active\:border-default:active { border-color: var(--default); }
.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-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-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-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-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-footer { border-color: var(--footer); }
.hover\:border-footer:hover { border-color: var(--footer); }
.active\:border-footer:active { border-color: var(--footer); }
.border-header { border-color: var(--header); }
.hover\:border-header:hover { border-color: var(--header); }
.active\:border-header:active { border-color: var(--header); }
.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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); }