/* * Inctor UI kit — tokens and themes. * * Source of truth: shared/ui/. Each surface receives a copy in /ui/ * through scripts/sync-shared-ui.mjs; never edit a copy. * * The palette is brand/BRAND.md section 3. Everything else here is derived * from those six colours so the two themes stay inside the brand: * dark = Tinta ground, Aço cards, Osso text * light = Osso ground, white cards, Tinta text * The theme is chosen by [data-theme] on (see theme.js). Without the * attribute the operating-system preference decides, so the first paint is * right even before any script runs. * * Fonts resolve against this file: the kit lives in /ui/ and the * fonts in /assets/fonts/, hence "../assets/fonts/". */ /* * The kit gives .field, .choices, .btn and others their own `display`, which * beats the browser's [hidden] rule; this restores the attribute's meaning. */ [hidden] { display: none !important; } @font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/IBMPlexSans.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "Material Symbols Outlined"; src: url("../assets/fonts/MaterialSymbolsOutlined.woff2?v=ceae73f075") format("woff2"); font-style: normal; font-display: block; } :root { /* Brand palette, BRAND.md section 3. */ --inctor-tinta: #0C1824; --inctor-aco: #1F3A52; --inctor-aco-claro: #7D93A6; --inctor-latao: #C08A2E; --inctor-latao-claro: #E0B05A; --inctor-osso: #EFEBE3; /* Status, BRAND.md section 3. */ --inctor-concluido: #4E9A6B; --inctor-andamento: #C08A2E; --inctor-atraso: #C2402F; --inctor-planejado: #7D93A6; --font-display: "Archivo", system-ui, sans-serif; --font-text: "IBM Plex Sans", system-ui, sans-serif; /* Geometry. 3px is the brand card radius (BRAND.md section 6). */ --radius: 3px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --control-height: 2.5rem; --touch-target: 2.75rem; /* Modal widths, UI-003. */ --modal-default: 30rem; --modal-wide: 45rem; --modal-xwide: 56rem; --modal-max: 72rem; /* The accent is Latão in both themes; text on it is always Tinta. */ --accent: var(--inctor-latao); --accent-hover: #A97823; --on-accent: var(--inctor-tinta); --danger: var(--inctor-atraso); --danger-hover: #A83527; --on-danger: #FFFFFF; /* Backdrop: Tinta at 60% (UI-003). */ --backdrop: rgb(12 24 36 / 0.6); /* ---- light theme (default tokens) ---- */ color-scheme: light; --bg: var(--inctor-osso); --surface: #FFFFFF; --surface-sunken: #F6F3EE; --surface-hover: #E9E4DA; --header-bg: #FFFFFF; --text: var(--inctor-tinta); /* Aço mixed with Aço claro: secondary text that still passes AA on white. */ --text-muted: #3B556B; --border: rgb(12 24 36 / 0.14); --border-strong: rgb(12 24 36 / 0.32); --focus: var(--inctor-aco); --input-bg: #FFFFFF; --shadow-flat: 0 9px 0 -3px rgb(12 24 36 / 0.18); --shadow-elevated: 0 9px 0 -3px rgb(12 24 36 / 0.55); --success-text: #2F6B47; --error-text: #A83527; --indicator-context: var(--text-muted); --indicator-context-elevated: var(--text); /* light: Tinta (DESIGN_SYSTEM.md, accessibility exception) */ --choice-accent: var(--inctor-aco); } /* ---- dark theme: explicit choice ---- */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--inctor-tinta); --surface: var(--inctor-aco); --surface-sunken: #172E43; --surface-hover: #28475F; --header-bg: var(--inctor-tinta); --text: var(--inctor-osso); /* Aço claro lightened toward Osso: #7D93A6 itself is 3.7:1 on Aço, below AA for small text. The context line of an indicator keeps pure Aço claro. */ --text-muted: #9FADB8; --border: rgb(239 235 227 / 0.14); --border-strong: rgb(239 235 227 / 0.34); --focus: var(--inctor-osso); --input-bg: #132638; --shadow-flat: 0 9px 0 -3px rgb(12 24 36 / 0.55); --shadow-elevated: 0 9px 0 -3px rgb(12 24 36 / 0.55); --accent-hover: var(--inctor-latao-claro); --success-text: #7CC49A; --error-text: #F08A7C; --indicator-context: var(--inctor-aco-claro); --indicator-context-elevated: var(--inctor-latao-claro); --choice-accent: var(--inctor-osso); } /* ---- dark theme: operating-system preference, when nothing was chosen ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--inctor-tinta); --surface: var(--inctor-aco); --surface-sunken: #172E43; --surface-hover: #28475F; --header-bg: var(--inctor-tinta); --text: var(--inctor-osso); --text-muted: #9FADB8; --border: rgb(239 235 227 / 0.14); --border-strong: rgb(239 235 227 / 0.34); --focus: var(--inctor-osso); --input-bg: #132638; --shadow-flat: 0 9px 0 -3px rgb(12 24 36 / 0.55); --shadow-elevated: 0 9px 0 -3px rgb(12 24 36 / 0.55); --accent-hover: var(--inctor-latao-claro); --success-text: #7CC49A; --error-text: #F08A7C; --indicator-context: var(--inctor-aco-claro); --indicator-context-elevated: var(--inctor-latao-claro); --choice-accent: var(--inctor-osso); } } .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }