/* ========================================================================== Poticaj za neovisne — design tokens (Aning "Redakcija" design system) Source of truth: aning.hr `DESIGN.md` / `DESIGN.json` and `assets/css/tokens.css` (paper, ink and slate neutrals, the one red, Poppins, 8/12/16/pill radii, soft shadows). Values marked "Aning" are copied unchanged; everything else is derived here and its contrast is listed (WCAG relative luminance, checked by tests/skin.test.mjs). NAMING IS INVERSE TO aning.hr: here --ink is the BACKGROUND and --paper is the TEXT colour (the app's names predate the Aning skin and other modules use them). app --ink = Aning --paper #F4F4F6 (light) / slate-900 #1E2530 (dark) app --paper = Aning --ink-900 #0E0E0E (light) / --paper #F4F4F6 (dark) Light is the default (no preference and `theme-light`); dark is `theme-dark`, and `theme-auto` follows prefers-color-scheme: dark. The theme class lives on (theme-auto | theme-light | theme-dark): js/theme-init.js sets it from localStorage['aning-theme'] before the first paint. ========================================================================== */ /* ── Fonts ──────────────────────────────────────────────────────────────── Poppins (Aning's one family) from @fontsource/poppins 5.3.0 (OFL-1.1), static weights 400/500/600/700 + 400 italic. Every weight ships two SUBSET files: `latin` (ASCII + Latin-1, €) and `latin-ext` (Latin Extended-A/B — where č ć đ š ž live); both are declared with their own unicode-range, or the browser would mix two typefaces inside one word. Ranges verbatim from @fontsource. index.html preloads only 400 (both subsets); the rest load on discovery. JetBrains Mono (variable) stays for citation chips, evidence labels (source meta, timestamps, document coordinates) and numeric table columns only: Poppins has no `tnum` feature (the @fontsource files carry an empty GSUB and proportional digits, 1 = 320 vs 0 = 628 units), so tabular-nums cannot line up figures in Poppins. Arrows (→ ↗) and ✕ ◐ ☀ ☾ fall back to the system font. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-latin-ext-400-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Theme-independent tokens ─────────────────────────────────────────── */ :root { /* Type. Poppins for display, body and labels (Aning: one committed family; weights 400–700, display 700). JetBrains Mono only carries evidence: citation chips, provenance labels, numeric table columns. */ --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Motion (Aning): feedback 120ms, state 150ms, drawer 300ms on the exponential ease-out. The view entrance stays at 180ms. */ --dur-hover: 120ms; --dur-chip: 150ms; --dur-view: 180ms; --dur-panel: 300ms; --ease-panel: cubic-bezier(0.16, 1, 0.3, 1); /* Aning --ease-out */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Aning --ease-out */ /* Layout */ --container: 1200px; --gutter: 28px; /* 16px under 820px, see the end of this file */ --tap: 44px; /* minimum touch target under 820px (Aning --touch) */ --tabbar-h: 60px; /* mobile bottom tab bar, excl. safe area */ --measure: 70ch; /* reading width for prose (Aning: 65–75ch) */ /* Spacing scale (Aning 4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* Shape (Aning radii): 8 inputs + small controls, 12 cards / panels / callouts, 16 modals and sheets, pill for buttons, chips and badges. Tables stay square. */ --radius-0: 0; --radius-code: 4px; /* inline code, tiny tags */ --radius-soft: 8px; /* kept name; = --radius-sm */ --radius-sm: 8px; /* Aning --radius-sm */ --radius-md: 12px; /* Aning --radius */ --radius-lg: 16px; /* Aning --radius-lg */ --radius-pill: 999px; /* Aning --radius-pill */ /* Category hues (topic markers). Re-tuned for the Aning neutrals so ONE set passes in both themes: every hue has relative luminance ≈ 0.22, which gives ≥ 3.50:1 on light paper #F4F4F6, ≥ 3.85:1 on white, ≥ 3.98:1 on slate #1E2530, ≥ 3.14:1 on slate panel #2D3645 (borders, dots, icons) ≥ 4.98:1 under --on-hue #0E0E0E text (filled chips, badges) Never small text on their own (success text uses --ok-text). Red = rok (deadline); the brand red stays --red / --red-fill. */ --hue-red: #D25D55; --hue-amber: #B0761F; --hue-green: #479065; --hue-blue: #5783C1; --hue-violet: #9771C2; --hue-pink: #CC5D7E; --cat-razvoj: var(--hue-green); --cat-proizvodnja: var(--hue-blue); --cat-porez: var(--hue-violet); --cat-rok: var(--hue-red); --cat-dokument: var(--hue-pink); --cat-warn: var(--hue-amber); --on-hue: #0E0E0E; /* Aning ink-900: text on a hue fill (4.98–5.02:1) */ --on-red: #FFFFFF; /* Aning: white on red (9.29:1 on #8B1A1A, 6.45:1 on #B22A2A) */ /* Slate band (the footer): Aning slate-700 in light, slate-800 in dark, with its own text tokens (the page tokens do not reach AA on slate). --on-band #FFFFFF 8.99:1 on #3E4A5B, 12.17:1 on #2D3645 --on-band-dim #B7C0CC 4.89:1 on #3E4A5B, 6.62:1 on #2D3645 (Aning slate ramp) --band-red #F6D2D2 6.45:1 on #3E4A5B, 8.73:1 on #2D3645 (Aning red-100) */ --on-band: #FFFFFF; --on-band-dim: #B7C0CC; --band-red: #F6D2D2; --band-rule: #4A576B; /* Aning slate-600 */ /* Shadows (Aning): flat by default. sm = inputs and compact controls, md = a focused card, lg/xl = floating bars, drawers, modals. */ --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.04); --shadow-md: 0 4px 16px rgba(20, 20, 30, 0.06); --shadow-lg: 0 8px 24px rgba(20, 20, 30, 0.1); --shadow-xl: 0 16px 48px rgba(20, 20, 30, 0.14); --shadow-overlay: var(--shadow-xl); --shadow-sheet: 0 -16px 48px rgba(20, 20, 30, 0.14); --overlay-bg: rgba(14, 14, 14, 0.55); /* modal backdrop (Aning ink-900) */ /* Documents inside the preview (a PDF page, a .docx, an image) are paper in both themes; search marks sit on that paper. */ --doc-paper: #FFFFFF; --doc-ink: #0E0E0E; /* Aning ink-900 */ --doc-muted: #5C5C66; /* Aning ink-500, 6.61:1 on white */ --doc-link: #1A4D8F; /* 8.55:1 on white */ --doc-mark: #E8A04A; /* search hit (amber), used translucent */ --doc-mark-current: #8B1A1A; /* current hit / selection (Aning red), used translucent */ --shadow-page: 0 1px 2px rgba(14, 14, 14, 0.22), 0 10px 30px rgba(14, 14, 14, 0.24); } /* ── Light theme (default: no preference, `theme-light`, auto + light OS) ── Aning: paper #F4F4F6 page, white #FFFFFF surfaces, ink #0E0E0E headings, #3A3A40 body, #5C5C66 muted, #666670 small text, red #8B1A1A (hover #6F1414, soft #FBE8E8), rules from the ink ramp. --paper #0E0E0E 17.57:1 on #F4F4F6, 19.30:1 on #FFFFFF --paper-dim #3A3A40 10.28:1 on #F4F4F6, 11.30:1 on #FFFFFF --muted #5C5C66 6.02:1 on #F4F4F6, 6.61:1 on #FFFFFF --text-dim #666670 5.17:1 on #F4F4F6, 5.68:1 on #FFFFFF, 4.81:1 on --red-soft #FBE8E8, 4.65:1 on #E8E8EC --red-text #8B1A1A 8.46:1 on #F4F4F6, 9.29:1 on #FFFFFF, 7.88:1 on #FBE8E8 --focus #8B1A1A 8.46:1 / 9.29:1 (≥ 3:1 non-text) Rules (#D8D8DC) are decorative separators; field and control borders use --rule-strong, which keeps the 3:1 non-text minimum (WCAG 1.4.11). */ :root, html.theme-light { color-scheme: light; --ink: #F4F4F6; /* Aning --paper: the page */ --ink-deep: #E8E8EC; /* Aning ink-100 */ --paper: #0E0E0E; /* Aning ink-900: headings, strong text */ --paper-dim: #3A3A40; /* Aning ink-600: body text */ --muted: #5C5C66; /* Aning ink-500 */ --rule: #D8D8DC; /* Aning ink-200 (border-strong) */ --rule-strong: #8A8A94; /* derived (ink ramp): field + control borders, 3.11:1 on paper, 3.42:1 on white */ --panel: #FFFFFF; /* Aning surface: cards, masthead, modals */ --band: #3E4A5B; /* Aning slate-700: the slate band */ --red: #8B1A1A; /* Aning red-700 */ --red-deep: #6F1414; /* Aning red-800: hover / pressed */ --text: var(--paper); --text-dim: #666670; /* Aning ink-400: small text */ --red-text: #8B1A1A; --red-fill: #8B1A1A; --focus: #8B1A1A; --red-soft: #FBE8E8; /* Aning red-50 */ --ok-text: #2E6B45; /* success TEXT ("kopirano ✓"): 5.78:1 on paper, 6.35:1 on white */ --surface: var(--ink); /* what a tile/cell paints itself with */ --code-bg: #E8E8EC; /* Aning ink-100 */ --field-bg: #FFFFFF; --desk: #D8D8DC; /* the preview's desk behind document pages */ /* Izračun chart series (levy types, measures, forecast high): a validated categorical set, order PDV, PD, 1880, 1945. Light: ≥ 3.72:1 on paper, ≥ 4.09:1 on white. */ --lv-pdv: #286CAB; --lv-pd: #B46D10; --lv-1880: #7B489E; --lv-1945: #3B834E; --ms-razvoj: #3B834E; --ms-proizvodnja: #286CAB; --fc-hi: #B46D10; --logo-on-dark: none; /* drives the CSS logo swap in layout.css */ --logo-on-light: inline-block; } /* ── Dark theme ─────────────────────────────────────────────────────────── Aning slate surfaces: #1E2530 page, #2D3645 panels, #3E4A5B rules; paper text; red lifted to Aning red-200 #EDA5A5 for text, dots and borders, and to red-500 #B22A2A for fills (white text 6.45:1). --paper #F4F4F6 14.03:1 on #1E2530, 11.08:1 on #2D3645 --paper-dim #D8D8DC 10.84:1 on #1E2530, 8.56:1 on #2D3645 --muted #8C99AA 5.32:1 on #1E2530, 4.20:1 on #2D3645 (borders, large text) --text-dim #B7C0CC 8.39:1 on #1E2530, 6.62:1 on #2D3645, 4.89:1 on #3E4A5B --red-text #EDA5A5 7.73:1 on #1E2530, 6.10:1 on #2D3645 --focus #EDA5A5 (≥ 3:1 non-text) The block below is repeated for auto + dark OS: keep the two identical (tests/skin.test.mjs compares them). */ html.theme-dark { color-scheme: dark; --ink: #1E2530; /* Aning slate-900 */ --ink-deep: #161B23; /* derived: slate-900 toward ink-900 (fields, code) */ --paper: #F4F4F6; /* Aning paper */ --paper-dim: #D8D8DC; /* Aning ink-200 */ --muted: #8C99AA; /* Aning slate ramp */ --rule: #3E4A5B; /* Aning slate-700 */ --rule-strong: #8C99AA; /* Aning slate ramp: field + control borders, 5.32:1 / 4.20:1 */ --panel: #2D3645; /* Aning slate-800 */ --band: #2D3645; /* Aning slate-800 */ --red: #EDA5A5; /* Aning red-200 */ --red-deep: #8B1A1A; /* Aning red-700: pressed fill (white 9.29:1) */ --text: var(--paper); --text-dim: #B7C0CC; /* Aning slate ramp */ --red-text: #EDA5A5; --red-fill: #B22A2A; /* Aning red-500 */ --focus: #EDA5A5; --red-soft: rgba(237, 165, 165, 0.12); --ok-text: #86CBA0; /* success TEXT: 8.12:1 on slate, 6.41:1 on panel */ --surface: var(--ink); --code-bg: #161B23; --field-bg: #161B23; --desk: #12161D; /* Chart series, dark: ≥ 3.69:1 on slate #1E2530, ≥ 3.22:1 on panel #2D3645. */ --lv-pdv: #4F8AC6; --lv-pd: #C48225; --lv-1880: #A06FC2; --lv-1945: #579F68; --ms-razvoj: #579F68; --ms-proizvodnja: #4F8AC6; --fc-hi: #C48225; --logo-on-dark: inline-block; --logo-on-light: none; --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.45); --shadow-sheet: 0 -16px 48px rgba(0, 0, 0, 0.4); --overlay-bg: rgba(10, 12, 16, 0.72); } /* Auto follows the OS. Keep this block identical to html.theme-dark. */ @media (prefers-color-scheme: dark) { html.theme-auto { color-scheme: dark; --ink: #1E2530; --ink-deep: #161B23; --paper: #F4F4F6; --paper-dim: #D8D8DC; --muted: #8C99AA; --rule: #3E4A5B; --rule-strong: #8C99AA; --panel: #2D3645; --band: #2D3645; --red: #EDA5A5; --red-deep: #8B1A1A; --text: var(--paper); --text-dim: #B7C0CC; --red-text: #EDA5A5; --red-fill: #B22A2A; --focus: #EDA5A5; --red-soft: rgba(237, 165, 165, 0.12); --ok-text: #86CBA0; --surface: var(--ink); --code-bg: #161B23; --field-bg: #161B23; --desk: #12161D; --lv-pdv: #4F8AC6; --lv-pd: #C48225; --lv-1880: #A06FC2; --lv-1945: #579F68; --ms-razvoj: #579F68; --ms-proizvodnja: #4F8AC6; --fc-hi: #C48225; --logo-on-dark: inline-block; --logo-on-light: none; --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.45); --shadow-sheet: 0 -16px 48px rgba(0, 0, 0, 0.4); --overlay-bg: rgba(10, 12, 16, 0.72); } } /* Print: the light chart series whatever the screen theme (print.css forces the other light tokens). */ @media print { :root, html.theme-dark, html.theme-light, html.theme-auto { --lv-pdv: #286CAB; --lv-pd: #B46D10; --lv-1880: #7B489E; --lv-1945: #3B834E; --ms-razvoj: #3B834E; --ms-proizvodnja: #286CAB; --fc-hi: #B46D10; } } /* Mobile layout tokens */ @media (max-width: 819.98px) { :root { --gutter: 16px; } }