/* GiveScore — production stylesheet. Identity: "STANDARD SEAL". --------------------------------------------------------------------------- The argument this design makes: GiveScore behaves like a standards body. It issues a mark against a published standard, so the page is built out of hard civic-blue fields, a struck gold seal as the score, and shared-edge cells instead of floating cards. Nothing is rounded except the seal — which is what makes the seal mean anything. EVERYTHING a future change needs is a custom property below. Colour and type are declared once in :root (and once more, token-for-token, in the dark block); no component invents its own hex. That is deliberate: it is what lets an unrelated feature — the hero tax estimator — inherit this identity without knowing it exists. Radius is a token too (--r / --r-sm are 0). The ONE exception is --r-seal. */ :root{ /* --- ground & paper --- */ --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F6F9; --sunken:#F2F6F9; --tint:#E6EDF2; /* --- ink --- */ --ink:#0F1A22; --ink-2:#3B4C58; --muted:#576976; --faint:#5F707C; --hairline:#DCE5EC; --hairline-2:#CBD8E1; /* --- the civic field: the colour the institution speaks in --- */ --brand:#0A3A5A; --brand-ink:#07293F; --brand-soft:#E6EDF2; --brand-mute:#17587F; /* The ink that goes ON --brand-soft. Its own token because --brand-ink cannot do this job in both themes: --brand-ink is also the DEEPEST brand fill (the footer, a button hover), so it has to stay dark, while --brand-soft is a light tint on paper and a DARK panel on a dark page. Pairing the two directly measured 1.15:1 on the dark theme - invisible text. */ --on-brand-soft:#07293F; /* Text ON the civic field. Named, because "white" is not the only value: secondary copy on a deep field needs to step down without going grey-mud. */ --on-field:#FFFFFF; --on-field-2:#C6D8E5; --on-field-3:#9FBBCD; --field-rule:rgba(255,255,255,.18); /* --- the seal --- */ --seal:#E0A21A; /* the struck mark: gold, only ever on a dark field or as a rule */ --brass:#8A5E12; /* the same gold as TEXT on paper — 5.7:1, which #E0A21A is not */ --brass-soft:#FBF1DA; /* --- verdict bands, split three ways because one hex cannot do three jobs: * plain = graphic only (the seal's arc, the component bars) * -text = the same verdict as a NUMERAL or word on the page ground * -fill = a filled chip/swatch, paired with --on-fill for its ink Measured with tools/contrast-audit.py, not chosen by eye. --- */ --good:#2E7A55; --good-soft:#E3F0EA; --good-text:#2E7A55; --good-fill:#2E7A55; --warn:#B5791A; --warn-soft:#F7EED9; --warn-text:#9A6614; --warn-fill:#9A6614; --crit:#B03A2A; --crit-soft:#F8E4E0; --crit-text:#B03A2A; --crit-fill:#B03A2A; --mut-fill:#576976; /* The ink a filled band carries. On paper that is white; on a dark page the fills brighten and this flips to near-black, which is why it is a token. */ --on-fill:#FFFFFF; --seg-mission:#2E7A55; --seg-officer:#B03A2A; --seg-staff:#B5791A; --seg-other:#8496A3; /* The ground a charity's LOGO sits on in the drawer. Light in BOTH themes: logos are drawn for white paper, and dark ink on a dark panel would vanish. */ --logo-panel:#F2F6F9; /* A standards body does not float. Depth comes from rules and fields, so the shadow tokens resolve to nothing — kept as tokens so components (and the tax estimator, which asks for --shadow-lift) stay declarative. */ --shadow:none; --shadow-lift:none; --r:0; --r-sm:0; --r-seal:50%; /* One family, four weights. A standards body speaks in one voice; the jump from 400 to 900 IS the hierarchy. --serif is kept as a token, and kept pointing at the same stack, so every rule that asked for a display face still resolves — there is simply no second voice any more. */ --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; --serif:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; } /* DARK — FOLLOWS THE BROWSER (owner, 2026-09-23, reversing the earlier "light unless you click Dark" rule). app/static/theme.js reads prefers-color-scheme and stamps `data-theme` on the root; this block applies when it says dark. The palette lives HERE ONCE — a media-query copy would be a second definition of every colour token. Every token above is redefined here; none is introduced. The civic field lightens so it still separates from the page instead of vanishing into it, and the seal brightens. */ :root[data-theme="dark"]{ --paper:#0C1419; --surface:#121C24; --surface-2:#16212A; --sunken:#16212A; --tint:#16242F; --ink:#E7EDF2; --ink-2:#BDCAD4; --muted:#93A4B1; --faint:#8A9BA8; --hairline:#22303B; --hairline-2:#31414E; --brand:#103F60; --brand-ink:#0B3049; --brand-soft:#16242F; --brand-mute:#6FA8CE; --on-brand-soft:#C6D8E5; --on-field:#FFFFFF; --on-field-2:#C6D8E5; --on-field-3:#9FBBCD; --field-rule:rgba(255,255,255,.16); --seal:#E9B446; --brass:#E9B446; --brass-soft:#2A2113; --good:#49A177; --good-soft:#15291F; --good-text:#49A177; --good-fill:#49A177; --warn:#D79B2A; --warn-soft:#2A2113; --warn-text:#D79B2A; --warn-fill:#D79B2A; --crit:#E07E6C; --crit-soft:#2C1915; --crit-text:#E07E6C; --crit-fill:#E07E6C; --mut-fill:#93A4B1; --on-fill:#0C1419; --seg-mission:#49A177; --seg-officer:#E07E6C; --seg-staff:#D79B2A; --seg-other:#71838F; --logo-panel:#E4EAEF; } *{box-sizing:border-box} /* color-scheme follows the STAMP, not the OS: it paints the scrollbar, the