/* ========================================================================== SUBLEEVA -- prototype design tokens (v0.3, July 2026) Daylight authority -- single light theme -- WCAG 2.2 AA verified Contrast ratios in comments are computed against adjacent surfaces. Rule 1: colour never carries meaning alone -- every state pairs an icon/label. Rule 2: amber is never text on canvas; use --state-mutation-ink instead. ========================================================================== */ :root { /* ---- Surfaces (three layers; borders do the separation work) ---- */ --canvas: #F2EDE2; /* app background -- deepened from brand ivory */ --surface: #FBF9F3; /* cards, panels, table headers */ --field: #FFFFFF; /* inputs, editable cells */ --ivory-brand: #F7F4EC; /* marketing/brand surfaces only, not app UI */ /* ---- Borders ---- */ --border-strong: #857E6F; /* interactive boundaries: 3.5:1 vs canvas, 4.0:1 vs field -- WCAG 2.2 1.4.11 */ --border-soft: #DAD4C6; /* decorative dividers only, never control edges */ /* ---- Ink ---- */ --text: #1C1B18; /* 14.8:1 on canvas */ --text-secondary: #5C574C; /* 6.2:1 on canvas */ --text-placeholder:#6B655A; /* 5.8:1 on field white */ /* ---- States (always icon + label alongside) ---- */ --state-mutation: #F59E0B; /* fills/badges only */ --state-mutation-ink: #92400E; /* amber-as-text, 6:1 on canvas */ --state-success: #0E7A6C; /* teal, never green: 4.6:1 text on canvas */ --state-danger: #C2372B; /* 4.7:1 on canvas; requires icon */ /* ---- Geometry ---- */ --radius-field: 8px; --radius-card: 12px; --space: 4px; /* base unit; use multiples */ --target-min: 24px; /* WCAG 2.2 2.5.8 minimum target */ --row-height: 36px; /* comfortable data-row default */ /* ---- Type (free stand-ins; upgradeable without token changes) ---- */ --font-ui: "Inter", system-ui, sans-serif; --font-voice: "Source Serif 4", Georgia, serif; /* advisory/teaching moments only */ --fs-meta: 12px; --fs-small: 13px; --fs-body: 14px; --fs-section: 16px; --fs-panel: 20px; --fs-page: 28px; --lh-tight: 1.3; --lh-body: 1.5; } /* ---- Accent themes: swap data-theme on for concept-test cells ---- */ [data-theme="cobalt"] { --accent: #2D5BFF; /* fills; white text on it = 5.2:1 */ --accent-ink: #1E46E0; /* links/text; 6.0:1 on canvas (2D5BFF fails at 4.4:1) */ --accent-hover: #1E46E0; --accent-wash: #E4EAFF; /* selected rows, quiet highlights */ } [data-theme="rust"] { --accent: #A84B24; /* deeper than the AI-default terracotta zone; white text = 5.7:1 */ --accent-ink: #A84B24; /* 4.9:1 on canvas -- passes as text directly */ --accent-hover: #8F3F1E; --accent-wash: #F3E4DB; } /* ========================================================================== Base components ========================================================================== */ body { background: var(--canvas); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--font-ui); font-feature-settings: "tnum" 1; /* tabular numerals for data columns */ } .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: calc(var(--space) * 5); } /* ---- Fields: the contrast fix. White fill + strong border + real focus ---- */ .field { background: var(--field); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-field); min-height: var(--row-height); padding: 0 calc(var(--space) * 3); font: inherit; } .field::placeholder { color: var(--text-placeholder); } .field:hover { border-color: var(--text-secondary); } .field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--text); } .field:disabled { background: var(--surface); border-color: var(--border-soft); color: var(--text-secondary); } .field[aria-invalid="true"] { border-color: var(--state-danger); } /* error message = icon + text in --state-danger, below the field */ /* ---- Buttons ---- */ .btn-primary { background: var(--accent); color: #FFFFFF; border: none; border-radius: var(--radius-field); min-height: var(--row-height); min-width: var(--target-min); padding: 0 calc(var(--space) * 4); font: 500 var(--fs-body) var(--font-ui); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--field); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-field); min-height: var(--row-height); padding: 0 calc(var(--space) * 4); } .btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a { color: var(--accent-ink); } /* ---- State badges (icon + label always; colour is reinforcement) ---- */ .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: var(--fs-small); font-weight: 500; } .badge-mutation { background: var(--state-mutation); color: var(--text); } /* 7.9:1 */ .badge-success { background: var(--state-success); color: #FFFFFF; } /* 5.4:1 */ .badge-danger { background: var(--state-danger); color: #FFFFFF; } /* 4.9:1 */ .badge-pending { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border-strong); } /* ---- Human intervention gate: the signature moment of each pillar. Ink-outlined, serif-voiced -- the point where the person takes over. ---- */ .gate { background: var(--ivory-brand); border: 1.5px solid var(--text); border-radius: var(--radius-card); padding: calc(var(--space) * 5); } .gate-title { font: 600 var(--fs-section) var(--font-voice); } .gate-explain { color: var(--text-secondary); font-size: var(--fs-small); } /* .gate-explain teaches *why* approval is needed here, not just what to click */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }