/* Dark carbon theme — secondary. Opt in with data-theme="dark" on , or data-theme="auto" to follow the OS via prefers-color-scheme. The deep brand red is too dark to read on carbon, so accent TEXT lightens to #FF7A7A (7.4:1) there; fills keep the deep ramp with white labels. Danger stays off red here too — burnt orange lightens to #FF8A4C so an error never reads as a link or a focus ring. */ [data-theme="dark"]{ --surface-canvas:var(--carbon-800); --surface-sunken:var(--carbon-900); --surface-raised:var(--carbon-700); --surface-card:var(--carbon-700); --surface-card-hover:var(--carbon-600); --surface-inset:var(--carbon-600); --surface-overlay:rgba(11,11,11,.78); --surface-accent:var(--red-tint-08); --surface-tooltip:var(--carbon-500); --header-bg:rgba(18,18,18,.78); --text-primary:var(--movu-white); --text-secondary:var(--gray-300); --text-muted:var(--gray-500); --text-accent:#FF7A7A; --text-on-accent:var(--movu-white); --text-inverse:var(--carbon-800); --text-tooltip:var(--movu-white); --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.24); --border-accent:var(--red-line-50); --focus-ring:#FF7A7A; --hover-wash:rgba(255,255,255,.06); --press-wash:rgba(255,255,255,.03); --action-primary-fg:var(--movu-white); --action-secondary-fg:var(--movu-white); --link-color:#FF7A7A; --link-color-hover:#FFA8A8; --info-500:#C9C9C9; --success-500:#29D98C; --warning-500:#E0A82E; --danger-500:#FF8A4C; --success-tint:rgba(41,217,140,.12); --warning-tint:rgba(224,168,46,.12); --danger-tint:rgba(255,138,76,.14); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55); --shadow-overlay:0 32px 90px rgba(0,0,0,.7); --scrim-top:linear-gradient(180deg,rgba(11,11,11,.9),rgba(11,11,11,0)); /* @kind other */ --scrim-bottom:linear-gradient(0deg,rgba(11,11,11,.92),rgba(11,11,11,0)); /* @kind other */ } @media (prefers-color-scheme:dark){ [data-theme="auto"]{ --surface-canvas:var(--carbon-800); --surface-sunken:var(--carbon-900); --surface-raised:var(--carbon-700); --surface-card:var(--carbon-700); --surface-card-hover:var(--carbon-600); --surface-inset:var(--carbon-600); --surface-overlay:rgba(11,11,11,.78); --surface-accent:var(--red-tint-08); --surface-tooltip:var(--carbon-500); --header-bg:rgba(18,18,18,.78); --text-primary:var(--movu-white); --text-secondary:var(--gray-300); --text-muted:var(--gray-500); --text-accent:#FF7A7A; --text-on-accent:var(--movu-white); --text-inverse:var(--carbon-800); --text-tooltip:var(--movu-white); --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.24); --border-accent:var(--red-line-50); --focus-ring:#FF7A7A; --hover-wash:rgba(255,255,255,.06); --press-wash:rgba(255,255,255,.03); --action-primary-fg:var(--movu-white); --action-secondary-fg:var(--movu-white); --link-color:#FF7A7A; --link-color-hover:#FFA8A8; --info-500:#C9C9C9; --success-500:#29D98C; --warning-500:#E0A82E; --danger-500:#FF8A4C; --success-tint:rgba(41,217,140,.12); --warning-tint:rgba(224,168,46,.12); --danger-tint:rgba(255,138,76,.14); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55); --shadow-overlay:0 32px 90px rgba(0,0,0,.7); --scrim-top:linear-gradient(180deg,rgba(11,11,11,.9),rgba(11,11,11,0)); /* @kind other */ --scrim-bottom:linear-gradient(0deg,rgba(11,11,11,.92),rgba(11,11,11,0)); /* @kind other */ } }