/* ============================================================ CHAR MO — Design Tokens Industrial precision system. One accent, hairline geometry, monospace technical annotation. No gradients-as-decoration. ============================================================ */ :root{ /* ---- Colour: cast iron → machined aluminium → hot metal ---- */ --ink:#0A0B0C; --ink-2:#101315; --graphite:#16181B; --graphite-2:#1E2226; --steel:#6E757C; --steel-2:#8B9298; --alu:#C7CCD1; --alu-2:#E2E5E8; --paper:#F4F5F6; --paper-2:#FFFFFF; --ember:#E0501E; /* hot metal — the single accent */ --ember-dk:#B33D14; --ember-lt:#FF7A47; --ember-wash:rgba(224,80,30,.10); /* ---- Semantic (light surface = default page) ---- */ --bg:var(--paper); --bg-elev:var(--paper-2); --fg:var(--ink); --fg-mute:#4A5157; --fg-faint:var(--steel); --rule:rgba(10,11,12,.13); --rule-strong:rgba(10,11,12,.28); --accent:var(--ember); /* ---- Dark section overrides (apply .is-dark) ---- */ --d-bg:var(--ink); --d-fg:#F2F3F4; --d-fg-mute:#A7AEB4; --d-rule:rgba(255,255,255,.14); /* ---- Type ---- */ --f-display:'Archivo',"Noto Sans TC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --f-body:'Inter',"Noto Sans TC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; /* fluid scale — 360px → 1600px */ --t-2xs:.6875rem; /* 11 */ --t-xs:.75rem; /* 12 */ --t-sm:.8125rem; /* 13 */ --t-base:clamp(.9375rem,.88rem + .24vw,1.0625rem); /* 15→17 */ --t-lg:clamp(1.0625rem,.98rem + .36vw,1.25rem); --t-xl:clamp(1.25rem,1.1rem + .64vw,1.625rem); --t-2xl:clamp(1.5rem,1.24rem + 1.1vw,2.25rem); --t-3xl:clamp(2rem,1.5rem + 2.1vw,3.5rem); --t-4xl:clamp(2.5rem,1.5rem + 4.2vw,5.5rem); --t-5xl:clamp(3.25rem,1.4rem + 7.8vw,9rem); /* ---- Space (8pt with a 4pt half-step) ---- */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem; --s-sect:clamp(4rem,3rem + 5vw,9rem); /* ---- Layout ---- */ --wrap:88rem; /* 1408 */ --wrap-narrow:56rem; --gutter:clamp(1.25rem,.6rem + 2.6vw,4rem); --col-gap:clamp(1rem,.5rem + 1.4vw,2rem); /* ---- Motion ---- */ --e-out:cubic-bezier(.16,1,.3,1); --e-in-out:cubic-bezier(.65,0,.35,1); --dur-1:.18s; --dur-2:.34s; --dur-3:.62s; --dur-4:1.1s; --z-hdr:100; --z-drawer:200; --z-modal:300; } /* Dark surface: flip the semantics, keep one source of truth */ .is-dark{ --bg:var(--d-bg); --bg-elev:var(--graphite); --fg:var(--d-fg); --fg-mute:var(--d-fg-mute); --fg-faint:var(--steel-2); --rule:var(--d-rule); --rule-strong:rgba(255,255,255,.3); color-scheme:dark; /* inherited colour must be reset too — redefining --fg alone does not change the colour a child already inherited from . */ background-color:var(--bg); color:var(--fg); } .is-dark .btn--ghost{--fg-b:var(--fg);border-color:var(--rule-strong)}