/* app/styles/tokens.css — Kanjo Crew semantic tokens. * * Brand source of truth is design/design-system (kanjo-crew-tokens.css), loaded * just before this file in index.html — it defines the --kc-* palette, fonts, * radii, and shadows. This file maps the app's SEMANTIC names (--bg, --surface, * --primary, --ink, …) onto those brand tokens, so screens never hardcode colour * and a brand change means editing the design-system file, not the components. * * Two text families, because the canvas is DARK but cards are WHITE: * • --ink / --sub / --line → dark text + hairlines that sit ON white cards * • --on / --on-soft / --on-dim / --line-on → light text + dividers ON the canvas * * Brand: indigo #5563C9 primary, periwinkle #8884E4 secondary, cyan #6DE1FE the * "translation" highlight; eggplant #2A1136 canvas. Status valence colours (amber * warning / green ok / red danger) are kept and tuned for WCAG-AA text contrast. */ :root { /* Surfaces */ --bg: var(--kc-eggplant); --surface: var(--kc-white); --surface-2: var(--kc-paper); /* Text + hairlines on white cards */ --ink: var(--kc-ink); --sub: var(--kc-ink-soft); --line: var(--kc-paper-line); /* Text + dividers on the dark canvas (tuned for contrast on eggplant) */ --on: #F3ECFF; --on-soft: #C9BBE6; --on-dim: #A99AD0; --line-on: rgba(243, 236, 255, .13); /* Brand accent — indigo (primary fill + link/label text on white, ≥ 4.5:1) */ --primary: var(--kc-indigo); --primary-ink: var(--kc-white); --primary-soft: #EDEFFC; /* light indigo tint for chips on white */ /* Secondary + translation highlight (from the new design system) */ --periwinkle: var(--kc-periwinkle); --highlight: var(--kc-cyan); /* globe / translate — reads on the DARK canvas */ --highlight-ink: var(--kc-cyan-ink); /* cyan when it must sit on light */ /* Status valence — kept; each deepened to clear WCAG-AA as chip text on its tint */ --accent: #9A6406; --accent-soft: #FCF3E4; /* amber — warnings / "new" */ --ok: #1C7D44; --ok-soft: #E7F4EC; /* green — assigned / approved */ --danger: #C7431C; --danger-soft: #FDF0EC; /* red — errors */ /* Shape + shadow (brand scale) */ --radius: var(--kc-radius-md); --radius-sm: var(--kc-radius-sm); --shadow: var(--kc-shadow-sm); /* Type — Plus Jakarta Sans for UI/headings, Space Grotesk for labels/numerals */ --font-head: var(--kc-font-sans); --font-body: var(--kc-font-sans); --font-label: var(--kc-font-mono); } * { box-sizing: border-box; } body { margin: 0; background-color: var(--bg); color: var(--on); /* canvas default is light; cards set --ink on their own text */ font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* The framed app surface paints the brand gradient + faint cyan/periwinkle washes. */ .crew { background-color: var(--bg); background-image: radial-gradient(620px 460px at 88% -10%, rgba(109, 225, 254, .10), transparent 60%), radial-gradient(560px 480px at -8% 4%, rgba(136, 132, 228, .16), transparent 58%), var(--kc-gradient-bg); } /* RTL support (Arabic) flips via set by I18n. */ [dir="rtl"] { direction: rtl; }