frontend: wisp.place theme
Re-point the design tokens at wisp.place's landing-page palette (paper, ink, rose, pink, lilac, butter, mint, sky; dusky purple in dark mode) and type (Fraunces display headings, JetBrains Mono body, Caveat kickers, loaded from Google Fonts like the landing page). Buttons become bordered pills with hard offset shadows that lift on hover, fields get 2px ink borders, an inset shadow and a pink focus ring. Motion is dropped under prefers-reduced-motion. signup.css carries the sign-up card, field and button styles shared by the registration, verification, passkey, SSO-completion and consent screens.
2 unmodified lines3456789101112139141516171318192021225 unmodified lines2 unmodified lines <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tranquil PDS</title> <meta name="theme-color" content="#fbf3ec" media="(prefers-color-scheme: light)" /> <meta name="theme-color" content="#1c1830" media="(prefers-color-scheme: dark)" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..800,100,1;1,9..144,400..800,100,1&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" /> <style> html { background: #f9fafa; background: oklch(0.986 0.008 345); } @media (prefers-color-scheme: dark) { html { background: #0a0c0c; background: oklch(0.21 0.035 290); } } </style> </head>5 unmodified lines1234567894 unmodified linesimport "./styles/base.css";import "./styles/pages.css";import "./styles/dashboard.css";import "./styles/migration.css";import "./styles/signup.css";import App from "./App.svelte";import { mount } from "svelte";
const app = mount(App, {4 unmodified lines1 unmodified line23456678910111212131415162 unmodified lines192021222323242526275 unmodified lines33343536373839404142434414 unmodified lines59606162635964656667689 unmodified lines7879808177828384858687888990919293878894959697989910010110210310410510610710821 unmodified lines1301311321331201341351221231361371381391401251261411421431441451461301471481491501511521531541551561571581591601611341621631641651661391401671681691701431441451711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102115 unmodified lines217218219220161221222223224225526 unmodified linesExpand all752753754755696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737756757758759341 unmodified linesExpand all11011102110311041087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281105110611071108298 unmodified linesExpand all14071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461 unmodified line
@property --accent { syntax: "<color>"; inherits: true; initial-value: #1a1d1d; initial-value: oklch(0.50 0.160 9);}
@property --secondary { syntax: "<color>"; inherits: true; initial-value: #1a1d1d; initial-value: oklch(0.50 0.160 9);}
*,*::before,2 unmodified lines}
body { margin: 0; font-family: system-ui, sans-serif; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-primary);5 unmodified lines
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--leading-tight); font-family: var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: var(--font-bold); letter-spacing: -0.02em;}
h1 { font-size: var(--text-2xl);14 unmodified lines
a { color: var(--secondary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; text-underline-offset: 3px;}
a:hover { color: var(--secondary-hover);9 unmodified lines font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal); padding: var(--space-4); border: 1px solid var(--border-dark); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--bg-input); box-shadow: inset 2px 2px 0 color-mix(in oklch, var(--shadow) 45%, transparent); color: var(--text-primary); width: 100%;}
input:focus,select:focus,textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 2px var(--secondary-muted); box-shadow: var(--shadow-focus);}
input[type="checkbox"],input[type="radio"] { width: auto; padding: 0; box-shadow: none; accent-color: var(--rose);}
input:disabled,select:disabled,textarea:disabled { background: var(--bg-input-disabled);21 unmodified lines justify-content: center; gap: var(--space-2); font-family: inherit; font-size: var(--text-base); font-weight: var(--font-medium); font-weight: var(--font-bold); line-height: var(--leading-normal); padding: var(--space-2) var(--space-4); border: none; padding: var(--space-3) var(--space-6); border: 2px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-md); cursor: pointer; background: var(--accent); color: var(--text-inverse); background: var(--btn-bg); color: var(--btn-fg); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;}
button:hover:not(:disabled) { background: var(--accent-hover); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow);}
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow);}
button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px;}
button:disabled { opacity: 0.6; opacity: 0.55; cursor: not-allowed;}
button.secondary { background: transparent; color: var(--secondary); background: var(--card); color: var(--ink);}
button.secondary:hover:not(:disabled) { background: var(--secondary); color: var(--text-inverse);button.tertiary,button.ghost,button.link,button.icon,button.danger-outline,button.cancel,.tab,.toggle-button,.close-btn,.toast-dismiss,.forget-btn { border: none; box-shadow: none;}
button.tertiary:hover:not(:disabled),button.ghost:hover:not(:disabled),button.link:hover:not(:disabled),button.icon:hover:not(:disabled),.tab:hover:not(:disabled),.close-btn:hover,.toast-dismiss:hover,.forget-btn:hover { transform: none; box-shadow: none;}
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover:not(:disabled), button:active:not(:disabled) { transform: none; }}
button.tertiary { background: transparent; color: var(--text-secondary); padding: var(--space-2) var(--space-3);5 unmodified lines}
button.danger { background: var(--danger-bg); color: var(--text-inverse); color: var(--paper);}
button.danger:hover:not(:disabled) { background: var(--danger-bg-hover);526 unmodified linesExpand all.warning-box li:last-child { margin-bottom: 0;}
.migrate-callout { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--accent-muted); margin-bottom: var(--space-6);}
.migrate-icon { font-size: var(--text-2xl); line-height: 1; color: var(--secondary);}
.migrate-content { flex: 1;}
.migrate-content strong { display: block; color: var(--text-primary); margin-bottom: var(--space-2);}
.migrate-content p { margin: 0 0 var(--space-3) 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed);}
.migrate-link { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--secondary); text-decoration: none;}
.migrate-link:hover { text-decoration: underline;}
.app-password-step { display: flex; flex-direction: column; gap: var(--space-5);341 unmodified linesExpand all height: 40px; background: var(--bg-tertiary);}
.account-type-switcher { display: flex; gap: var(--space-2); padding: var(--space-1); background: var(--bg-secondary); margin-bottom: var(--space-6);}
.switcher-option { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--text-secondary); font-weight: var(--font-medium);}
.switcher-option:hover { color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none;}
.switcher-option.active { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-sm);}
.switcher-option.disabled { opacity: 0.4; cursor: not-allowed;}
.switcher-option.disabled:hover { color: var(--text-secondary); background: transparent;}
.handle-input-group { display: flex; gap: var(--space-2); align-items: center;298 unmodified linesExpand all
.toggle-button.on .toggle-slider { transform: translateX(24px);}
.message,.warning-box,.info-box,.info-panel,.card,section,.app-password-display,.app-password-code,.provider-badge,.bot-hint,fieldset { border-radius: var(--radius-md);}
.message { font-weight: var(--font-semibold);}
main { position: relative; z-index: 1;}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--bloom); background-image: radial-gradient(circle at 20% 30%, oklch(0.83 0.095 5 / 0.35), transparent 40%), radial-gradient(circle at 85% 15%, oklch(0.84 0.075 300 / 0.35), transparent 35%), radial-gradient(circle at 70% 85%, oklch(0.93 0.095 95 / 0.35), transparent 40%);}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402/* Sign-up screens, matching wisp.place's sign-in dialog (.door-dialog). */
.signup-page { display: grid; justify-items: center; align-content: start; gap: var(--space-5); min-height: 100vh; padding: clamp(1.5rem, 6vh, 4.5rem) 1rem 3rem;}
.signup-card { position: relative; width: min(30rem, 100%); padding: 1.75rem 1.6rem 1.5rem; border: 3px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: 6px 6px 0 var(--shadow); animation: signup-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;}
.signup-card .panel { animation: signup-panel 320ms cubic-bezier(0.22, 1, 0.36, 1) both;}
@keyframes signup-pop { from { opacity: 0; scale: 0.96; }}
@keyframes signup-panel { from { opacity: 0; transform: translateX(14px); }}
.signup-heading { text-align: center; margin-bottom: 1.25rem;}
.kicker { display: inline-block; font-family: var(--hand); font-size: 1.45rem; line-height: 1; color: var(--rose); transform: rotate(-3deg);}
.signup-title { margin: 0.25rem 0 0.35rem; font-family: var(--display); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(1.7rem, 5vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;}
.signup-sub { color: var(--ink-soft); font-size: 0.9rem;}
.signup-sub strong { color: var(--ink);}
.signup-form { display: grid; gap: 1.05rem;}
.signup-form > div { display: block;}
.signup-label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--ink);}
.signup-label .optional { font-weight: 500; color: var(--ink-soft);}
.wisp-field { display: flex; align-items: center; min-width: 0; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: inset 2px 2px 0 color-mix(in oklch, var(--shadow) 45%, transparent); transition: box-shadow 150ms ease;}
.wisp-field:focus-within { box-shadow: var(--shadow-focus);}
.wisp-field.bad { border-color: var(--error-text);}
.wisp-field.good { border-color: var(--success-text);}
.wisp-field input,.wisp-field select { flex: 1; min-width: 0; width: auto; padding: 0.72rem 0.85rem; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: var(--ink); font: inherit; font-size: 1rem;}
.wisp-field input:focus,.wisp-field select:focus { box-shadow: none;}
.wisp-field .affix { flex: none; color: var(--ink-soft); font-weight: 600;}
.wisp-field .affix.at { padding-left: 0.85rem;}
.wisp-field .affix.at + input { padding-left: 0.15rem;}
.wisp-field .affix.domain { padding-right: 0.85rem; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wisp-field input:has(+ .affix.domain) { padding-right: 0.1rem;}
.wisp-field select.affix { flex: none; padding: 0.72rem 1.9rem 0.72rem 0.1rem; background-position: right 0.75rem center;}
.wisp-field .reveal { flex: none; margin-right: 0.35rem; padding: 0.3rem 0.65rem; border: 0; border-radius: 999px; box-shadow: none; background: transparent; color: var(--ink-soft); font-size: 0.8rem; font-weight: 700;}
.wisp-field .reveal:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--paper-2); color: var(--ink);}
.signup-hint { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--ink-soft);}
.signup-hint.good { color: var(--success-text); font-weight: 600;}
.signup-hint.bad { color: var(--error-text); font-weight: 600;}
.wisp-error { margin: 0; padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--error-bg); color: var(--error-text); font-size: 0.85rem; font-weight: 600;}
.wisp-note { margin: 0; padding: 0.55rem 0.75rem; border-radius: 12px; background: var(--success-bg); color: var(--success-text); font-size: 0.85rem; font-weight: 600;}
button.btn-pop { width: 100%; padding: 0.85rem 1.4rem; font-size: 1rem;}
button.btn-pop:hover:not(:disabled) { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 5px 5px 0 var(--shadow);}
button.btn-pop.alt { background: var(--card); color: var(--ink);}
button.btn-pop.mint { background: var(--mint); color: var(--on-pastel);}
.signup-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0; color: var(--ink-soft); font-family: var(--hand); font-size: 1.25rem;}
.signup-or::before,.signup-or::after { content: ""; flex: 1; border-top: 2px dashed var(--hairline);}
.sso-stack { display: grid; gap: 0.6rem;}
.signup-fine { margin: 1.1rem 0 0; text-align: center; color: var(--ink-soft); font-size: 0.82rem;}
.signup-fine a,.text-link { padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-weight: 600; color: var(--rose); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer;}
button.text-link:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--ink);}
.signup-leave { color: var(--ink-soft); font-size: 0.82rem; font-weight: 500;}
.signup-leave:hover:not(:disabled) { color: var(--ink);}
.signup-turnstile { display: flex; justify-content: center;}
.signup-turnstile .turnstile { display: flex; flex-direction: column; align-items: center;}
.signup-going { display: grid; justify-items: center; gap: 0.75rem; padding: 1.25rem 0 0.5rem; text-align: center; color: var(--ink-soft);}
.signup-going .dot-row { display: flex; gap: 0.35rem;}
.signup-going .dot-row span { width: 0.6rem; height: 0.6rem; border: 2px solid var(--line); border-radius: 50%; background: var(--pink); animation: signup-bob 1.2s ease-in-out infinite;}
.signup-going .dot-row span:nth-child(2) { background: var(--butter); animation-delay: 0.15s; }.signup-going .dot-row span:nth-child(3) { background: var(--mint); animation-delay: 0.3s; }
@keyframes signup-bob { 50% { transform: translateY(-6px); }}
.signup-form > .signup-actions { display: grid; gap: 0.75rem;}
.signup-skip { justify-self: center;}
.consent-container .client-info,.consent-container .account-info,.consent-container .scope-item { border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--card);}
.consent-container .client-info { box-shadow: var(--shadow-md);}
.consent-container .actions button { border: 2px solid var(--line); box-shadow: var(--shadow-md);}
.consent-container .actions button.cancel,.consent-container .actions button.secondary { background: var(--card); color: var(--ink);}
@media (max-width: 480px) { .signup-page { padding: 1rem 0.75rem 2rem; } .signup-card { padding: 1.4rem 1.1rem 1.2rem; box-shadow: 4px 4px 0 var(--shadow); }}
@media (prefers-reduced-motion: reduce) { .signup-card, .signup-card .panel, .signup-going .dot-row span { animation: none; } .wisp-field { transition: none; } button.btn-pop:hover:not(:disabled) { transform: none; }}32 unmodified lines3334353637383940373839404142434243444546474849505152535455565758596061456263646566676869474849505152537071725556575873747576777879806061628182838485646566678687888969707190919293947374759596979877787999100101102818283103104105106858610710810911088891111121131141151161171181191201211229697989910010110212312412512612712812913013113213313410410510610713513613713813910911011114014114214311311411511614414514614711811912014814915015112212312415215315412612712812913013113213313413513613713815515615715815932 unmodified lines --width-md: 760px; --width-lg: 960px; --width-xl: 1100px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-focus: 0 0 0 2px var(--secondary-muted); --display: "Fraunces", "Iowan Old Style", Georgia, serif; --hand: "Caveat", "Comic Sans MS", cursive; --font-body: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--z-modal: 1000; --overlay-bg: rgba(0, 0, 0, 0.5); /* wisp.place palette (apps/main-app/public/landingpage.html) */ --paper: oklch(0.986 0.008 345); --paper-2: oklch(0.958 0.021 348); --ink: oklch(0.26 0.031 352); --ink-soft: oklch(0.45 0.031 350); --line: oklch(0.45 0.06 355); --rose: oklch(0.50 0.160 9); --pink: oklch(0.85 0.08 5); --lilac: oklch(0.84 0.075 300); --butter: oklch(0.93 0.095 95); --mint: oklch(0.89 0.075 165); --sky: oklch(0.88 0.06 235); --card: oklch(0.996 0.003 345); --shadow: oklch(0.85 0.07 5); --hairline: oklch(0.875 0.035 348); --btn-bg: var(--pink); --btn-fg: oklch(0.30 0.06 355); --on-pastel: oklch(0.26 0.031 352); --bloom: 0.35;
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace; --shadow-sm: 2px 2px 0 var(--shadow); --shadow-md: 3px 3px 0 var(--shadow); --shadow-lg: 6px 6px 0 var(--shadow); --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--pink) 70%, transparent); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px;
--bg-primary: #f9fafa; --bg-secondary: #f1f3f3; --bg-tertiary: #e8ebeb; --bg-hover: #e8ebeb; --bg-card: #ffffff; --bg-input: #ffffff; --bg-input-disabled: #f1f3f3; --z-modal: 1000; --overlay-bg: color-mix(in oklch, oklch(0.26 0.031 352) 30%, transparent);
--text-primary: #1a1d1d; --text-secondary: #5a605f; --text-muted: #8a8f8e; --text-inverse: #ffffff; --bg-primary: var(--paper); --bg-secondary: var(--paper-2); --bg-tertiary: color-mix(in oklch, var(--paper-2) 80%, var(--pink)); --bg-hover: var(--bg-tertiary); --bg-card: var(--card); --bg-input: var(--card); --bg-input-disabled: var(--paper-2);
--border-color: #dce0df; --border-light: #e8ebeb; --border-dark: #c8cecc; --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: color-mix(in oklch, var(--ink-soft) 75%, var(--paper)); --text-inverse: var(--paper);
--accent: #1a1d1d; --accent-hover: #2e3332; --accent-muted: rgba(26, 29, 29, 0.06); --accent-light: #3a403f; --border-color: var(--hairline); --border-light: var(--hairline); --border-dark: var(--line);
--secondary: #1a1d1d; --secondary-hover: #2e3332; --secondary-muted: rgba(26, 29, 29, 0.06); --accent: var(--rose); --accent-hover: color-mix(in oklch, var(--rose) 85%, var(--ink)); --accent-muted: color-mix(in oklch, var(--pink) 30%, transparent); --accent-light: var(--pink);
--success-bg: #dfd; --success-border: #8c8; --success-text: #060; --secondary: var(--rose); --secondary-hover: color-mix(in oklch, var(--rose) 80%, var(--ink)); --secondary-muted: color-mix(in oklch, var(--pink) 45%, transparent);
--error-bg: #fee; --error-border: #fcc; --error-text: #c00; --success-bg: color-mix(in oklch, var(--mint) 55%, var(--card)); --success-border: var(--mint); --success-text: oklch(0.42 0.09 165);
--warning-bg: #ffd; --warning-border: #d4a03c; --warning-text: #856404; --error-bg: oklch(0.95 0.04 25); --error-border: oklch(0.80 0.10 25); --error-text: oklch(0.50 0.18 25);
--danger-bg: #c00; --danger-bg-hover: #a00; --warning-bg: color-mix(in oklch, var(--butter) 60%, var(--card)); --warning-border: var(--butter); --warning-text: oklch(0.45 0.09 75);
--info-bg: #e0f2fe; --info-text: #0369a1; --danger-bg: oklch(0.55 0.18 25); --danger-bg-hover: oklch(0.48 0.18 25);
--info-bg: color-mix(in oklch, var(--sky) 50%, var(--card)); --info-text: oklch(0.42 0.08 235);
--border-color-light: var(--border-dark); color-scheme: light;}
@media (prefers-color-scheme: dark) { :root { --bg-primary: #0a0c0c; --bg-secondary: #131616; --bg-tertiary: #1a1d1d; --bg-hover: #1a1d1d; --bg-card: #131616; --bg-input: #1a1d1d; --bg-input-disabled: #131616; --paper: oklch(0.21 0.035 290); --paper-2: oklch(0.18 0.035 290); --ink: oklch(0.94 0.012 330); --ink-soft: oklch(0.76 0.03 320); --line: oklch(0.10 0.03 290); --rose: oklch(0.83 0.11 5); --card: oklch(0.27 0.035 290); --shadow: oklch(0.08 0.03 290 / 0.9); --hairline: oklch(0.34 0.04 290); --btn-fg: oklch(0.26 0.031 352); --bloom: 0.5;
--text-primary: #e6e8e8; --text-secondary: #9ca1a0; --text-muted: #686d6c; --text-inverse: #0a0c0c; --text-inverse: var(--paper); --bg-tertiary: color-mix(in oklch, var(--card) 80%, var(--lilac)); --accent-muted: color-mix(in oklch, var(--pink) 18%, transparent); --secondary-muted: color-mix(in oklch, var(--pink) 30%, transparent);
--border-color: #282c2b; --border-light: #1f2322; --border-dark: #343938; --success-bg: oklch(0.30 0.05 165); --success-border: oklch(0.40 0.06 165); --success-text: oklch(0.85 0.09 165);
--accent: #e6e8e8; --accent-hover: #ffffff; --accent-muted: rgba(230, 232, 232, 0.1); --accent-light: #ffffff; --error-bg: oklch(0.30 0.06 25); --error-border: oklch(0.42 0.09 25); --error-text: oklch(0.82 0.11 25);
--secondary: #e6e8e8; --secondary-hover: #ffffff; --secondary-muted: rgba(230, 232, 232, 0.1); --warning-bg: oklch(0.31 0.05 85); --warning-border: oklch(0.42 0.07 85); --warning-text: oklch(0.88 0.09 90);
--success-bg: #0f1f1a; --success-border: #1a3d2d; --success-text: #7bc6a0; --danger-bg: oklch(0.72 0.14 25); --danger-bg-hover: oklch(0.78 0.13 25);
--error-bg: #1f0f0f; --error-border: #3d1a1a; --error-text: #ff8a8a;
--warning-bg: #1f1a0f; --warning-border: #3d351a; --warning-text: #c6b87b;
--danger-bg: #ff8a8a; --danger-bg-hover: #ff6b6b;
--info-bg: #0c2d48; --info-text: #7bc6f0; --info-bg: oklch(0.30 0.05 235); --info-text: oklch(0.85 0.07 235); color-scheme: dark; }}