/* InkMirage design tokens — v1 (2026-09-28) Light values live on :root. Dark values apply with [data-theme="dark"] on , or automatically via prefers-color-scheme unless the page pins [data-theme="light"]. Prefix: --im- (InkMirage). Colours checked for WCAG 2.x contrast; see README.md. */ :root { color-scheme: light; /* Colour: surfaces and text */ --im-bg: #F7F6F2; /* paper */ --im-surface: #EFEDE6; /* cards, header strip, code blocks */ --im-text: #15171D; /* body text 16.57:1 on bg, 15.29:1 on surface */ --im-muted: #5A5F6B; /* secondary text 5.91:1 on bg, 5.46:1 on surface */ --im-border: #D9D6CC; /* hairlines, card borders (non-text) */ /* Colour: brand */ --im-ink: #1B2A4A; /* the ink drop, wordmark, headings */ --im-accent: #2E4FB8; /* links, focus, primary buttons 6.64 / 6.13 */ --im-mirage: #2A9DA8; /* decorative only (reflection slices, rules) 2.99 / 2.76 — not for text */ --im-mirage-soft: #CFEAEC; /* shimmer lines, tints, selection */ /* Colour: products */ --im-endleaf: #3B7758; /* Endleaf accent (was #3C7A5A: 4.35:1 on surface failed AA) 4.90 / 4.53 */ --el-leaf: #C6E2D3; /* Endleaf free-leaf tint. Logo kit v1.1. Not a text colour. */ --im-sysmledge: #111111; /* SysMLEdge stays monochrome */ /* Derived helpers */ --im-on-accent: #FFFFFF; --im-focus-ring: 0 0 0 3px color-mix(in srgb, var(--im-accent) 35%, transparent); --im-selection: var(--im-mirage-soft); /* Typography — Traditional Chinese safe (never list SC fonts) */ --im-font-display: "Source Serif 4", "Noto Serif TC", serif; --im-font-body: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --im-font-mono: "JetBrains Mono", ui-monospace, monospace; --im-weight-regular: 400; --im-weight-medium: 500; --im-weight-semibold: 600; --im-tracking-wordmark: 0.02em; --im-leading-tight: 1.15; --im-leading-body: 1.6; --im-leading-cjk: 1.8; /* use on :lang(zh-Hant) blocks */ /* Type scale (rem, 16px base; ~1.25 ratio) */ --im-text-xs: 0.75rem; /* 12 */ --im-text-sm: 0.875rem; /* 14 */ --im-text-md: 1rem; /* 16 */ --im-text-lg: 1.25rem; /* 20 */ --im-text-xl: 1.5625rem; /* 25 */ --im-text-2xl: 1.953rem; /* 31 */ --im-text-3xl: 2.441rem; /* 39 */ --im-text-4xl: 3.052rem; /* 49 */ /* Spacing scale (4px base) */ --im-space-0: 0; --im-space-1: 0.25rem; /* 4 */ --im-space-2: 0.5rem; /* 8 */ --im-space-3: 0.75rem; /* 12 */ --im-space-4: 1rem; /* 16 */ --im-space-5: 1.5rem; /* 24 */ --im-space-6: 2rem; /* 32 */ --im-space-7: 3rem; /* 48 */ --im-space-8: 4rem; /* 64 */ --im-space-9: 6rem; /* 96 */ /* Shape */ --im-radius-sm: 6px; --im-radius: 10px; --im-radius-lg: 16px; --im-radius-pill: 999px; --im-border-width: 1px; /* Layout */ --im-content-max: 72rem; --im-measure: 38rem; /* comfortable line length for body copy */ } [data-theme="dark"] { color-scheme: dark; --im-bg: #0D0F14; --im-surface: #151923; --im-text: #E8E6E0; /* 15.36 / 14.08 */ --im-muted: #9CA2AF; /* 7.49 / 6.86 */ --im-border: #272C38; --im-ink: #C9D4F0; --im-accent: #8EA8FF; /* 8.39 / 7.69 */ --im-mirage: #5CCAD3; /* 9.90 / 9.07 */ --im-mirage-soft: #123A40; --im-endleaf: #6FC39A; /* 9.08 / 8.32 */ --el-leaf: #2D533F; /* Endleaf free-leaf tint, dark. Logo kit v1.1. */ --im-sysmledge: #F2F2F2; --im-on-accent: #0D0F14; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --im-bg: #0D0F14; --im-surface: #151923; --im-text: #E8E6E0; --im-muted: #9CA2AF; --im-border: #272C38; --im-ink: #C9D4F0; --im-accent: #8EA8FF; --im-mirage: #5CCAD3; --im-mirage-soft: #123A40; --im-endleaf: #6FC39A; --el-leaf: #2D533F; --im-sysmledge: #F2F2F2; --im-on-accent: #0D0F14; } }