/* ============================================================================= avtomaslo.info - design tokens ----------------------------------------------------------------------------- Single source of truth for colour, type, spacing, radius, layout and z-index. Implementers: copy this file unchanged to public/css/tokens.css and load it before every other stylesheet. Never hard-code a colour or a size in a template; add a token here instead. Theme strategy: CSS custom properties, light by default, dark via prefers-color-scheme. A manual override is possible with . All text/background pairs listed in docs/DESIGN.md section 3 pass WCAG AA (most pass AAA) in BOTH modes. Brand memory (from the 2008-2014 Joomla site): maroon headings (#800000, #663333), slate-grey chrome (#303a43, #7e8890), cool light background, Arial 13px. The maroon survives as the single accent; the slate survives as the neutral family; nothing else is carried over literally. ============================================================================ */ :root { color-scheme: light dark; /* ---------- Colour: light theme -------------------------------------- */ --color-bg: #f5f6f8; /* page background (cool off-white) */ --color-surface: #fcfcfd; /* raised surfaces: header, tables, forms */ --color-tint: #e9edf1; /* slate tint: panels, table heads, chips */ --color-text: #1c2128; /* body text 15.0:1 on bg */ --color-text-muted: #5a6570; /* meta, captions 5.5:1 on bg */ --color-accent: #7a1c22; /* brand maroon: links, marks 9.6:1 on bg */ --color-accent-hover: #5e1419; /* darker maroon for hover 12.2:1 on bg */ --color-accent-tint: #f3e5e6; /* maroon wash: callouts, current items */ --color-on-accent: #fbf7f7; /* text on solid maroon 9.8:1 */ --color-button: #7a1c22; /* solid button background (both themes) */ --color-on-button: #fbf7f7; /* solid button label */ --color-line: #d6dbe1; /* hairlines, table rules */ --color-line-strong: #a9b2bc; /* input borders, image plates */ --color-mark: #fbe7b2; /* search-result highlight () */ --color-focus: #7a1c22; /* focus ring */ /* ---------- Typography ------------------------------------------------ */ /* Fixel (MacPaw, SIL OFL, designed in Ukraine, full Ukrainian Cyrillic incl. i yi ye ghe, Latin, tabular figures). Self-host from public/fonts; see docs/DESIGN.md section 4. Every fallback below also covers Ukrainian Cyrillic, so the page is readable before the webfont arrives. */ --font-sans: "Fixel Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Fixel Display", "Fixel Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace; /* Fluid type scale. Root is 16px on phones, 17px from 768px (see base.css) */ --text-xs: 0.75rem; /* 12-13px meta */ --text-sm: 0.875rem; /* 14-15px ui */ --text-base: 1rem; /* 16-17px body */ --text-lg: 1.125rem; /* 18-19px lede */ --text-xl: 1.25rem; /* 20-21px h3 */ --text-2xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.625rem); /* 22-26px h2 */ --text-3xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem); /* 28-36px h1 */ --text-4xl: clamp(2rem, 1.4rem + 2.6vw, 2.75rem); /* 32-44px home h1 */ --leading-tight: 1.15; /* headings */ --leading-snug: 1.35; /* nav, lists, table cells */ --leading-body: 1.65; /* reading prose */ --tracking-tight: -0.015em; /* display headings only */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing (4px base) --------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* Section rhythm (VISUAL_DENSITY 6: a daily reference, not a gallery) */ --section-gap: clamp(3rem, 6vw, 4rem); /* ---------- Shape ----------------------------------------------------- */ /* Rule: interactive elements and chips use --radius-sm; content blocks (images, callouts, table wrappers, panels) use --radius. Nothing else. */ --radius-sm: 4px; --radius: 8px; /* ---------- Elevation ------------------------------------------------- */ /* Almost none. Shadows are slate-tinted, never black. */ --shadow-header: 0 1px 0 var(--color-line); --shadow-menu: 0 12px 32px -8px rgb(28 33 40 / 0.25); /* ---------- Layout ---------------------------------------------------- */ --container: 1200px; /* page max width */ --content-col: 70ch; /* prose measure */ --sidebar-col: 300px; /* reference sidebar on >= 1024px */ --gutter: clamp(1rem, 4vw, 2rem); --header-height: 64px; --tap-target: 44px; /* Breakpoints (documentation only; media queries cannot read variables): sm 640px / md 768px / lg 1024px / xl 1200px */ /* ---------- Motion ---------------------------------------------------- */ /* MOTION_INTENSITY 2: hover/focus feedback and the menu panel only. */ --ease: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 120ms; --duration-base: 180ms; /* ---------- Z-index scale --------------------------------------------- */ --z-header: 100; --z-menu: 200; --z-skiplink: 300; } /* ---------- Colour: dark theme ------------------------------------------- */ /* Same values twice on purpose: once for the system preference, once for the manual override. Keep them in sync. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #14181d; --color-surface: #1c2128; --color-tint: #232930; --color-text: #e4e8ec; /* 14.5:1 on bg */ --color-text-muted: #a4aeb8; /* 7.9:1 on bg */ --color-accent: #e59aa0; /* maroon lifted for dark bg, 8.0:1 */ --color-accent-hover: #f0b8bc; --color-accent-tint: #2e2124; --color-on-accent: #2a1113; --color-button: #7a1c22; /* brand hue stays; label below 8.5:1 */ --color-on-button: #f5eeee; --color-line: #2f363e; --color-line-strong: #4a545f; --color-mark: #5a4a1e; --color-focus: #e59aa0; --shadow-menu: 0 12px 32px -8px rgb(0 0 0 / 0.6); } } :root[data-theme="dark"] { --color-bg: #14181d; --color-surface: #1c2128; --color-tint: #232930; --color-text: #e4e8ec; --color-text-muted: #a4aeb8; --color-accent: #e59aa0; --color-accent-hover: #f0b8bc; --color-accent-tint: #2e2124; --color-on-accent: #2a1113; --color-button: #7a1c22; --color-on-button: #f5eeee; --color-line: #2f363e; --color-line-strong: #4a545f; --color-mark: #5a4a1e; --color-focus: #e59aa0; --shadow-menu: 0 12px 32px -8px rgb(0 0 0 / 0.6); } /* ---------- Reduced motion ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } }