/* ========================================================= tokens.css — Design tokens («Registro» identity) Mobile-first responsive stylesheet (no external deps, no CDN). Theme architecture (docs/ui/DESIGN_CONTRACT.md §1): - Semantic color tokens are defined ONCE on :root with their LIGHT values. - Dark values are redefined in TWO places so a manual choice always beats the OS preference in both directions: 1. @media (prefers-color-scheme: dark) guarded by :root:not([data-theme="light"]) — applies when the OS prefers dark AND the user has not explicitly forced light. 2. :root[data-theme="dark"] — applies when the user has explicitly forced dark, regardless of OS preference. (No separate :root[data-theme="light"] block is needed: the :not() guard above already lets the default :root light values win whenever the user has explicitly chosen light, even if the OS prefers dark.) - `data-theme` is rendered server-side on from the "theme" cookie (web/templating.py) and can be flipped client-side (static/app.js, data-theme-toggle) — see app/tema.py for the no-JS POST fallback. - Components must consume tokens only (zero literal hex outside this file). Old cobalt token names (--color-primary etc.) are kept as aliases pointing at the new semantic tokens so the 19 existing partials keep working unchanged until Fase 1 rewrites them to consume the semantic names directly (docs/ui/UI_V2_PLAN.md). ========================================================= */ :root { /* ---- Registro semantic tokens — LIGHT (default) ---- Values from docs/ui/DESIGN_CONTRACT.md §2. */ color-scheme: light; /* native controls (pickers, scrollbars) follow the theme */ --color-bg: #f1f1ed; /* app ground: grey-green paper */ --color-surface: #fbfbf9; /* cards, chrome, tables */ --color-surface-2: #f4f4ef; /* table headers, form bars, zebra */ --color-surface-muted: var(--color-surface-2); /* subdued grouped panels */ --color-border: #dddcd3; /* hairlines */ --color-border-strong: #c6c5ba; /* inputs, table header rule */ --color-text: #1b1d21; /* primary ink */ --color-text-muted: #5d6067; /* secondary ink */ --accent-fill: #2145c9; /* solid fills: primary buttons, chart marks, avatar */ --accent-ink: #2145c9; /* text accents: links, active nav text */ --accent-soft: #e9edfa; /* active-state fill, focus halo, meter track */ --on-accent: #ffffff; /* text on --accent-fill */ --color-danger: #b42332; /* destructive actions */ /* rgb() triplet of --accent-fill, for rgb(var(..) / alpha) constructs (e.g. --shadow-focus below) that cannot reference a hex var directly. */ --color-primary-rgb: 33 69 201; /* Status chips — color-blind-safe (Okabe-Ito informed), always paired with an icon + text label so meaning never relies on colour alone (WCAG 1.4.1). Semantics preserved verbatim across the identity change (docs/ui/UI_V2_PLAN.md invariants). */ --st-ok: #166534; --st-ok-bg: #e7f5ec; --st-ok-border: #b7e0c5; --st-warn: #8a5a00; --st-warn-bg: #fdf3d8; --st-warn-border: #efd9a0; --st-bad: #b42332; --st-bad-bg: #fdecee; --st-bad-border: #f4c2c9; /* st-missing / st-na are not brand states — they ride the neutral surface tokens directly so they need no separate dark redeclaration below. */ --st-missing: var(--color-text-muted); --st-missing-bg: var(--color-surface-2); --st-missing-border: var(--color-border-strong); --st-na: var(--color-text-muted); --st-na-bg: transparent; --st-na-border: transparent; /* Chart status fills (donut segments, meter severity — validated triples, docs/ui/DESIGN_CONTRACT.md §6). Do not eyeball replacements. */ --ch-ok: #1a7f37; --ch-warn: #d4900e; --ch-bad: #cf222e; --ch-na: #9a9c94; /* ---- Back-compat aliases (old "cobalt" token names) ---- Pure references to the semantic tokens above: they need no dark redeclaration either, they cascade automatically. Fase 1 removes these once buttons.css/cards.css/etc. are rewritten to use the semantic names directly (docs/ui/UI_V2_PLAN.md Fase 1). */ --color-primary: var(--accent-fill); --color-primary-dk: var(--accent-ink); --color-primary-lt: var(--accent-soft); --color-verde: var(--st-ok); --color-verde-bg: var(--st-ok-bg); --color-verde-border: var(--st-ok-border); --color-verde-text: var(--st-ok); --color-giallo: var(--st-warn); --color-giallo-bg: var(--st-warn-bg); --color-giallo-border: var(--st-warn-border); --color-giallo-text: var(--st-warn); --color-rosso: var(--st-bad); --color-rosso-bg: var(--st-bad-bg); --color-rosso-border: var(--st-bad-border); /* Spacing scale — unaffected by the identity change */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* Typography — unaffected by the identity change (Fase 1 introduces the serif display face + mono tabular figures per docs/ui/DESIGN_CONTRACT.md §3; kept as-is here so Fase 0 stays purely structural). */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.0625rem; /* between base and lg — small sub-heading size (referenced but previously undefined, docs/ui/FASE1_TODO.md) */ --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Layout shell (docs/ui/UI_V3_PLAN.md L1). The app stays a dense operational workspace *within* a capped, centered column: at 1440px a table still reads comfortably with 8-10 columns, but full-bleed forms/tabs on very wide monitors were reading as broken, not "dense" (UI v3 diagnosis D1). No page opts out; single-form pages additionally wrap their card in .form-shell (below) for a narrower, two-column-at-most reading width. Narrow reading pages (guides) keep their own local caps (e.g. .guida). */ --max-w: 90rem; --header-h: 3.5rem; /* Shape (docs/ui/DESIGN_CONTRACT.md §3): 4px cards/dialogs/KPI tiles, 3px buttons/inputs/chips/menus/nav fills. No --radius-lg, no pill radii except the theme's own circles (avatar, dots) — those are literal 9999px in the component rule, not a token. */ --radius: 4px; --radius-sm: 3px; /* --shadow-sm / --shadow-md are legacy (cobalt) elevation values, still consumed by partials outside Fase 1's scope (nav-areas.css, personale-ui.css, modules.css, components.css, polish.css, responsive.css). Fase 1 files in this scope no longer use them on resting surfaces (cards/panels are flat per §3) — only --shadow-focus (focus ring) and --shadow-pop (floating layers) below. */ --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / .04); --shadow: 0 1px 2px rgb(15 23 42 / .05), 0 1px 1px rgb(15 23 42 / .04); --shadow-md: 0 4px 12px -4px rgb(15 23 42 / .12), 0 2px 4px -2px rgb(15 23 42 / .08); --shadow-focus: 0 0 0 3px rgb(var(--color-primary-rgb) / .35); --shadow-control-knob: 0 1px 2px rgb(15 23 42 / .22); --shadow-sticky-action: 0 -4px 10px -4px rgb(15 23 42 / .12); --overlay-backdrop: rgb(10 12 18 / .45); /* Floating layers ONLY (menus, combobox list, dialog, toast) — never on a resting card/panel. Dark value redeclared below (both dark blocks). */ --shadow-pop: 0 8px 22px rgb(10 12 18 / .16); /* Toast (docs/ui/DESIGN_CONTRACT.md §2): theme-INVERTED, so unlike every other token above these values swap between the light and dark blocks (light theme -> ink surface; dark theme -> paper surface). Dark value redeclared below (both dark blocks), same inversion pattern as --shadow-pop. */ --toast-bg: #1b1d21; --toast-text: #f4f4ef; --toast-link: #adc0ff; /* Motion */ --motion-fast: 120ms; --motion: 180ms; --motion-slow: 260ms; --ease: cubic-bezier(.2, 0, .2, 1); } /* ---- Registro semantic tokens — DARK, OS preference ---- Applies when the OS prefers dark AND no explicit "light" choice has been made server/client-side. Only the LEAF hex-valued tokens are redeclared — everything defined via var(...) above (st-missing/na, the --color-* aliases) cascades automatically. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #16171b; --color-surface: #1e2025; --color-surface-2: #22242a; --color-border: #31343b; --color-border-strong: #43464e; --color-text: #e9e8e2; --color-text-muted: #9a9da4; --accent-fill: #5c86d4; --accent-ink: #8cb0ea; --accent-soft: #202b40; --on-accent: #0e1219; --color-danger: #e0596a; --color-primary-rgb: 92 134 212; --st-ok: #7fd79b; --st-ok-bg: #12291a; --st-ok-border: #1e4a2c; --st-warn: #e5b95d; --st-warn-bg: #2e2410; --st-warn-border: #54431c; --st-bad: #f2909b; --st-bad-bg: #331519; --st-bad-border: #5c242c; --ch-ok: #3fa76a; --ch-warn: #b5842e; --ch-bad: #e0596a; --ch-na: #6f727a; --shadow-control-knob: 0 1px 2px rgb(0 0 0 / .45); --shadow-sticky-action: 0 -4px 12px -4px rgb(0 0 0 / .4); --overlay-backdrop: rgb(0 0 0 / .62); --shadow-pop: 0 10px 26px rgb(0 0 0 / .45); /* Toast inverts again on top of the theme inversion: dark theme -> paper toast (docs/ui/DESIGN_CONTRACT.md §2). */ --toast-bg: #e9e8e2; --toast-text: #1b1d21; --toast-link: #2145c9; } } /* ---- Registro semantic tokens — DARK, manual override ---- Applies whenever the user explicitly chose dark (theme cookie / toggle), regardless of OS preference — the manual choice always wins. Identical values to the media-query block above. */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #16171b; --color-surface: #1e2025; --color-surface-2: #22242a; --color-border: #31343b; --color-border-strong: #43464e; --color-text: #e9e8e2; --color-text-muted: #9a9da4; --accent-fill: #5c86d4; --accent-ink: #8cb0ea; --accent-soft: #202b40; --on-accent: #0e1219; --color-danger: #e0596a; --color-primary-rgb: 92 134 212; --st-ok: #7fd79b; --st-ok-bg: #12291a; --st-ok-border: #1e4a2c; --st-warn: #e5b95d; --st-warn-bg: #2e2410; --st-warn-border: #54431c; --st-bad: #f2909b; --st-bad-bg: #331519; --st-bad-border: #5c242c; --ch-ok: #3fa76a; --ch-warn: #b5842e; --ch-bad: #e0596a; --ch-na: #6f727a; --shadow-control-knob: 0 1px 2px rgb(0 0 0 / .45); --shadow-sticky-action: 0 -4px 12px -4px rgb(0 0 0 / .4); --overlay-backdrop: rgb(0 0 0 / .62); --shadow-pop: 0 10px 26px rgb(0 0 0 / .45); --toast-bg: #e9e8e2; --toast-text: #1b1d21; --toast-link: #2145c9; } /* ---- Per-area accents (body[data-area]) — RETIRED as colors ---- docs/ui/DESIGN_CONTRACT.md §2: per-area accent color is retired; wayfinding comes from the active nav fill + the page title, and every area now shares the single Registro accent. The four vars are kept (not deleted) because ~30 rules across cards.css/calendario.css/modules.css/personale.css/ status.css/personale-ui.css still consume them — deleting would orphan those partials until their owning agents rewrite them directly onto --accent-*. Pointing them at var(--accent-fill) etc. means every one of those consumers now themes correctly (light AND dark) automatically, instead of being frozen at the old cobalt hue with no dark variant. --area-accent-line has no direct Registro equivalent (it sat between -soft and the solid fill, used mostly for 1px decorative borders on highlighted cells/regions) — --accent-soft is the closest existing token and keeps those borders subtle rather than loud. */ body[data-area="dashboard"], body[data-area="anagrafica"], body[data-area="formazione"], body[data-area="sicurezza"], body[data-area="conformita"], body[data-area="dvr"], body[data-area="personale"], body[data-area="altro"] { --area-accent: var(--accent-fill); --area-accent-dk: var(--accent-ink); --area-accent-soft: var(--accent-soft); --area-accent-line: var(--accent-soft); }