/* ============================================================ Chess Notation Pad — design tokens · v3 (locked) Light theme on :root, dark theme on [data-theme="dark"] (set the attribute on or ). Flat colours only. Framework7 / Cordova friendly. v3: --accent-icon (light) moved to brand-500 for 3:1 icons; check ring gets its own heavier width token. v2 changes: - Brand ramp numbers now track LIGHTNESS in both themes (primitives are theme-invariant). Components reference the semantic alias layer below, which flips per theme. - Board states use distinct MECHANISMS: lastmove = tinted fill, selected = inset ring (no fill), check = red fill + dark ring, legal = centre dot. New ring tokens added. ============================================================ */ :root { /* ---- Brand primitives (from icon green #48663A) ---- Lightness-tied: 950 darkest → 50 lightest, in BOTH themes. Never reference a numbered stop from component CSS — use the semantic aliases below. */ --brand-950: #141D0F; --brand-900: #1E2C17; --brand-800: #2B4021; --brand-700: #3A5330; --brand-600: #48663A; /* source colour */ --brand-500: #5A7C4B; --brand-400: #7A9A69; --brand-300: #9DB88D; --brand-200: #C2D4B5; --brand-100: #DFE9D6; --brand-50: #EFF4EA; /* ---- Semantic aliases (flip per theme) ---- */ --action: var(--brand-600); /* primary buttons, headers */ --action-press: var(--brand-700); /* pressed state */ --action-ink: #FFFFFF; /* label on --action */ --action-secondary: var(--brand-500); --accent-icon: var(--brand-500); /* v3: brand-400 was 2.82:1 on --bg */ --accent-decorative: var(--brand-300); --ink-deep: var(--brand-900); /* highest-emphasis brand ink */ --fill-pale: var(--brand-100); --fill-palest: var(--brand-50); --fill-pale-ink: var(--brand-800); /* text on pale fills */ /* ---- Surfaces & text ---- */ --bg: #F6F2E8; /* warm off-white, family match */ --surface: #FDFBF5; --surface-raised: #FFFFFF; /* card white from the icon */ --border: #DDD6C4; --divider: #EAE4D4; --text-primary: #3A0A0A; /* icon maroon as high-emphasis ink */ --text-secondary: #5F544A; --text-muted: #8A7D6E; /* captions / large text only (3:1) */ /* ---- Chess board ---- Each state has its own mechanism, never fill-vs-fill alone: lastmove = tinted fill (≥1.6:1 vs both squares) selected = inset ring, no fill (≥3:1 vs both squares + lastmove) check = red fill + dark inset ring (ring ≥3:1 vs the fill) legal = centre dot (≥3:1 vs both squares + lastmove) */ --board-light: #EDE1C1; /* buff */ --board-dark: #647E52; /* tournament green, ≥3:1 vs buff */ --board-lastmove: #C89B3C; /* amber fill, move just played */ --board-selected-ring: var(--brand-900); /* inset ring on tapped square */ --board-check: #C2453B; /* check square fill */ --board-check-ring: #3F0904; /* inset ring on check square */ --board-legal: #1A2614; /* legal-destination dot */ --board-ring-width: 4px; /* selected ring */ --board-check-ring-width: 7px; /* check ring — visibly heavier, so check ≠ selected without hue */ /* ---- Game results (chip ink + chip fill) ---- Never hue alone: pair each chip with its letter (W / L / D) and glyph (▲ / ▼ / ＝). */ --result-win: #2C5426; --result-win-bg: #DCE7D4; --result-loss: #7E2A22; --result-loss-bg: #F3DBD4; --result-draw: #514E45; --result-draw-bg: #E8E3D6; /* ---- Player colour chips ---- */ --player-white: #FFFFFF; --player-white-ink: #3A0A0A; --player-black: #262420; --player-black-ink: #F1ECDD; /* ---- Feedback ---- */ --success: #386E38; --warning: #8E5D12; --danger: #B3372E; --info: #2D6A8A; } [data-theme="dark"] { /* Brand primitives are NOT overridden — brand-900 stays the darkest green everywhere. Only the aliases remap. */ --action: var(--brand-300); --action-press: var(--brand-200); --action-ink: var(--brand-900); --action-secondary: var(--brand-400); --accent-icon: var(--brand-400); --accent-decorative: var(--brand-500); --ink-deep: var(--brand-50); --fill-pale: var(--brand-900); --fill-palest: var(--brand-950); --fill-pale-ink: var(--brand-200); --bg: #171911; /* warm dark with a green cast */ --surface: #1F2218; --surface-raised: #272B1F; --border: #3B4030; --divider: #2E3325; --text-primary: #F1ECDD; --text-secondary: #C2BBA7; --text-muted: #918A78; --board-light: #BFB287; --board-dark: #4E6141; --board-lastmove: #9A7C2E; --board-selected-ring: #000000; /* pure black — clears 3:1 on the dark square */ --board-check: #D45B4E; --board-check-ring: #3F0904; --board-legal: #000000; --result-win: #B7D3A4; --result-win-bg: #2C3B22; --result-loss: #E5A79A; --result-loss-bg: #442821; --result-draw: #C6C0B0; --result-draw-bg: #33362B; --player-white: #EDE6D6; --player-white-ink: #3A0A0A; --player-black: #14120D; --player-black-ink: #F1ECDD; --success: #7FBB74; --warning: #D5A046; --danger: #E27E6F; --info: #72B0CD; }