/** * Maironis — Design Tokens * Author: Tobalt — https://tobalt.lt (built for MLLM) * * Single source of truth for the MLLM design system, extracted from * Figma "MLLM_2026-C" (Komponentai). Everything downstream references * these custom properties — never raw hex or px. */ :root { /* ─── Brand palette · Padaliniai (branch accents, "600" = base tone) ─── */ --c-zalia: #8FBD3A; /* Maironio (pagrindinis) */ --c-melyna: #5E94D4; /* Sruogų */ --c-geltona: #FAC33D; /* Nėries / Bučo */ --c-purpurine: #917AC9; /* Vaižganto */ --c-zalsva: #0DAB77; /* Grušo */ --c-raudona: #FF5757; /* Vaikų */ /* ─── Neutrals · Bendros (Juoda scale) ─── */ --c-juoda-1000: #000000; /* pure black — the Figma newsletter band; the footer (900) below it reads as LIFTED against this, which is the separation the designer asked for */ --c-juoda-900: #14151C; /* near-black — primary text, dark surfaces */ --c-juoda-850: #1E1F2B; /* lifted dark — alternate dark surface, separates stacked dark sections */ --c-juoda-600: #7D7D94; /* muted text, secondary */ --c-juoda-300: #C3C4D0; /* borders, dividers, disabled */ --c-juoda-100: #F2F2FD; /* lightest — on-dark text, subtle surface */ --c-balta: #FFFFFF; /* page paper */ /* ─── Semantic colour roles ─── */ --color-text: var(--c-juoda-900); --color-text-muted: var(--c-juoda-600); --color-text-invert: var(--c-juoda-100); --color-border: var(--c-juoda-300); --color-surface: var(--c-balta); --color-surface-alt: var(--c-juoda-100); --color-surface-dark:var(--c-juoda-900); /* ─── Branch-accent architecture ───────────────────────────────────── * Components paint with var(--mllm-accent). A [data-padalinys="…"] * wrapper (set on or a section) redefines it, re-tinting every * descendant. Default = Maironio green (main museum identity). * --mllm-on-accent is the readable text/icon colour ON that accent. * Decision (Tomas, 2026-07-24): ink #14151C on ALL accents — passes * WCAG 2.1 AA everywhere (5–11:1), required for VSSA. Deviates from the * Figma sample (pale text) which failed AA on every accent. */ --mllm-accent: var(--c-zalia); --mllm-on-accent: var(--c-juoda-900); /* ─── Typography · families ────────────────────────────────────────── * Design uses two voices: * Myriad Pro → main sans (Regular/Semibold, and SemiBold Condensed * for display headings H2/H3). * Courier → typewriter accent voice (H1, accent/mono copy, menu). * Myriad Pro is Adobe-licensed; free near-substitutes are Barlow / * Barlow Semi Condensed + Courier Prime. Families self-hosted via * @font-face in base.css once licensed files are supplied. */ --font-body: "Myriad Pro", "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-condensed: "Myriad Pro Condensed", "Myriad Pro", "Barlow Semi Condensed", "Barlow", system-ui, sans-serif; --font-accent: "Courier Prime", "Courier New", Courier, monospace; /* ─── Typography · weights ─── */ --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* ─── Typography · scale (px → rem, 16px base) ─────────────────────── * Named after the Figma text styles for traceability. */ /* Fluid display sizes: clamped so desktop (≳960px) stays pixel-exact to the * Figma tokens while headings scale down gracefully on phones/tablets. * Body/small stay fixed (readability). Max = the exact Figma px. */ --fs-h1-accent: clamp(2rem, 1.25rem + 3.2vw, 3rem); /* 32 → 48px · Courier Bold */ --fs-h2: clamp(2rem, 1.25rem + 3.2vw, 3rem); /* 32 → 48px · Myriad SB Cond */ --fs-h1: clamp(1.5rem, 1.1rem + 1.7vw, 2rem); /* 24 → 32px · Courier Reg */ --fs-h3: clamp(1.25rem,1.0rem + 1.1vw, 1.75rem);/* 20 → 28px · Myriad Bold Cond (Figma H3) */ --fs-body-big: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);/* 18 → 22px · Myriad Reg */ --fs-body-big-accent: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20px · Courier */ --fs-body: 1rem; /* 16px · Myriad Regular / Courier */ --fs-small: 0.875rem; /* 14px · Myriad Regular */ --fs-small-accent: 0.8125rem; /* 13px · Myriad SemiBold Cond. */ --lh-tight: 1; /* display / buttons */ --lh-heading: 1.15; /* headings */ --lh-body: 1.5; /* running text */ /* ─── Spacing scale (4px base) ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-12: 96px; /* ─── Geometry ── The system is sharp-edged: no rounded corners. ─── */ --radius-0: 0; --radius: var(--radius-0); /* ─── Borders ─── */ --border-width: 1px; --border: var(--border-width) solid var(--color-border); /* ─── Layout ─── */ --container-max: 1440px; /* Figma frame width for full-bleed rows */ --content-max: 1200px; --gutter: var(--space-5); /* ─── Motion ─── */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 180ms; /* ─── Focus (VSSA / WCAG 2.1 AA visible focus) ─── */ --focus-ring: 2px solid var(--c-juoda-900); --focus-offset: 2px; } /* ─── Per-branch accent scopes ────────────────────────────────────────── * Set data-padalinys on (branch landing) or on a section wrapper. */ [data-padalinys="maironio"] { --mllm-accent: var(--c-zalia); --mllm-on-accent: var(--c-juoda-900); } [data-padalinys="sruogu"] { --mllm-accent: var(--c-melyna); --mllm-on-accent: var(--c-juoda-900); } [data-padalinys="neries-buco"] { --mllm-accent: var(--c-geltona); --mllm-on-accent: var(--c-juoda-900); } [data-padalinys="vaizganto"] { --mllm-accent: var(--c-purpurine); --mllm-on-accent: var(--c-juoda-900); } [data-padalinys="gruso"] { --mllm-accent: var(--c-zalsva); --mllm-on-accent: var(--c-juoda-900); } [data-padalinys="vaiku"] { --mllm-accent: var(--c-raudona); --mllm-on-accent: var(--c-juoda-900); }