/* ============================================================================ KSRTC DESIGN SYSTEM — TOKEN LAYER ---------------------------------------------------------------------------- This is the ONLY file that defines colour, spacing, radius, shadow and type scale. Every component reads semantic tokens and never a raw hex value, so a whole visual identity can be swapped by changing one attribute on . <- red/cream bus livery, flat, sharp <- warm off-white, rounded, soft <- cream utility, hairline, printed <- ticket stock, notched, tactile RULES FOR COMPONENT AUTHORS 1. Never write a hex value outside this file. Use a semantic token. 2. Never use a BRAND token directly for text. Brand orange/red/gold FAIL WCAG AA at body sizes. Use --ink, --ink-2 or --accent-text. 3. Every theme must satisfy the contrast floors asserted at the bottom of this file. tools/capture.js gates them in EVERY theme, not just default. PROVENANCE — these are measured, not invented: · Brand palette by frequency in the live keralartc.com stylesheet: #f0652b (32 uses), #e82801 (15), #fbd734 (5). · Livery colours sampled from the Super Fast Premium and Link Bus photography in brand/original/. · Contrast-safe text derivatives computed with the WCAG relative-luminance formula; ratios stated per theme below. ========================================================================== */ :root { /* ── BRAND CONSTANTS — identical in every theme, never used for body text ── */ --brand-orange: #f0652b; --brand-red: #e82801; --brand-gold: #fbd734; --livery-red: #d32f1a; --livery-cream: #f6ecd8; --link-lime: #b6d43a; /* city / Link services ONLY — a service signal */ /* ── FLUID TYPE SCALE ──────────────────────────────────────────────────── No fixed breakpoints: tender Clause 2.3 forbids a fixed-grid layout. --fs-small is a FLOOR of 15px, below which Malayalam conjuncts lose their joins and diacritics clip. */ --fs-display: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); --fs-h1: clamp(1.65rem, 1.1rem + 2vw, 2.5rem); --fs-h2: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-small: 0.9375rem; /* 15px floor — do not lower */ --fs-micro: 0.8125rem; /* LATIN ONLY. Never apply to Malayalam. */ /* ── LINE HEIGHT — driven by Malayalam, not Latin ──────────────────────── Malayalam stacks conjuncts and has taller ascenders/descenders. A Latin-tuned scale crowds it. Body copy never below 1.7. */ --lh-display: 1.35; /* headings only, never below 1.3 */ --lh-body: 1.75; /* Malayalam body — never below 1.7 */ --lh-en-body: 1.6; /* Latin may be tighter */ /* ── TYPEFACES ─────────────────────────────────────────────────────────── One superfamily across both scripts (Ek Type Anek, OFL) so Malayalam and Latin share skeletons and vertical metrics — this is what makes tender Clause 3.2's "harmonised layouts" hold at the type level. PRODUCTION self-hosts a per-locale woff2 subset: a /ml/ page ships Malayalam only, /en/ ships Latin only, so neither pays for the other. */ --font-ml: "Anek Malayalam", "Noto Sans Malayalam", "Manjari", sans-serif; --font-en: "Anek Latin", "Noto Sans", system-ui, sans-serif; /* ── SPACING — one 4px-based rhythm shared by all themes ─────────────────*/ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --band-y: clamp(2.5rem, 1.5rem + 4vw, 5rem); --measure: 68ch; /* max line length for running prose */ --wrap: 76rem; /* page container */ --tap: 44px; /* WCAG 2.5.5 touch-target floor */ /* ── MOTION ──────────────────────────────────────────────────────────────*/ --dur: 180ms; --ease: cubic-bezier(0.2, 0, 0.3, 1); } /* ══════════════════════════════════════════════════════════════════════════ THEME 1 — LIVERY (default) The Super Fast Premium bus: deep red bands on body cream. Flat, sharp, confident. Highest brand recognition of the set. Primary text: --ink #1b1a19 on --surface #f6ecd8 = 14.82:1 ════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="livery"] { --surface: #f6ecd8; --surface-2: #efe2c8; /* alternating band */ --surface-3: #fffdf8; /* raised card */ --surface-invert: #2a1410; /* footer / dark band */ --surface-accent: #d32f1a; /* full-bleed accent band */ --ink: #1b1a19; /* 14.82:1 on --surface */ --ink-2: #574f45; /* 6.94:1 — secondary prose */ --ink-invert: #f6ecd8; /* 13.6:1 on --surface-invert */ --ink-on-accent: #fffdf8; /* 5.01:1 on --surface-accent */ --accent: #d32f1a; /* fills, rules — NOT text */ --accent-text: #a81b06; /* 7.42:1 on --surface — links, small text */ --accent-strong: #8c1705; /* 9.13:1 — headings */ --highlight: #fbd734; /* display type >=24px bold, rules, focus */ /* --accent-on-invert: the accent colour when it must carry TEXT on an inverted or accent-filled surface. This exists because --highlight is a FILL and RULE colour (see §1 of the contract: orange and gold are forbidden for body text), and components.css was re-pointing --accent-text to --highlight on dark bands. That works where --highlight is gold, but yathra's --highlight is orange #f0652b, which measured only 4.33:1 at 15px on the inverted surface. Keep this token light enough to clear 4.5:1 on that theme's --surface-invert. */ --accent-on-invert: #fbd734; /* gold: 11.8:1 on --surface-invert #2a1410 */ --rule: #d9c9a8; --rule-strong: #8c1705; --rule-w: 1px; --rule-w-strong: 3px; --radius: 2px; /* flat and sharp */ --radius-lg: 3px; --shadow: none; /* this theme uses NO shadow, only rules */ --shadow-lg: none; --divider: livery-sweep; /* consumed by components.css */ --focus-ring: var(--accent-text); --focus-ring-invert: var(--highlight); } /* ══════════════════════════════════════════════════════════════════════════ THEME 2 — THANEER Kerala's own softness: backwater light, warm off-white, rounded geometry, one soft shadow layer. The friendliest and most approachable. Primary text: --ink #191714 on --surface #fdfaf4 = 15.44:1 ════════════════════════════════════════════════════════════════════════ */ [data-theme="thaneer"] { --surface: #fdfaf4; --surface-2: #f6ecd8; --surface-3: #ffffff; --surface-invert: #241a12; --surface-accent: #8c1705; --ink: #191714; /* 15.44:1 on --surface */ --ink-2: #574f45; /* 7.24:1 */ --ink-invert: #fdfaf4; --ink-on-accent: #fff8ef; /* 9.36:1 on --surface-accent */ --accent: #a81b06; --accent-text: #a81b06; /* 7.74:1 on --surface */ --accent-strong: #8c1705; /* 9.52:1 */ --highlight: #fbd734; --accent-on-invert: #fbd734; --rule: #ece2d2; --rule-strong: #a81b06; --rule-w: 1px; --rule-w-strong: 2px; --radius: 16px; /* soft and rounded */ --radius-lg: 22px; --shadow: 0 1px 2px rgb(66 42 20 / 0.06), 0 4px 14px rgb(66 42 20 / 0.05); --shadow-lg: 0 2px 6px rgb(66 42 20 / 0.07), 0 18px 40px rgb(66 42 20 / 0.08); --divider: wave; --focus-ring: var(--accent-text); --focus-ring-invert: var(--highlight); } /* ══════════════════════════════════════════════════════════════════════════ THEME 3 — YATHRA Swiss transit-signage rigour on warm cream. Hairline rules, printed and exact, zero ornament beyond a dotted route line. The austere option. Primary text: --ink #1b1a19 on --surface #f6ecd8 = 14.82:1 ════════════════════════════════════════════════════════════════════════ */ [data-theme="yathra"] { --surface: #f6ecd8; --surface-2: #f1e5cd; --surface-3: #fffdf8; --surface-invert: #1f1c17; --surface-accent: #8c1705; --ink: #1b1a19; --ink-2: #514f4f; /* 6.94:1 */ --ink-invert: #f6ecd8; --ink-on-accent: #fffdf8; --accent: #a81b06; --accent-text: #a81b06; --accent-strong: #8c1705; --highlight: #f0652b; --accent-on-invert: #fbd734; /* orange as a rule/fill accent only */ --rule: #cbb994; --rule-strong: #1b1a19; --rule-w: 1px; --rule-w-strong: 2px; --radius: 0; /* nothing is rounded */ --radius-lg: 0; --shadow: none; --shadow-lg: none; --divider: route-line; --focus-ring: var(--accent-text); --focus-ring-invert: var(--highlight); } /* ══════════════════════════════════════════════════════════════════════════ THEME 4 — TICKET Warm ticket stock with notched, tactile edges. Perforation is expressed through --divider; the full tear-edge treatment is an optional MODULE (components.css .u-perforate), because a tear edge is structural, not a token, and cannot be delivered by colour alone. Primary text: --ink #1b1a19 on --surface #f8f0dc = 15.30:1 ════════════════════════════════════════════════════════════════════════ */ [data-theme="ticket"] { --surface: #f8f0dc; --surface-2: #eee0c0; /* manila counterfoil */ --surface-3: #fffdf6; --surface-invert: #26180f; --surface-accent: #a81b06; --ink: #1b1a19; /* 15.30:1 on --surface */ --ink-2: #574f45; --ink-invert: #f8f0dc; --ink-on-accent: #fffdf6; /* 6.55:1 on --surface-accent */ --accent: #a81b06; --accent-text: #a81b06; --accent-strong: #8c1705; --highlight: #fbd734; --accent-on-invert: #fbd734; --rule: #d8c8a4; --rule-strong: #a81b06; --rule-w: 1px; --rule-w-strong: 2px; --radius: 4px; --radius-lg: 6px; --shadow: 0 1px 0 rgb(90 60 20 / 0.10); --shadow-lg: 0 2px 0 rgb(90 60 20 / 0.12); --divider: perforation; --focus-ring: var(--accent-text); --focus-ring-invert: var(--highlight); } /* ══════════════════════════════════════════════════════════════════════════ USER PREFERENCE LAYERS — these compose ON TOP of any theme ════════════════════════════════════════════════════════════════════════ */ /* High contrast, user-toggled or OS-requested. Pushes every pair well past AA without changing layout, so it cannot reflow the page. */ [data-contrast="high"], [data-theme][data-contrast="high"] { --surface: #ffffff; --surface-2: #f4f4f4; --surface-3: #ffffff; --ink: #000000; /* 21:1 */ --ink-2: #1a1a1a; --accent-text: #8c0000; --accent-strong: #6b0000; --rule: #000000; --rule-w: 2px; --shadow: none; --shadow-lg: none; } @media (prefers-contrast: more) { :root { --rule: #6b6257; --ink-2: #3d3833; } } /* Text size stepper. Scales the whole scale from the root, so nothing needs to know about it and no component hard-codes a px size. */ [data-textsize="l"] { --fs-body: 1.125rem; --fs-small: 1rem; --fs-h1: clamp(1.8rem, 1.2rem + 2.2vw, 2.75rem); } [data-textsize="xl"] { --fs-body: 1.25rem; --fs-small: 1.0625rem; --fs-h1: clamp(2rem, 1.3rem + 2.4vw, 3rem); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } } /* ══════════════════════════════════════════════════════════════════════════ CONTRAST FLOORS — asserted here, gated by tools/capture.js in EVERY theme ---------------------------------------------------------------------------- --ink on --surface >= 7:1 (AAA body, comfortable margin) --ink-2 on --surface >= 4.5:1 (AA body) --accent-text on --surface >= 4.5:1 (AA links and small text) --ink-on-accent on --surface-accent>= 4.5:1 (AA text on the red band) --ink-invert on --surface-invert >= 4.5:1 (AA footer) --focus-ring vs adjacent surface >= 3:1 (WCAG 1.4.11) Measured primary pairs: livery 14.82:1 thaneer 15.44:1 yathra 14.82:1 ticket 15.30:1 NOTE on focus rings: a ring drawn with outline-offset sits OUTSIDE the element, on whatever is behind it — NOT on the element's own background. Components must therefore use the two-tone ring in base.css, which holds >=3:1 against any backdrop. A gold ring certified against a red button was an actual defect found in this project: the offset ring never touched the red. ========================================================================== */