/* Mingo - ui/theme.css. Design tokens + base element styles. Every page links this first: (then ui/kit.css, then the page's own CSS) The look is ChineseCard's (DESIGN.md, "Owner direction, 2026-09-29"; ChineseCard lib/theme.ps1 + SPEC sections 3, 17, 18, 33, 50, 51): - the LIGHT palette (default) = ChineseCard's larger view: a warm OPAQUE paper ground (Ground0 -> Ground1), panels and controls of the glass-in layer (white 0.55, 0.92 under the pointer) inside a dark 0.10 hairline with a white top line, Current blue = "this one", no drop shadows, capsule controls. Used by the new tab and the larger view. - the DARK palette = the same pages when meets a dark OS (or data-theme="dark", tests): ChineseCard's dark ground with the card's lifted greys. - the CARD palette (.mg-card-theme, always, whatever the theme) = the small card's graphite scheme 8 (SPEC section 50): a neutral graphite sheet, two tones (the sheet + the white 0.07 glass-in), greys lifted so every text is >= 4.5:1. Used by the popup and the side panel. Type: the system stack (Segoe UI on Windows), Chinese in the system CJK faces (Microsoft YaHei UI / PingFang SC / Noto Sans SC). Bundled fonts (ui/fonts/, SIL OFL 1.1): Mingo POJ for Hokkien (--font-poj) and a 10-glyph Iansui subset for rare CJK characters (last in every stack). Contrast: every text token is >= 4.5:1 on its ground and on the glass-in fill (numbers in comments). */ /* the rare CJK characters of the says fields (Hokkien MOE forms 𪜶 䆀 𠢕 𤆬 𤲍 𥍉 𨑨 𬦰 䫌, Japanese 𠮟) that system fonts may lack: Iansui (SIL OFL 1.1, ui/fonts/OFL-Iansui.txt) subset to exactly those glyphs, a fallback LAST in every stack and limited to these code points; test/rarefont.test.mjs fails when the data holds an Extension A / B+ character the subset does not have */ @font-face { font-family: 'Iansui'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/iansui-rare-subset.woff2') format('woff2'); unicode-range: U+4180, U+4ACC, U+20895, U+20B9F, U+241AC, U+24C8D, U+25349, U+28468, U+2A736, U+2C9B0; } /* POJ (Hokkien): Noto Sans (SIL OFL 1.1, ui/fonts/OFL-NotoSans.txt), wght 400-700, cut to Latin + the POJ marks and renamed, with U+030D COMBINING VERTICAL LINE ABOVE lengthened to 0.30 em (Noto's and Segoe UI's 0.17 em stub reads as a dot at card sizes). Used only through --font-poj, so it loads only where Hokkien is shown. */ @font-face { font-family: 'Mingo POJ'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/mingo-poj.woff2') format('woff2'); } /* ---------- tokens: light (default) = ChineseCard's larger view ---------- */ :root { color-scheme: light; /* brand: the 明 seal only (icons/mark.svg, kit.markSvg) - never a UI colour */ --indigo: #3446F0; --sun: #FF6B35; /* the ground (ChineseCard Ground0 -> Ground1): opaque warm paper, top to bottom */ --ground-0: #FCF8F2; --ground-1: #F3F1EE; --ground: linear-gradient(180deg, var(--ground-0), var(--ground-1)); /* semantic roles - use these in pages */ --bg: #F7F4F0; /* the ground as one colour (for text measured on it: worst case --ground-1) */ --surface: #FFFFFF; /* Field: an OPAQUE plate over content (tooltip, toast, chart tip, dialog, list cover) */ --surface-2: rgba(255, 255, 255, 0.55); /* GlassIn: panels, controls at rest */ --surface-hover: rgba(255, 255, 255, 0.92); /* GlassInHover: under the pointer, the raised (selected) capsule */ --glass-edge: rgba(0, 0, 0, 0.10); /* GlassInEdge: a panel's / control's hairline (a white edge does not show on paper) */ --glass-hi: #FFFFFF; /* GlassInHi: the light from above, an inset top line */ --border: rgba(0, 0, 0, 0.10); /* Line: hairlines between rows */ --border-strong: rgba(0, 0, 0, 0.16); /* Edge: a window-like frame, rings at rest */ --fill-quiet: rgba(0, 0, 0, 0.05); /* CardBg2: a switch track off, a bare button's press */ --thumb: rgba(0, 0, 0, 0.20); /* scroll bar thumb */ --fg: #1A1C22; /* 15.1:1 on Ground1 */ --fg-2: #5A5F6B; /* 5.7:1 */ --fg-3: #676C77; /* 4.6:1 (ChineseCard's #8A8F9A lifted to Mingo's 4.5 rule) */ --mark: #8A8F9A; /* non-text: New's ring, icons at rest (Fg3) */ --current: #3B6EA8; /* "this one" (SPEC 21): target word, selected tab label, current rail item, on switch; 4.7:1 */ --current-hover: #34619A; --current-tint: rgba(59, 110, 168, 0.12); --accent: var(--current); /* the one filled (primary) button */ --on-accent: #FFFFFF; --accent-text: var(--current); /* links, the target word + its pinyin */ --accent-tint: var(--current-tint); --indigo-strong: var(--current-hover); /* (legacy name) a filled control under the pointer */ --danger: #C62828; /* 5.0:1 */ /* statuses: New neutral (Fg3), Learning = Warn, Known = Good (ChineseCard Theme.Status). The mark colour stays the status's own in every state: a hollow ring at rest, the same ring filled when selected - never an ink / white fill. --status-X the mark · -ink its text colour (>= 4.5:1) · -tint a pale opaque plate */ --status-new: #8A8F9A; --status-new-ink: #5A5F6B; --status-new-tint: #ECEBE8; --status-learning: #F5B800; --status-learning-ink: #8A6000; --status-learning-tint: #FFF6D6; --status-known: #21A04A; --status-known-ink: #187A38; --status-known-tint: #E4F4E9; /* (legacy fill tokens: nothing is filled with a status colour any more; kept so older rules resolve) */ --status-new-fill: var(--surface-hover); --status-new-on: var(--fg); --status-learning-fill: var(--surface-hover); --status-learning-on: var(--fg); --status-known-fill: var(--surface-hover); --status-known-on: var(--fg); /* the Word Cousins' languages: --lang-X = the mark colour (link dots, chips), --lang-X-text = the same hue as text, >= 4.5:1 on the ground and the glass-in fill (Hokkien 5.8, Japanese 6.2, Korean 5.9, Vietnamese 5.7) */ --lang-hok: #C2410C; --lang-hok-text: #A8380A; /* orange */ --lang-ja: #9D2B6B; --lang-ja-text: #9D2B6B; /* plum */ --lang-ko: #0B6E8A; --lang-ko-text: #0A657F; /* teal */ --lang-vi: #3446F0; --lang-vi-text: #3446F0; /* indigo */ /* cognate states (SPEC 19): same = Good dot, shifted = Warn ≈, different = Accent → */ --cognate-same: #21A04A; --cognate-shifted: #F5B800; --cognate-different: #E53935; /* the sentence order map (SPEC 3, ChineseCard's light Ramp): chunk underlines by English order, red -> green */ --order-0: #E53935; --order-1: #F5761A; --order-2: #F5B800; --order-3: #8BC34A; --order-4: #21A04A; /* rarity tiers (SPEC 6/62; ChineseCard Tier1..5): Very common .. Very rare, fill + ink (ink >= 4.5:1 on fill) */ --tier-1: #E2E4E9; --tier-1-ink: #3E4553; --tier-2: #D0EDE5; --tier-2-ink: #155947; --tier-3: #E0E3F9; --tier-3-ink: #333F8E; --tier-4: #ECDDF6; --tier-4-ink: #5B2E86; --tier-5: #FADDB0; --tier-5-ink: #7A4A08; /* type: the system stack; Iansui last (the rare-glyph fallback) */ --font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans', Roboto, 'Helvetica Neue', Arial, 'Iansui', sans-serif; --font-display: var(--font-ui); --font-reading: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans', 'Helvetica Neue', Arial, 'Iansui', sans-serif; /* pinyin, Vietnamese, English */ --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; /* POJ (Hokkien) needs U+030D a̍ and U+0358 o͘: the bundled Mingo POJ (a longer U+030D), then system faces */ --font-poj: 'Mingo POJ', 'Segoe UI', 'Noto Sans', 'Helvetica Neue', 'DejaVu Sans', Arial, 'Iansui', sans-serif; --font-zh: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Iansui', sans-serif; /* Japanese and Korean in their own system faces (kana, hangul) */ --font-ja: 'Yu Gothic UI', 'Yu Gothic', 'Meiryo UI', 'Meiryo', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', 'Iansui', sans-serif; --font-ko: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR', 'Source Han Sans KR', 'Iansui', sans-serif; --text-xs: 12px; /* labels, captions (ChineseCard Small) */ --text-sm: 13px; /* controls, rail labels (Body) */ --text-base: 14px; /* body */ --text-md: 16px; /* readings, emphasised body */ --text-lg: 18px; /* group titles */ --text-xl: 22px; /* page questions */ --text-2xl: 34px; --text-3xl: 48px; --text-4xl: 72px; /* the word on the new tab */ --leading-tight: 1.2; --leading: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 700; /* shape + space (ChineseCard Size.Radius*: control 8, panel 12, window 16; capsules = half their height) */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --tap: 44px; /* minimum touch target (hit area; a control may draw smaller inside it) */ --control-h: 32px; /* a capsule button / chip / text box */ --seg-h: 28px; /* a segment inside its track (track = segment + 2 px padding + hairline) */ /* the glass-in recipe: fill + hairline + the light from above (no drop shadow anywhere: ChineseCard cuts surfaces out by a hairline) */ --edge-in: inset 0 1px 0 var(--glass-hi); --shadow-1: none; --shadow-2: none; --shadow-3: 0 18px 48px -12px rgba(40, 30, 20, 0.28); /* a dialog only: it floats over the page */ /* focus: a Current ring */ --focus: var(--current); --focus-ring: 0 0 0 2px var(--focus); --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 100ms; --dur: 150ms; } /* ---------- tokens: dark (the larger view and the new tab under a dark OS) ---------- */ /* One declaration list, used twice: data-theme="dark", and data-theme="system" when the OS is dark. */ html[data-theme="dark"] { color-scheme: dark; --ground-0: #221D27; --ground-1: #17131B; --bg: #1C1821; --surface: #34373E; --surface-2: rgba(255, 255, 255, 0.07); --surface-hover: rgba(255, 255, 255, 0.15); --glass-edge: rgba(255, 255, 255, 0.10); --glass-hi: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --fill-quiet: rgba(255, 255, 255, 0.09); --thumb: rgba(255, 255, 255, 0.25); --fg: #ECEDF0; /* 14.1:1 */ --fg-2: #C2C6CE; /* 9.6:1 */ --fg-3: #AFB4BE; /* 7.9:1 */ --mark: #AFB4BE; --current: #8FB6EC; /* 7.9:1 */ --current-hover: #A5C5F0; --current-tint: rgba(141, 180, 234, 0.20); --on-accent: #17131B; --danger: #FF7A70; --status-new: #AFB4BE; --status-new-ink: #E3E5EA; --status-new-tint: #2E2A33; --status-learning: #FFC83D; --status-learning-ink: #FFC83D; --status-learning-tint: #4D4528; --status-known: #3DD46A; --status-known-ink: #3DD46A; --status-known-tint: #2F4A3A; --cognate-same: #3DD46A; --cognate-shifted: #FFC83D; --cognate-different: #FF5A52; --lang-vi: #8C98FF; --lang-vi-text: #8C98FF; --lang-hok: #FF9A5C; --lang-hok-text: #FF9A5C; --lang-ja: #F08DC4; --lang-ja-text: #F08DC4; --lang-ko: #4CC3E0; --lang-ko-text: #4CC3E0; --order-0: #F26D66; --order-1: #F2954F; --order-2: #EFC458; --order-3: #A9D75E; --order-4: #55CC7A; --tier-1: #3C3F46; --tier-1-ink: #D6DAE2; --tier-2: #224640; --tier-2-ink: #BDEBD9; --tier-3: #343A6A; --tier-3-ink: #CBD0FA; --tier-4: #472F60; --tier-4-ink: #E3CDF6; --tier-5: #5A4220; --tier-5-ink: #FFD79B; --shadow-3: 0 18px 48px -12px rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { html[data-theme="system"] { color-scheme: dark; --ground-0: #221D27; --ground-1: #17131B; --bg: #1C1821; --surface: #34373E; --surface-2: rgba(255, 255, 255, 0.07); --surface-hover: rgba(255, 255, 255, 0.15); --glass-edge: rgba(255, 255, 255, 0.10); --glass-hi: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --fill-quiet: rgba(255, 255, 255, 0.09); --thumb: rgba(255, 255, 255, 0.25); --fg: #ECEDF0; --fg-2: #C2C6CE; --fg-3: #AFB4BE; --mark: #AFB4BE; --current: #8FB6EC; --current-hover: #A5C5F0; --current-tint: rgba(141, 180, 234, 0.20); --on-accent: #17131B; --danger: #FF7A70; --status-new: #AFB4BE; --status-new-ink: #E3E5EA; --status-new-tint: #2E2A33; --status-learning: #FFC83D; --status-learning-ink: #FFC83D; --status-learning-tint: #4D4528; --status-known: #3DD46A; --status-known-ink: #3DD46A; --status-known-tint: #2F4A3A; --cognate-same: #3DD46A; --cognate-shifted: #FFC83D; --cognate-different: #FF5A52; --lang-vi: #8C98FF; --lang-vi-text: #8C98FF; --lang-hok: #FF9A5C; --lang-hok-text: #FF9A5C; --lang-ja: #F08DC4; --lang-ja-text: #F08DC4; --lang-ko: #4CC3E0; --lang-ko-text: #4CC3E0; --order-0: #F26D66; --order-1: #F2954F; --order-2: #EFC458; --order-3: #A9D75E; --order-4: #55CC7A; --tier-1: #3C3F46; --tier-1-ink: #D6DAE2; --tier-2: #224640; --tier-2-ink: #BDEBD9; --tier-3: #343A6A; --tier-3-ink: #CBD0FA; --tier-4: #472F60; --tier-4-ink: #E3CDF6; --tier-5: #5A4220; --tier-5-ink: #FFD79B; --shadow-3: 0 18px 48px -12px rgba(0, 0, 0, 0.6); } } /* ---------- tokens: the card (popup, side panel) = ChineseCard's small card, graphite scheme 8, in every theme ---------- */ .mg-card-theme { color-scheme: dark; --ground-0: #1B1C21; --ground-1: #17181D; /* the sheet (Glass #17181D) with its sheen at the top */ --ground: linear-gradient(180deg, #25262B 0%, #17181D 55%, #17181D 100%); --bg: #17181D; --surface: #34373E; /* Field: an opaque plate (the gloss tooltip) */ --surface-2: rgba(255, 255, 255, 0.07); /* GlassIn: the well, a control set into the sheet */ --surface-hover: rgba(255, 255, 255, 0.15); /* GlassInHover */ --glass-edge: rgba(255, 255, 255, 0.10); --glass-hi: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --fill-quiet: rgba(255, 255, 255, 0.09); --thumb: rgba(255, 255, 255, 0.25); --fg: #ECEDF0; /* 15.1:1 on the sheet, 12.6:1 on the well */ --fg-2: #C2C6CE; /* 10.4 / 8.6 */ --fg-3: #AFB4BE; /* 8.5 / 7.1 */ --mark: #AFB4BE; --current: #8FB6EC; /* 8.5 / 7.1 */ --current-hover: #A5C5F0; --current-tint: rgba(141, 180, 234, 0.20); --on-accent: #17181D; --danger: #FF7A70; --status-new: #AFB4BE; --status-new-ink: #E3E5EA; --status-new-tint: #2A2B31; --status-learning: #FFC83D; --status-learning-ink: #FFC83D; --status-learning-tint: #4D4528; --status-known: #3DD46A; --status-known-ink: #3DD46A; --status-known-tint: #2F4A3A; --cognate-same: #3DD46A; --cognate-shifted: #FFC83D; --cognate-different: #FF5A52; --lang-vi: #8C98FF; --lang-vi-text: #8C98FF; --lang-hok: #FF9A5C; --lang-hok-text: #FF9A5C; --lang-ja: #F08DC4; --lang-ja-text: #F08DC4; --lang-ko: #4CC3E0; --lang-ko-text: #4CC3E0; /* the card's order map is ChineseCard's QUIET dark ramp (the sentence reads first) */ --order-0: #F26D66; --order-1: #F2954F; --order-2: #EFC458; --order-3: #A9D75E; --order-4: #55CC7A; --tier-1: #3C3F46; --tier-1-ink: #D6DAE2; --tier-2: #224640; --tier-2-ink: #BDEBD9; --tier-3: #343A6A; --tier-3-ink: #CBD0FA; --tier-4: #472F60; --tier-4-ink: #E3CDF6; --tier-5: #5A4220; --tier-5-ink: #FFD79B; } /* ---------- base elements ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground-1); } body { margin: 0; background: var(--ground) fixed, var(--ground-1); color: var(--fg); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin: 0; } h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } p { margin: 0; } a { color: var(--accent-text); text-decoration: none; border-radius: var(--radius-xs); } a:hover { text-decoration: underline; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } /* a button (ChineseCard 'Flat'): a capsule of the glass-in fill inside its hairline, brighter under the pointer; the hit area is >= 44 px */ button { min-height: var(--control-h); min-width: var(--control-h); padding: 0 14px; border: 1px solid var(--glass-edge); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--fg-2); font-size: var(--text-sm); font-weight: var(--weight-regular); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } button:hover { background: var(--surface-hover); color: var(--fg); } button:active { background: var(--surface-hover); } button:disabled { cursor: default; opacity: 0.35; } button:disabled:hover { background: var(--surface-2); color: var(--fg-2); } /* the one filled button (ChineseCard 'Primary'): a Current capsule with white text, CurrentHover under the pointer */ button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold); } button.primary:hover { background: var(--current-hover); border-color: var(--current-hover); color: var(--on-accent); } button.primary:disabled:hover { background: var(--accent); border-color: var(--accent); } /* a bare button: no fill, no hairline until the pointer is over it */ button.quiet { background: transparent; border-color: transparent; } button.quiet:hover { background: var(--surface-2); border-color: var(--glass-edge); } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } ::selection { background: var(--current-tint); color: var(--fg); } /* scroll bars: ChineseCard's 6 px capsule thumb in an 8 px lane */ * { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; } /* Chinese text: the system CJK stack. Latin readings stay in the reading face (never the CJK face: YaHei lacks a̍ / o͘). */ :lang(zh), .zh { font-family: var(--font-zh); } .reading, .py, :lang(vi) { font-family: var(--font-reading); } :lang(nan-Latn), .poj { font-family: var(--font-poj); } :lang(ja) { font-family: var(--font-ja); } :lang(ko) { font-family: var(--font-ko); } :lang(ja-Latn), :lang(ko-Latn) { font-family: var(--font-reading); } .display { font-family: var(--font-ui); } .muted { color: var(--fg-2); } .num { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }