/* ═══════════════════════════════════════════════════════════ SKIPPER DESIGN TOKENS Single source of truth for color, space, radius, and type. Dark is the default brand mode; light mode overrides the same custom properties under :root[data-theme="light"]. js/theme.js stamps that attribute in before the first paint and is what resolves the "follow my device" case, so the attribute is never absent and there is exactly ONE definition of the light palette — no prefers-color-scheme copy to keep in step by hand. The org accent is set at runtime from organizations.primary_color (js/boot.js) — everything accent-colored derives from --accent. ═══════════════════════════════════════════════════════════ */ :root{ /* ── Accent (per-org) ── */ --accent:#F5A623; --accent-dim:color-mix(in srgb, var(--accent) 13%, transparent); --accent-border:color-mix(in srgb, var(--accent) 32%, transparent); --accent-strong:color-mix(in srgb, var(--accent) 85%, black); --accent-text:var(--accent); /* readable accent for text on surfaces */ --on-accent:#141414; /* text on accent-filled elements */ /* The keyboard focus ring, and its own token because it is a third job: --accent fills things, --accent-text is read as text, this is a 2px indicator that has to clear 3:1 against whatever it lands on (WCAG 2.4.11). Derived from --accent rather than fixed, because --accent is set per-org at runtime from organizations.primary_color. 9.7:1 on --bg here. */ --focus-ring:var(--accent); /* ── Surfaces ── */ --bg:#0B0B0D; --surface-1:#141416; --surface-2:#1E1E21; --surface-3:#29292D; --overlay:rgba(0,0,0,.6); --border:#26262A; --border-strong:#3A3A40; /* ── Text ── */ --text-1:#F4F4F5; --text-2:#A6A6AE; --text-3:#9A9AA3; /* WCAG AA: ≥4.5:1 on surface-2 for small functional text (MOB-001) */ --input-border:#727280; /* ≥3:1 vs input bg so field edges are visible (MOB-012) */ /* ── Semantic ── */ --success:#2FBF63; --success-dim:rgba(47,191,99,.12); --success-border:rgba(47,191,99,.3); --danger:#F25555; /* 4.85:1 on --danger-dim over a card; #EF4444 was 4.36 (#114) */ --danger-dim:rgba(239,68,68,.12); --danger-border:rgba(239,68,68,.3); --info:#3B82F6; --info-dim:rgba(59,130,246,.12); --info-border:rgba(59,130,246,.3); /* ── Spacing ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:48px; /* ── Radius ── */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px; /* ── Type ── */ --font-display:'Bebas Neue',sans-serif; /* brand display: logo + page titles only */ --font-ui:'DM Sans',system-ui,sans-serif; --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px; --fs-display:38px; /* ── Elevation ── */ --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 28px rgba(0,0,0,.5); /* ── Motion ── Net-new convention: nothing consumed timing tokens before these existed, and the ~40 hard-coded durations already in app.css are being adopted opportunistically rather than in one sweep. --ease-spring is the bdgPop curve, named. */ --dur-1:110ms; --dur-2:180ms; --dur-3:320ms; --dur-4:600ms; --ease-out:cubic-bezier(.2,.8,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); /* ── Layout ── */ --content-max:1040px; --topbar-h:56px; --tabbar-h:60px; --sidebar-w:216px; color-scheme:dark; } :root[data-theme="light"]{ /* 58%, from 62%: on a plain surface 62% cleared 4.5:1, but --accent-text is routinely set ON --accent-dim (the role pill, gold chips), and that tint lifts the background just enough to land at 4.48:1 (#114). Sized against the tint, not the card. --focus-ring stays at 62% deliberately: an indicator wants to stay as vivid as 3:1 allows, and it measures 4.53:1. */ --accent-text:color-mix(in srgb, var(--accent) 58%, black); --on-accent:#141414; /* Brand gold on a light ground is 1.87:1 — the ring rendered, and rendered under the bar, for every keyboard user on every screen. The comment on app.css's :focus-visible claimed >=3:1 (MOB-002) and was measured in dark, when light mode could not yet be reached. 4.57:1 on --bg, 4.9:1 on white. */ --focus-ring:color-mix(in srgb, var(--accent) 62%, black); --bg:#F6F6F4; --surface-1:#FFFFFF; --surface-2:#F0F0EE; --surface-3:#E6E6E3; --overlay:rgba(20,20,22,.45); --border:#E2E2DF; --border-strong:#C9C9C5; --text-1:#1B1B1F; --text-2:#5A5A62; --text-3:#6C6C74; /* ≥4.5:1 on light surfaces (MOB-001) */ /* Was #B4B4B0, which measured 2.08:1 on white and 1.94:1 on --bg — the token carried the ">=3:1 so field edges are visible" promise and did not keep it in light. Same shape as the focus ring above: written and measured when only the dark theme could be reached. 3.76:1 on white, 3.50:1 on --bg, 3.29:1 on --surface-2, 3.03:1 on --surface-3 — checked against the darkest surface a field or an outline button actually lands on. */ --input-border:#848480; --success:#178A45; --success-dim:rgba(23,138,69,.1); --success-border:rgba(23,138,69,.28); --danger:#C22222; /* same check in light: #D42B2B measured 4.45 on the tint (#114) */ --danger-dim:rgba(212,43,43,.08); --danger-border:rgba(212,43,43,.26); --info:#2563EB; --info-dim:rgba(37,99,235,.08); --info-border:rgba(37,99,235,.26); --shadow-1:0 1px 2px rgba(20,20,22,.08); --shadow-2:0 8px 28px rgba(20,20,22,.16); color-scheme:light; } /* ── Compatibility aliases (migration only — remove once no references remain) ── */ :root{ --gold:var(--accent); --gold-dim:var(--accent-dim); --gold-border:var(--accent-border); --s1:var(--surface-1); --s2:var(--surface-2); --s3:var(--surface-3); --white:var(--text-1); --gray:var(--text-2); --gray2:var(--text-3); --green:var(--success); --green-dim:var(--success-dim); --green-border:var(--success-border); --red:var(--danger); --red-dim:var(--danger-dim); --red-border:var(--danger-border); --blue:var(--info); --blue-dim:var(--info-dim); }