/* Arca workspace theme: the one place colours, type and radii are defined. macOS-style neutrals with a single blue accent; green, orange and red are semantics only and always sit beside words. Dark mode follows the system unless Preferences pins a theme with data-theme on . Every text colour clears WCAG AA (4.5:1) on each surface it sits on, including the translucent sidebar. That is why --dim and --accent-ink are darker than the mockup's #86868b and #007aff (3.6:1 and 4.0:1 on white): #007aff stays the brand value for rings, dots and icons, never small text. */ :root { --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,system-ui,sans-serif; --serif:var(--sans); --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --font-xs:11px; --font-sm:12px; --font-base:13px; --font-lg:15px; --font-xl:22px; --font-display:clamp(1.75rem,3vw,2.5rem); --radius-window:12px; --radius-card:10px; --radius-tile:7px; --radius-control:6px; --border-width:1px; --side:220px; --touch:44px; --toolbar:52px; } :root, :root[data-theme="light"] { color-scheme:light; --bg:#f5f5f7; --win:#ffffff; --panel:#ffffff; --card:#ffffff; --bubble:#f0f0f2; --side-bg:rgba(236,236,240,.78); --fill:rgba(0,0,0,.05); --text:#1d1d1f; --dim:#636366; --faint:#6e6e73; --border:rgba(0,0,0,.08); --line:rgba(0,0,0,.16); --hover:rgba(0,0,0,.05); --active:rgba(0,0,0,.1); --chip:rgba(0,0,0,.05); --accent:#007aff; --accent-ink:#0066cc; --accent-tint:rgba(0,122,255,.12); --accent-solid:#0071e3; --accent-solid-hover:#0068d6; --on-accent:#ffffff; --green:#34c759; --orange:#ff9500; --red:#ff3b30; --greenFg:#1f7a34; --greenTint:rgba(52,199,89,.14); --amberFg:#9a5b00; --amberTint:rgba(255,149,0,.14); --redFg:#c9251d; --redTint:rgba(255,59,48,.12); --switch-on:#248a3d; --switch-off:#8e8e93; --seg-on:#ffffff; --scrim:rgba(0,0,0,.32); --shadow:0 0 0 .5px rgba(0,0,0,.12), 0 12px 32px rgba(0,0,0,.14); --shadowSm:0 1px 3px rgba(0,0,0,.12); --window-shadow:0 0 0 .5px rgba(0,0,0,.14), 0 2px 10px rgba(0,0,0,.05); } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#1c1c1e; --win:#1e1e1e; --panel:#2c2c2e; --card:#1e1e1e; --bubble:#2c2c2e; --side-bg:rgba(40,40,42,.8); --fill:rgba(255,255,255,.07); --text:#f5f5f7; --dim:#aeaeb2; --faint:#98989d; --border:rgba(255,255,255,.1); --line:rgba(255,255,255,.18); --hover:rgba(255,255,255,.07); --active:rgba(255,255,255,.12); --chip:rgba(255,255,255,.07); --accent:#0a84ff; --accent-ink:#409cff; --accent-tint:rgba(10,132,255,.2); --accent-solid:#0071e3; --accent-solid-hover:#0068d6; --on-accent:#ffffff; --green:#30d158; --orange:#ff9f0a; --red:#ff453a; --greenFg:#30d158; --greenTint:rgba(48,209,88,.16); --amberFg:#ffb340; --amberTint:rgba(255,159,10,.16); --redFg:#ff6961; --redTint:rgba(255,69,58,.16); --switch-on:#248a3d; --switch-off:#6e6e73; --seg-on:#636366; --scrim:rgba(0,0,0,.55); --shadow:0 0 0 .5px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.45); --shadowSm:0 1px 3px rgba(0,0,0,.5); --window-shadow:0 0 0 .5px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.3); } } /* The same values again for a pinned dark theme: CSS cannot share one block between a media query and an attribute selector. Keep the two in step. */ :root[data-theme="dark"] { color-scheme:dark; --bg:#1c1c1e; --win:#1e1e1e; --panel:#2c2c2e; --card:#1e1e1e; --bubble:#2c2c2e; --side-bg:rgba(40,40,42,.8); --fill:rgba(255,255,255,.07); --text:#f5f5f7; --dim:#aeaeb2; --faint:#98989d; --border:rgba(255,255,255,.1); --line:rgba(255,255,255,.18); --hover:rgba(255,255,255,.07); --active:rgba(255,255,255,.12); --chip:rgba(255,255,255,.07); --accent:#0a84ff; --accent-ink:#409cff; --accent-tint:rgba(10,132,255,.2); --accent-solid:#0071e3; --accent-solid-hover:#0068d6; --on-accent:#ffffff; --green:#30d158; --orange:#ff9f0a; --red:#ff453a; --greenFg:#30d158; --greenTint:rgba(48,209,88,.16); --amberFg:#ffb340; --amberTint:rgba(255,159,10,.16); --redFg:#ff6961; --redTint:rgba(255,69,58,.16); --switch-on:#248a3d; --switch-off:#6e6e73; --seg-on:#636366; --scrim:rgba(0,0,0,.55); --shadow:0 0 0 .5px rgba(0,0,0,.6), 0 16px 40px rgba(0,0,0,.45); --shadowSm:0 1px 3px rgba(0,0,0,.5); --window-shadow:0 0 0 .5px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.3); }