/* ================================================================ main.css — CSS5 utility classes replacing Tailwind CSS All class names preserved; only the stylesheet source changes. ================================================================ */ /* === DESIGN TOKENS — STATIC (same in both themes) === */ :root { /* Status — vivid colors keep their meaning in both themes */ --color-success: #22c55e; --color-error: #ef4444; --color-error-hover: #dc2626; --color-active: #0d9488; --color-active-text: #0f766e; --color-warning: #f59e0b; --color-info: #3b82f6; --color-info-dark: #2563eb; /* Special */ --color-avatar-badge: #005e5e; --color-whatsapp: #25D366; /* Tint aliases (channel-based for dark mode adaptability) */ --color-primary-tint: #f0f4f5; /* primary color wash */ --color-secondary-tint: #f0e6e6; /* secondary color wash */ --color-active-light: #ccfbf1; /* teal-100, status badge bg */ --color-active-mid: #14b8a6; /* teal-500, status badge text */ /* Channel vars for opacity patterns */ --ch-background: 15 23 42; --ch-error: 239 68 68; --ch-whatsapp: 37 211 102; --ch-white: 255 255 255; } /* === DESIGN TOKENS — THEME-DEPENDENT (light defaults) === */ :root { /* Brand — theme-dependent so they remain visible on dark surfaces */ --color-primary: #004253; --color-secondary: #ad3219; --ch-primary: 0 66 83; --ch-secondary: 173 50 25; /* Page & surfaces */ --color-background: #f7fafb; --color-on-background: #181c1d; --color-surface: #ffffff; --color-surface-sunken: #f8fafc; --color-surface-muted: #f1f5f9; /* Borders */ --color-border: #e2e8f0; --color-border-strong: #334155; /* Text */ --color-text: #475569; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; --color-text-placeholder: #cbd5e1; /* Icon button */ --color-icon-btn: var(--color-primary); /* Status backgrounds — light washes */ --color-success-bg: #f0fdf4; --color-error-bg: #fef2f2; --color-active-bg: #f0fdfa; --color-warning-bg: #fffbeb; --color-info-bg: #eff6ff; /* Status text and border colors */ --color-success-text: #166534; --color-success-border: #bbf7d0; --color-error-text: #991b1b; --color-error-border: #fecaca; --color-info-text: #1e40af; --color-info-border: #bfdbfe; --color-warning-text: #92400e; --color-warning-border: #fde68a; --color-error-light: #fee2e2; /* Channel vars for opacity patterns */ --ch-surface-sunken: 248 250 252; } /* === DARK THEME === */ .dark { /* Page & surfaces */ --color-background: #0f172a; --color-on-background: #e2e8f0; --color-surface: #1e293b; --color-surface-sunken: #1e293b; --color-surface-muted: #334155; /* Borders */ --color-border: #334155; --color-border-strong: #475569; /* Text */ --color-text: #e2e8f0; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-placeholder: #475569; /* Icon button */ --color-icon-btn: #7dd3fc; /* Brand — lighter for visibility on dark surfaces */ --color-primary: #22d3ee; /* cyan-300 — on-brand teal, readable on dark */ --color-secondary: #fb923c; /* orange-400 — warm rust-adjacent, readable on dark */ --ch-primary: 34 211 238; --ch-secondary: 251 146 60; /* Status backgrounds — low-opacity tints on dark surfaces */ --color-success-bg: rgb(34 197 94 / 0.12); --color-error-bg: rgb(239 68 68 / 0.12); --color-active-bg: rgb(13 148 136 / 0.12); --color-warning-bg: rgb(245 158 11 / 0.12); --color-info-bg: rgb(59 130 246 / 0.12); --color-primary-tint: rgb(var(--ch-primary) / 0.08); --color-secondary-tint: rgb(var(--ch-secondary) / 0.12); --color-active-light: rgb(13 148 136 / 0.15); --color-active-mid: var(--color-active); /* Status text and border colors — accessible on dark surfaces */ --color-success-text: #4ade80; --color-success-border: rgb(34 197 94 / 0.25); --color-error-text: #f87171; --color-error-border: rgb(239 68 68 / 0.25); --color-info-text: #60a5fa; --color-info-border: rgb(59 130 246 / 0.25); --color-warning-text: #fbbf24; --color-warning-border: rgb(245 158 11 / 0.25); --color-error-light: rgb(239 68 68 / 0.1); /* Channel vars */ --ch-surface-sunken: 30 41 59; } /* === PREFLIGHT (browser reset matching Tailwind base) === */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-feature-settings: normal; } body { margin: 0; line-height: inherit; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: inherit; } ul, ol { list-style: none; margin: 0; padding: 0; } img, svg, video { display: block; vertical-align: middle; max-width: 100%; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } textarea { resize: vertical; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } blockquote, dl, dd, figure, pre { margin: 0; } summary { display: list-item; } hr { height: 0; color: inherit; border-top-width: 1px; } [type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select { appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0; padding: 0.5rem 0.75rem; font-size: 1rem; line-height: 1.5rem; } [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #004253; box-shadow: 0 0 0 1px #004253; } [type='checkbox'], [type='radio'] { appearance: none; padding: 0; display: inline-block; vertical-align: middle; background-origin: border-box; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #004253; background-color: #fff; border-color: #6b7280; border-width: 1px; } [type='checkbox'] { border-radius: 0; } [type='radio'] { border-radius: 100%; } [type='checkbox']:checked, [type='radio']:checked { background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } [type='checkbox']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } [type='radio']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; } [type='file'] { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; } /* === COMPOSABLE BASE VARIABLES === * *, ::before, ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; /* gradients * --tw-gradient-from: transparent; --tw-gradient-via: transparent; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); /* filters * --tw-blur: ; --tw-brightness: ; --tw-grayscale: ; --tw-backdrop-blur: ; /* tailwindcss-animate * --tw-enter-opacity: 1; --tw-enter-scale: 1; --tw-enter-translate-x: 0px; --tw-enter-translate-y: 0px; --tw-exit-opacity: 1; --tw-exit-scale: 1; --tw-exit-translate-x: 0px; --tw-exit-translate-y: 0px; } /* ================================================================ DISPLAY ================================================================ * .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .flex { display: flex; } .grid { display: grid; } /* ================================================================ POSITION ================================================================ * .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .top-0 { top: 0; } .top-1 { top: 0.25rem; } .top-4 { top: 1rem; } .top-6 { top: 1.5rem; } .top-8 { top: 2rem; } .top-24 { top: 6rem; } .top-1\/2 { top: 50%; } .bottom-0 { bottom: 0; } .bottom-1 { bottom: 0.25rem; } .bottom-4 { bottom: 1rem; } .bottom-5 { bottom: 1.25rem; } .bottom-6 { bottom: 1.5rem; } .bottom-8 { bottom: 2rem; } .bottom-20 { bottom: 5rem; } .left-0 { left: 0; } .left-4 { left: 1rem; } .left-6 { left: 1.5rem; } .left-1\/2 { left: 50%; } .left-1\/4 { left: 25%; } .right-0 { right: 0; } .right-1 { right: 0.25rem; } .right-4 { right: 1rem; } .right-5 { right: 1.25rem; } .right-6 { right: 1.5rem; } .right-8 { right: 2rem; } /* ================================================================ Z-INDEX ================================================================ * .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } .z-\[100\] { z-index: 100; } .z-\[110\] { z-index: 110; } .z-\[120\] { z-index: 120; } .z-\[190\] { z-index: 190; } .z-\[200\] { z-index: 200; } .z-\[1000\] { z-index: 1000; } .z-\[9999\] { z-index: 9999; } /* ================================================================ OVERFLOW ================================================================ * .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-y-hidden { overflow-y: hidden; } /* ================================================================ FLEXBOX ================================================================ * .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-around { justify-content: space-around; } /* ================================================================ GRID ================================================================ * .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .col-span-2 { grid-column: span 2 / span 2; } /* ================================================================ GAP ================================================================ * .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } /* ================================================================ SPACE BETWEEN ================================================================ * .space-y-1 > * + * { margin-top: 0.25rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-8 > * + * { margin-top: 2rem; } .space-y-10 > * + * { margin-top: 2.5rem; } /* ================================================================ DIVIDE ================================================================ * .divide-y > * + * { border-top-width: 1px; border-top-style: solid; } .divide-slate-50 > * + * { border-color: #f8fafc; } .divide-slate-100 > * + * { border-color: #f1f5f9; } /* ================================================================ WIDTH ================================================================ * .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-7 { width: 1.75rem; } .w-8 { width: 2rem; } .w-9 { width: 2.25rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-32 { width: 8rem; } .w-40 { width: 10rem; } .w-44 { width: 11rem; } .w-full { width: 100%; } .w-\[85\%\] { width: 85%; } .w-\[40px\] { width: 40px; } /* ================================================================ HEIGHT ================================================================ * .h-1 { height: 0.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-18 { height: 4.5rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-32 { height: 8rem; } .h-44 { height: 11rem; } .h-56 { height: 14rem; } .h-64 { height: 16rem; } .h-full { height: 100%; } .h-\[100dvh\] { height: 100dvh; } .h-\[500px\] { height: 500px; } /* ================================================================ MIN / MAX SIZING ================================================================ * .min-h-screen { min-height: 100vh; } .min-h-\[72px\] { min-height: 72px; } .min-h-\[160px\] { min-height: 160px; } .max-w-md { max-width: 28rem; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .max-w-screen-xl { max-width: 1280px; } .max-w-\[150px\] { max-width: 150px; } .max-h-full { max-height: 100%; } /* ================================================================ PADDING ================================================================ * .p-0\.5 { padding: 0.125rem; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-12 { padding-left: 3rem; padding-right: 3rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pt-12 { padding-top: 3rem; } .pt-28 { padding-top: 7rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-12 { padding-bottom: 3rem; } .pb-32 { padding-bottom: 8rem; } .pb-40 { padding-bottom: 10rem; } .pl-4 { padding-left: 1rem; } .pl-12 { padding-left: 3rem; } .pr-1 { padding-right: 0.25rem; } .pr-2 { padding-right: 0.5rem; } .pr-4 { padding-right: 1rem; } .pr-6 { padding-right: 1.5rem; } /* ================================================================ MARGIN ================================================================ * .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-6 { margin-top: 1.5rem; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .ml-auto { margin-left: auto; } .ml-4 { margin-left: 1rem; } .mr-auto { margin-right: auto; } .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .mr-16 { margin-right: 4rem; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .-mx-5 { margin-left: -1.25rem; margin-right: -1.25rem; } .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .my-auto { margin-top: auto; margin-bottom: auto; } /* ================================================================ TYPOGRAPHY — FONT SIZE ================================================================ * .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-\[8px\] { font-size: 8px; } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[16px\] { font-size: 16px; } .text-\[24px\] { font-size: 24px; } .text-\[32px\] { font-size: 32px; } .text-\[34px\] { font-size: 34px; } .text-\[42px\] { font-size: 42px; } /* ================================================================ TYPOGRAPHY — FONT WEIGHT & STYLE ================================================================ * .font-medium { font-weight: 500; } .font-bold { font-weight: 700; } .font-black { font-weight: 900; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .italic { font-style: italic; } .underline { text-decoration-line: underline; } .uppercase { text-transform: uppercase; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================ TYPOGRAPHY — TEXT ALIGNMENT & SPACING ================================================================ * .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .tracking-tighter { letter-spacing: -0.05em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .tracking-\[0\.2em\] { letter-spacing: 0.2em; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; } .whitespace-nowrap { white-space: nowrap; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .resize-none { resize: none; } /* ================================================================ BACKGROUND COLORS — SOLID ================================================================ * .bg-primary { background-color: var(--color-primary); } .bg-secondary { background-color: var(--color-secondary); } .bg-white { background-color: #ffffff; } .bg-slate-50 { background-color: #f8fafc; } .bg-slate-100 { background-color: #f1f5f9; } .bg-slate-800 { background-color: #1e293b; } .bg-red-50 { background-color: #fef2f2; } .bg-red-500 { background-color: #ef4444; } .bg-red-600 { background-color: #dc2626; } .bg-amber-50 { background-color: #fffbeb; } .bg-amber-100 { background-color: #fef3c7; } .bg-amber-400 { background-color: #fbbf24; } .bg-amber-500 { background-color: #f59e0b; } .bg-teal-50 { background-color: #f0fdfa; } .bg-teal-100 { background-color: #ccfbf1; } .bg-teal-600 { background-color: #0d9488; } .bg-indigo-50 { background-color: #eef2ff; } .bg-indigo-600{ background-color: #4f46e5; } .bg-blue-50 { background-color: #eff6ff; } .bg-blue-400 { background-color: #60a5fa; } .bg-blue-600 { background-color: #2563eb; } .bg-green-50 { background-color: #f0fdf4; } .bg-green-500 { background-color: #22c55e; } .bg-\[\#005e5e\] { background-color: #005e5e; } .bg-\[\#004253\] { background-color: #004253; } .bg-\[\#25D366\] { background-color: #25D366; } .bg-\[\#d63031\] { background-color: #d63031; } .bg-\[\#f0e6e6\] { background-color: #f0e6e6; } .bg-\[\#f0f4f5\] { background-color: #f0f4f5; } .bg-\[\#faedee\] { background-color: #faedee; } /* ================================================================ BACKGROUND COLORS — WITH OPACITY ================================================================ * .bg-primary\/5 { background-color: rgb(var(--ch-primary) / 0.05); } .bg-primary\/10 { background-color: rgb(var(--ch-primary) / 0.1); } .bg-secondary\/5 { background-color: rgb(var(--ch-secondary) / 0.05); } .bg-secondary\/10 { background-color: rgb(var(--ch-secondary) / 0.1); } .bg-secondary\/80 { background-color: rgb(var(--ch-secondary) / 0.8); } .bg-secondary\/90 { background-color: rgb(var(--ch-secondary) / 0.9); } .bg-black\/20 { background-color: rgb(0 0 0 / 0.2); } .bg-black\/40 { background-color: rgb(0 0 0 / 0.4); } .bg-black\/80 { background-color: rgb(0 0 0 / 0.8); } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); } .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); } .bg-white\/40 { background-color: rgb(255 255 255 / 0.4); } .bg-white\/60 { background-color: rgb(255 255 255 / 0.6); } .bg-white\/80 { background-color: rgb(255 255 255 / 0.8); } .bg-white\/90 { background-color: rgb(255 255 255 / 0.9); } .bg-white\/95 { background-color: rgb(255 255 255 / 0.95); } .bg-slate-50\/50 { background-color: rgb(248 250 252 / 0.5); } .bg-amber-900\/20 { background-color: rgb(120 53 15 / 0.2); } .bg-teal-900\/20 { background-color: rgb(19 78 74 / 0.2); } .bg-blue-900\/20 { background-color: rgb(30 58 138 / 0.2); } .bg-\[\#004253\]\/10 { background-color: rgb(0 66 83 / 0.1); } .bg-\[\#004253\]\/90 { background-color: rgb(0 66 83 / 0.9); } .bg-\[\#B93D1E\]\/10 { background-color: rgb(185 61 30 / 0.1); } .bg-\[\#B93D1E\]\/90 { background-color: rgb(185 61 30 / 0.9); } /* ================================================================ GRADIENTS NOTE: via-* classes MUST appear after from-* in this file so that --tw-gradient-stops is correctly overridden when a via-* class is present alongside a from-* class on the same element. ================================================================ * .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); } .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); } /* from-* (resets stops to from+to; no via) */ .from-primary { --tw-gradient-from: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-secondary\/80 { --tw-gradient-from: rgb(var(--ch-secondary) / 0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-slate-900\/5 { --tw-gradient-from: rgb(15 23 42 / 0.05); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-slate-900\/60 { --tw-gradient-from: rgb(15 23 42 / 0.6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[\#004253\]\/90 { --tw-gradient-from: rgb(0 66 83 / 0.9); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-\[\#B93D1E\]\/90 { --tw-gradient-from: rgb(185 61 30 / 0.9); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* via-* (overrides stops to from+via+to) */ .via-amber-500\/50 { --tw-gradient-via: rgb(245 158 11 / 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); } .via-black\/20 { --tw-gradient-via: rgb(0 0 0 / 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); } .via-slate-900\/5 { --tw-gradient-via: rgb(15 23 42 / 0.05); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); } .via-slate-900\/60 { --tw-gradient-via: rgb(15 23 42 / 0.6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); } .via-\[\#B93D1E\]\/10 { --tw-gradient-via: rgb(185 61 30 / 0.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); } .via-\[\#004253\]\/10 { --tw-gradient-via: rgb(0 66 83 / 0.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); } /* to-* */ .to-transparent { --tw-gradient-to: transparent; } .to-secondary { --tw-gradient-to: var(--color-secondary); } .to-secondary\/80 { --tw-gradient-to: rgb(var(--ch-secondary) / 0.8); } .to-slate-900\/60 { --tw-gradient-to: rgb(15 23 42 / 0.6); } /* ================================================================ TEXT COLORS — SOLID ================================================================ * .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-white { color: #ffffff; } .text-slate-300 { color: #cbd5e1; } .text-slate-400 { color: #94a3b8; } .text-slate-500 { color: #64748b; } .text-slate-600 { color: #475569; } .text-slate-800 { color: #1e293b; } .text-teal-400 { color: #2dd4bf; } .text-teal-500 { color: #14b8a6; } .text-teal-600 { color: #0d9488; } .text-teal-700 { color: #0f766e; } .text-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; } .text-amber-400 { color: #fbbf24; } .text-blue-400 { color: #60a5fa; } .text-blue-500 { color: #3b82f6; } .text-blue-600 { color: #2563eb; } .text-green-500 { color: #22c55e; } /* ================================================================ TEXT COLORS — WITH OPACITY ================================================================ * .text-primary\/30 { color: rgb(var(--ch-primary) / 0.3); } .text-primary\/40 { color: rgb(var(--ch-primary) / 0.4); } .text-primary\/60 { color: rgb(var(--ch-primary) / 0.6); } .text-primary\/70 { color: rgb(var(--ch-primary) / 0.7); } .text-primary\/80 { color: rgb(var(--ch-primary) / 0.8); } .text-secondary\/80 { color: rgb(var(--ch-secondary) / 0.8); } .text-white\/10 { color: rgb(255 255 255 / 0.1); } .text-white\/40 { color: rgb(255 255 255 / 0.4); } .text-white\/60 { color: rgb(255 255 255 / 0.6); } .text-white\/80 { color: rgb(255 255 255 / 0.8); } .text-white\/90 { color: rgb(255 255 255 / 0.9); } /* ================================================================ BORDER COLORS ================================================================ * .border-primary { border-color: var(--color-primary); } .border-secondary { border-color: var(--color-secondary); } .border-white { border-color: #ffffff; } .border-slate-50 { border-color: #f8fafc; } .border-slate-100 { border-color: #f1f5f9; } .border-slate-200 { border-color: #e2e8f0; } .border-red-100 { border-color: #fee2e2; } .border-teal-100 { border-color: #ccfbf1; } .border-primary\/5 { border-color: rgb(var(--ch-primary) / 0.05); } .border-primary\/20 { border-color: rgb(var(--ch-primary) / 0.2); } .border-white\/30 { border-color: rgb(255 255 255 / 0.3); } /* ================================================================ BORDER WIDTH & STYLE ================================================================ * .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-4 { border-width: 4px; } .border-t { border-top-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l { border-left-width: 1px; } .border-r { border-right-width: 1px; } .border-r-4 { border-right-width: 4px; } .border-dashed { border-style: dashed; } /* ================================================================ BORDER RADIUS ================================================================ * .rounded { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .rounded-\[20px\] { border-radius: 20px; } .rounded-\[24px\] { border-radius: 24px; } .rounded-\[28px\] { border-radius: 28px; } .rounded-\[32px\] { border-radius: 32px; } .rounded-\[40px\] { border-radius: 40px; } .rounded-\[48px\] { border-radius: 48px; } .rounded-t-\[40px\] { border-top-left-radius: 40px; border-top-right-radius: 40px; } /* ================================================================ BOX SHADOW ================================================================ * .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-inner { --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-10px_40px_rgba\(0\,0\,0\,0\.08\)\] { --tw-shadow: 0 -10px 40px rgba(0,0,0,0.08); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_20px_50px_rgba\(0\,66\,83\,0\.3\)\] { --tw-shadow: 0 20px 50px rgba(0,66,83,0.3); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[20px_0_60px_rgba\(0\,0\,0\,0\.1\)\] { --tw-shadow: 20px 0 60px rgba(0,0,0,0.1); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-20px_50px_rgba\(0\,0\,0\,0\.1\)\] { --tw-shadow: 0 -20px 50px rgba(0,0,0,0.1); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } /* ================================================================ RING ================================================================ * .ring-1 { --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-primary\/5 { --tw-ring-color: rgb(var(--ch-primary) / 0.05); } .ring-primary\/20 { --tw-ring-color: rgb(var(--ch-primary) / 0.2); } .ring-secondary\/5 { --tw-ring-color: rgb(var(--ch-secondary) / 0.05); } .ring-white\/20 { --tw-ring-color: rgb(255 255 255 / 0.2); } /* ================================================================ OPACITY ================================================================ * .opacity-0 { opacity: 0; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-80 { opacity: 0.8; } .opacity-100 { opacity: 1; } .opacity-\[0\.08\] { opacity: 0.08; } /* ================================================================ BACKDROP FILTER & CSS FILTER ================================================================ */ .backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .backdrop-blur-2xl { -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } .blur-xl { filter: blur(24px); } .grayscale { filter: grayscale(100%); } .brightness-110 { filter: brightness(1.1); } /* ================================================================ OBJECT FIT & ASPECT RATIO ================================================================ * .object-cover { object-fit: cover; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-\[16\/10\] { aspect-ratio: 16 / 10; } .aspect-\[3\/4\.5\] { aspect-ratio: 3 / 4.5; } /* ================================================================ CURSOR & POINTER EVENTS ================================================================ * .cursor-pointer { cursor: pointer; } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } /* ================================================================ SCROLL SNAP ================================================================ * .snap-x { scroll-snap-type: x mandatory; } .snap-mandatory { /* enforced via snap-x */ } .snap-center { scroll-snap-align: center; } /* ================================================================ TRANSFORMS ================================================================ * .-translate-x-1\/2 { --tw-translate-x: -50%; transform: var(--tw-transform); } .-translate-x-full { --tw-translate-x: -100%; transform: var(--tw-transform); } .translate-x-0 { --tw-translate-x: 0; transform: var(--tw-transform); } .translate-x-1 { --tw-translate-x: 0.25rem; transform: var(--tw-transform); } .-translate-x-1 { --tw-translate-x: -0.25rem; transform: var(--tw-transform); } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: var(--tw-transform); } .translate-y-0 { --tw-translate-y: 0; transform: var(--tw-transform); } .translate-y-1\/2 { --tw-translate-y: 50%; transform: var(--tw-transform); } .translate-y-full { --tw-translate-y: 100%; transform: var(--tw-transform); } .rotate-45 { --tw-rotate: 45deg; transform: var(--tw-transform); } .-rotate-45 { --tw-rotate: -45deg; transform: var(--tw-transform); } .rotate-180 { --tw-rotate: 180deg; transform: var(--tw-transform); } .scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: var(--tw-transform); } .scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; transform: var(--tw-transform); } .scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: var(--tw-transform); } .scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: var(--tw-transform); } .scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: var(--tw-transform); } /* ================================================================ TRANSITIONS ================================================================ * .transition { transition-property: color, background-color, border-color, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-300 { transition-duration: 300ms; animation-duration: 300ms; } .duration-500 { transition-duration: 500ms; animation-duration: 500ms; } .duration-1000 { transition-duration: 1000ms; animation-duration: 1000ms; } .duration-\[2000ms\] { transition-duration: 2000ms; animation-duration: 2000ms; } .ease-\[cubic-bezier\(0\.33\,1\,0\.68\,1\)\] { transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } /* ================================================================ ANIMATIONS ================================================================ * @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)); } } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-in { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: 1; --tw-enter-scale: 1; --tw-enter-translate-x: 0px; --tw-enter-translate-y: 0px; } .animate-out { animation-name: exit; animation-duration: 150ms; } .animate-\[spin\] { animation-name: spin; } /* tailwindcss-animate modifier classes */ .fade-in { --tw-enter-opacity: 0; } .fade-out { --tw-exit-opacity: 0; } .zoom-in { --tw-enter-scale: 0.95; } .zoom-out { --tw-exit-scale: 0.95; } .slide-in-from-bottom-4 { --tw-enter-translate-y: 1rem; } .slide-in-from-right-10 { --tw-enter-translate-x: -2.5rem; } .slide-in-from-top { --tw-enter-translate-y: -0.5rem; } /* ================================================================ PSEUDO-ELEMENT CLASSES (after:*) Used for toggle-switch visual element ================================================================ * .after\:absolute::after { position: absolute; } .after\:bg-white::after { background-color: #ffffff; } .after\:content-\[\''\]::after { content: ''; } .after\:h-6::after { height: 1.5rem; } .after\:left-\[4px\]::after { left: 4px; } .after\:rounded-full::after { border-radius: 9999px; } .after\:top-\[4px\]::after { top: 4px; } .after\:w-6::after { width: 1.5rem; } .after\:transition-all::after { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* ================================================================ FONT VARIATION SETTINGS (Material Symbols fill toggle) ================================================================ * .\[font-variation-settings\:\'FILL\'_0\] { font-variation-settings: 'FILL' 0; } .\[font-variation-settings\:\'FILL\'_1\] { font-variation-settings: 'FILL' 1; } /* ================================================================ TEXT DECORATION COLOR ================================================================ * .decoration-white\/30 { text-decoration-color: rgb(255 255 255 / 0.3); } /* ================================================================ GROUP / GROUP-HOVER VARIANTS ================================================================ * .group:hover .group-hover\:bg-amber-100 { background-color: #fef3c7; } .group:hover .group-hover\:bg-primary { background-color: var(--color-primary); } .group:hover .group-hover\:bg-slate-100 { background-color: #f1f5f9; } .group:hover .group-hover\:bg-slate-50 { background-color: #f8fafc; } .group:hover .group-hover\:bg-teal-100 { background-color: #ccfbf1; } .group:hover .group-hover\:bg-white { background-color: #ffffff; } .group:hover .group-hover\:scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: var(--tw-transform); } .group:hover .group-hover\:text-primary { color: var(--color-primary); } .group:hover .group-hover\:text-secondary { color: var(--color-secondary); } .group:hover .group-hover\:text-white { color: #ffffff; } .group:hover .group-hover\:translate-x-1 { --tw-translate-x: 0.25rem; transform: var(--tw-transform); } .group:hover .group-hover\:-translate-x-1 { --tw-translate-x: -0.25rem; transform: var(--tw-transform); } .group:hover .group-hover\:translate-y-0 { --tw-translate-y: 0; transform: var(--tw-transform); } .group:hover .group-hover\:opacity-80 { opacity: 0.8; } .group:hover .group-hover\:opacity-100 { opacity: 1; } .group:hover .group-hover\:rotate-6 { --tw-rotate: 6deg; transform: var(--tw-transform); } .group:hover .group-hover\:rotate-180 { --tw-rotate: 180deg; transform: var(--tw-transform); } /* ================================================================ PEER VARIANTS (toggle switch) ================================================================ * .peer:checked ~ .peer-checked\:bg-\[#25D366\] { background-color: #25D366; } .peer:checked ~ .peer-checked\:after\:translate-x-full::after { --tw-translate-x: 100%; transform: var(--tw-transform); } .peer:focus ~ .peer-focus\:outline-none { outline: none; } /* ================================================================ HOVER VARIANTS ================================================================ * .hover\:bg-amber-100:hover { background-color: #fef3c7; } .hover\:bg-primary:hover { background-color: var(--color-primary); } .hover\:bg-primary\/5:hover { background-color: rgb(var(--ch-primary) / 0.05); } .hover\:bg-primary\/90:hover { background-color: rgb(var(--ch-primary) / 0.9); } .hover\:bg-red-50:hover { background-color: #fef2f2; } .hover\:bg-red-100:hover { background-color: #fee2e2; } .hover\:bg-red-600:hover { background-color: #dc2626; } .hover\:bg-secondary\/5:hover { background-color: rgb(var(--ch-secondary) / 0.05); } .hover\:bg-secondary\/90:hover { background-color: rgb(var(--ch-secondary) / 0.9); } .hover\:bg-slate-50:hover { background-color: #f8fafc; } .hover\:bg-slate-100:hover { background-color: #f1f5f9; } .hover\:bg-slate-200:hover { background-color: #e2e8f0; } .hover\:bg-teal-100:hover { background-color: #ccfbf1; } .hover\:border-primary:hover { border-color: var(--color-primary); } .hover\:border-primary\/20:hover { border-color: rgb(var(--ch-primary) / 0.2); } .hover\:border-secondary\/20:hover { border-color: rgb(var(--ch-secondary) / 0.2); } .hover\:opacity-80:hover { opacity: 0.8; } .hover\:opacity-100:hover { opacity: 1; } .hover\:rotate-180:hover { --tw-rotate: 180deg; transform: var(--tw-transform); } .hover\:scale-\[1\.02\]:hover { --tw-scale-x: 1.02; --tw-scale-y: 1.02; transform: var(--tw-transform); } .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: var(--tw-transform); } .hover\:text-primary:hover { color: var(--color-primary); } .hover\:text-secondary:hover { color: var(--color-secondary); } .hover\:translate-x-1:hover { --tw-translate-x: 0.25rem; transform: var(--tw-transform); } .hover\:translate-y-0:hover { --tw-translate-y: 0; transform: var(--tw-transform); } .hover\:underline:hover { text-decoration-line: underline; } /* ================================================================ ACTIVE VARIANTS ================================================================ * .active\:scale-\[0\.98\]:active { --tw-scale-x: 0.98; --tw-scale-y: 0.98; transform: var(--tw-transform); } .active\:scale-90:active { --tw-scale-x: 0.9; --tw-scale-y: 0.9; transform: var(--tw-transform); } .active\:scale-95:active { --tw-scale-x: 0.95; --tw-scale-y: 0.95; transform: var(--tw-transform); } /* ================================================================ FOCUS VARIANTS ================================================================ * .focus\:outline-none:focus { outline: none; } .focus\:ring-2:focus { --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus\:ring-primary\/20:focus { --tw-ring-color: rgb(var(--ch-primary) / 0.2); } /* ================================================================ DARK MODE VARIANTS (The existing