/* sporran.css — Sporran's theme on the Fiesta design system: Black Watch, worn quietly. The layout links Fiesta's tokens.css, then its Day theme, then this file, then the app's own components (app.css). Day supplies every structural token — depth, press, sizes, type ramp — and this file repaints it: near-neutral paper with the faintest green in the grey, a Black Watch navy as the one accent, and the tartan itself kept to where it costs nothing to read — the brand mark (the app icon, cloth in kilt pleats) and a thin selvedge band at the top of chrome. Nothing that carries a figure or a word sits on the sett. Authoring rule (Fiesta's Light-Dark Rule): every colour is declared once, as light-dark(, ). internal/apptest/contrast_test.go parses the pairs in this file over Day's and holds each documented pair to WCAG 2.2 AA in both schemes, so change a hex and rerun `go test ./internal/apptest/ -run TokenContrast -v`. Navy, not green, is the accent on purpose: green stays exclusive to credits (DESIGN.md's Accent Restraint Rule), and the Black Watch's bottle green lives only in the sett, at a strength that never reads as a signal. */ :root { /* ── Paper and ink ─────────────────────────────────────────────── */ --rst-bg: light-dark(#f6f7f6, #0b0e10); --rst-surface: light-dark(#ffffff, #12161a); --rst-surface-2: light-dark(#eff2f1, #171c20); --rst-line: light-dark(#e2e6e4, #242a2e); --rst-line-strong: light-dark(#7b8784, #6f7b80); --rst-text: light-dark(#14191d, #e9edef); --rst-text-muted: light-dark(#4a5458, #a3acb0); --rst-text-faint: light-dark(#5f696d, #8b959a); /* ── The accent: Black Watch navy. Where you are, and what acts. ── */ --rst-accent: light-dark(#23427a, #93b0e8); --rst-accent-strong: light-dark(#192f58, #b8cdf2); --rst-accent-soft: light-dark(#e8eef7, #152238); --rst-on-accent: light-dark(#ffffff, #0b0e10); --rst-accent-fill: light-dark(#1f3a6b, #2c4f8f); --rst-accent-fill-hover: light-dark(#192f58, #264579); --rst-accent-fill-edge: light-dark(#142748, #1d3866); --rst-accent-fill-edge-hover: light-dark(#10203d, #193058); --rst-on-accent-fill: #ffffff; /* ── Controls: Day's shapes, re-greyed onto this paper ─────────── */ --rst-control-face: light-dark(#ffffff, #12161a); --rst-control-face-hover: light-dark(#f6f8f8, #192025); --rst-control-face-press: light-dark(#e5eae9, #1e252a); --rst-control-border: light-dark(#cfd6d4, #323b40); --rst-control-border-hover: light-dark(#85908d, #6f7b80); --rst-control-text-hover: light-dark(#14191d, #e9edef); --rst-ghost-face-hover: light-dark(#eff2f1, #171c20); --rst-summary-face: light-dark(#ffffff, #12161a); --rst-summary-face-hover: light-dark(#f6f8f8, #192025); --rst-summary-edge: light-dark(#cfd6d4, #323b40); --rst-summary-edge-hover: light-dark(#85908d, #6f7b80); --rst-track-off: light-dark(#85908d, #6f7b80); --rst-nav-current-bg: light-dark(#ffffff, #12161a); --rst-nav-current-fg: light-dark(#14191d, #e9edef); --rst-depth-contact: light-dark(rgba(14, 26, 30, 0.1), rgba(0, 0, 0, 0.5)); --rst-depth-ambient: light-dark(rgba(14, 26, 30, 0.06), rgba(0, 0, 0, 0.35)); /* ── Sporran's own tokens: solid signal colours for chart marks and dots, which Fiesta's tone pairs (a foreground for text on a tinted ground) do not cover. Never text: the -fg tones carry words. ── */ --sp-credit: light-dark(#1f9d63, #43c489); --sp-warn: light-dark(#d99a1c, #f2a33c); --sp-debit: light-dark(#d5484f, #ef6a71); /* ── The sett. Black Watch, simplified to one half-sett mirrored: navy ground, black guards, bottle-green blocks, a black overcheck, run on the bias so the checks are diamonds, with a twill highlight and a swoosh of light so a small swatch reads as cloth. It used to be laid faintly behind the rail as well (--sp-sett). That went on 2026-11-03, once the mark itself became cloth (the K4 icon, static/mark.svg): Paul — "we can probably lose the tartan background on web now that we have the tartan in the logo". The sett now shows as cloth only on the selvedge band, and as ribbon in the rules. ── */ --sp-thread-navy: light-dark(#1c2a4a, #22355c); --sp-thread-green: light-dark(#1f4733, #24523b); --sp-thread-black: light-dark(#0e1013, #07090b); /* The cloth: the same sett at full strength, with the twill raised in a highlight and a swoosh of light and shade across it (elliptical, so it favours neither thread direction), so a 24px swatch reads as a piece of fabric rather than a checkerboard. Each direction is laid at about half strength, as warp and weft each show half the time: where they cross the colour deepens into the darker checks, which is what makes a sett a check rather than two sets of stripes. */ --sp-sett-cloth: radial-gradient(130% 70% at 18% 8%, rgba(255, 255, 255, 0.13), transparent 62%), radial-gradient(110% 80% at 92% 100%, rgba(0, 0, 0, 0.28), transparent 68%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 2.5px), repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 5px 6px, transparent 6px 7px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 7px 10px, color-mix(in srgb, var(--sp-thread-green) 52%, transparent) 10px 15px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 15px 16px, color-mix(in srgb, var(--sp-thread-green) 52%, transparent) 16px 21px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 21px 24px), repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 5px 6px, transparent 6px 7px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 7px 10px, color-mix(in srgb, var(--sp-thread-green) 52%, transparent) 10px 15px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 15px 16px, color-mix(in srgb, var(--sp-thread-green) 52%, transparent) 16px 21px, color-mix(in srgb, var(--sp-thread-black) 42%, transparent) 21px 24px), var(--sp-thread-navy); /* The ribbon: the sett laid straight along its length, as a strip of tartan ribbon is, for the rules — the page header's tab, a section heading's underline, a divider. At two or three pixels tall the checks become runs of navy, black and green, which is what makes a rule read as tartan without a texture. Muted towards the paper so it sits as a rule, not a stripe; the thread colours themselves are dark in both schemes, so dark mode lifts them toward the ink — and the black to a thread-grey, or it vanishes into a dark page and the ribbon reads as dashes. */ --sp-ribbon-navy: light-dark(color-mix(in srgb, #1c2a4a 70%, transparent), color-mix(in srgb, #5a77b3 70%, transparent)); --sp-ribbon-green: light-dark(color-mix(in srgb, #1f4733 70%, transparent), color-mix(in srgb, #4a8c69 70%, transparent)); --sp-ribbon-black: light-dark(color-mix(in srgb, #0e1013 70%, transparent), color-mix(in srgb, #2c343a 90%, transparent)); --sp-ribbon: repeating-linear-gradient(90deg, var(--sp-ribbon-navy) 0 14px, var(--sp-ribbon-black) 14px 16px, var(--sp-ribbon-navy) 16px 18px, var(--sp-ribbon-black) 18px 22px, var(--sp-ribbon-green) 22px 36px, var(--sp-ribbon-black) 36px 38px, var(--sp-ribbon-green) 38px 52px, var(--sp-ribbon-black) 52px 56px); /* The same sett at a third of the scale, for a length too short to show the full run at full size (a heading's underline). */ --sp-ribbon-fine: repeating-linear-gradient(90deg, var(--sp-ribbon-navy) 0 5px, var(--sp-ribbon-black) 5px 6px, var(--sp-ribbon-navy) 6px 7px, var(--sp-ribbon-black) 7px 8px, var(--sp-ribbon-green) 8px 13px, var(--sp-ribbon-black) 13px 14px, var(--sp-ribbon-green) 14px 19px, var(--sp-ribbon-black) 19px 20px); /* The rail, and the ground behind the bare pages' gate card, are the page's own paper: the tartan is in the mark now. Fiesta's shell paints the rail with this one property. */ --rst-rail-bg: var(--rst-bg); } /* Forced colours: the sett is decoration, and a system palette has no room for it. */ @media (forced-colors: active) { :root { --rst-rail-bg: Canvas; --sp-sett-cloth: none; --sp-ribbon: none; --sp-ribbon-fine: none; } }