| 1 | /* estilo — the Oficina suite's theme: Calma. |
| 2 | |
| 3 | Calma replaced rastrillo's day on 2026-09-29, by Paul's decision after |
| 4 | six rounds of design directions (AGENTS.md, decisions table, row 8). |
| 5 | Until then estilo WAS day, byte for byte; it is now its own theme, and |
| 6 | theme_test.go gates it on its own terms: the same token set day |
| 7 | declares (so rastrillo's tokens.css finds every name it uses), every |
| 8 | contrast pair rastrillo gates, in both schemes — for this file AND for |
| 9 | every app's accent block (apps.go) — and a golden per app so no value |
| 10 | moves without the diff saying so. |
| 11 | |
| 12 | The look: quiet, even and exact. A cool off-white page with white |
| 13 | cards, one grey text scale, soft 12px shapes with a long low shadow. |
| 14 | Colour belongs to the apps: every app's hue sits on one ring of equal |
| 15 | OKLCH lightness, so no app shouts over another, and the interface |
| 16 | tints to the app you are in (apps.go — --rst-accent and friends are |
| 17 | re-declared per app). This file's own accent is Oficina's, the suite's, |
| 18 | used where no app is in charge (sign-in, the team's home). |
| 19 | |
| 20 | Status tones are day's, unchanged: they are functional, not brand, and |
| 21 | a pill must never be mistaken for a link. |
| 22 | |
| 23 | ── One block, both schemes ─────────────────────────────────────────── |
| 24 | As day: every colour is light-dark(<light>, <dark>) under one :root |
| 25 | with color-scheme: light dark, and the two [data-theme] rules at the |
| 26 | bottom are the whole toggle. |
| 27 | |
| 28 | ── WCAG 2.2 AA ─────────────────────────────────────────────────────── |
| 29 | Every pair rastrillo's own gate checks is checked by |
| 30 | TestContrastMeetsWCAG, for this file and each app's accent, light and |
| 31 | dark, through rastrillo's ui.ContrastRatio. The tightest, at the time |
| 32 | of writing: faint text on an accent-tinted surface, 4.63:1 (Files, |
| 33 | dark); a control border on the sunk surface, 3.2:1 (light). |
| 34 | ──────────────────────────────────────────────────────────────────── */ |
| 35 | |
| 36 | :root { |
| 37 | color-scheme: light dark; |
| 38 | |
| 39 | /* Type: the family only. Sizes and spacing stay in tokens.css. Onest |
| 40 | where it is served (fonts.go), the system face where it is not. */ |
| 41 | --rst-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| 42 | |
| 43 | /* Shape: soft and exact. */ |
| 44 | --rst-radius: 12px; |
| 45 | --rst-radius-sm: 8px; |
| 46 | --rst-radius-pill: 999px; |
| 47 | |
| 48 | /* Surfaces and lines: a cool off-white page, white cards, a sunk grey. */ |
| 49 | --rst-bg: light-dark(#f5f6f8, #15171c); |
| 50 | --rst-surface: light-dark(#ffffff, #1c1f26); |
| 51 | --rst-surface-2: light-dark(#eceef2, #23262e); |
| 52 | --rst-line: light-dark(#e3e6eb, #2d313a); |
| 53 | --rst-line-strong: light-dark(#7f8591, #7a818e); |
| 54 | |
| 55 | /* The page header's rule: the accent folded into the line, as day. */ |
| 56 | --rst-header-rule: color-mix(in oklab, var(--rst-accent) 18%, var(--rst-line)); |
| 57 | |
| 58 | /* Text */ |
| 59 | --rst-text: light-dark(#262a33, #eceef2); |
| 60 | --rst-text-muted: light-dark(#565c69, #b4bac6); |
| 61 | --rst-text-faint: light-dark(#626875, #8f96a3); |
| 62 | |
| 63 | /* Accent: Oficina's, hue 262 on the ring (apps.go). Each app |
| 64 | re-declares these four. */ |
| 65 | --rst-accent: light-dark(#2e5bb4, #87b1fd); |
| 66 | --rst-accent-strong: light-dark(#214a9b, #afcbfe); |
| 67 | --rst-accent-soft: light-dark(#e9f1ff, #1f2b42); |
| 68 | --rst-on-accent: light-dark(#ffffff, #111418); |
| 69 | |
| 70 | /* Status tones: day's, unchanged. */ |
| 71 | --rst-tone-neutral-fg: light-dark(#374151, #c3c9d1); |
| 72 | --rst-tone-neutral-bg: light-dark(#eef0f2, #262c34); |
| 73 | --rst-tone-positive-fg: light-dark(#166534, #6ee7a8); |
| 74 | --rst-tone-positive-bg: light-dark(#dcfce7, #10281c); |
| 75 | --rst-tone-warning-fg: light-dark(#854d0e, #f0c46a); |
| 76 | --rst-tone-warning-bg: light-dark(#fef3c7, #2c2110); |
| 77 | --rst-tone-negative-fg: light-dark(#b91c1c, #f79aa0); |
| 78 | --rst-tone-negative-bg: light-dark(#fee2e2, #331819); |
| 79 | |
| 80 | /* Depth: a long, low, cool shadow; paper lifted, not stacked. */ |
| 81 | --rst-shadow-pop: 0 18px 44px -14px light-dark(rgba(20, 24, 33, 0.28), rgba(0, 0, 0, 0.6)); |
| 82 | --rst-shadow-knob: 0 1px 2px rgba(20, 24, 33, 0.3); |
| 83 | --rst-shadow-lift: 0 1px 1px rgba(20, 24, 33, 0.04), 0 14px 36px -14px light-dark(rgba(20, 24, 33, 0.22), rgba(0, 0, 0, 0.55)); |
| 84 | --rst-overlay: light-dark(rgba(20, 24, 33, 0.45), rgba(0, 0, 0, 0.6)); |
| 85 | } |
| 86 | |
| 87 | /* The whole toggle. Setting color-scheme re-resolves every light-dark() |
| 88 | above, so an explicit choice beats the OS in both directions without |
| 89 | restating a colour. */ |
| 90 | :root[data-theme="light"] { color-scheme: light; } |
| 91 | :root[data-theme="dark"] { color-scheme: dark; } |
| 92 | |
amadan