/* Pencil In — web token layer. Same role names as the app (DESIGN-SPEC-16 §1 / Tokens.swift). Theme is a PAGE attribute (), never prefers-color-scheme: the app's default is night regardless of system (D8); documents are paper. */ :root { --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --radius-chip:8px; --radius-sheet:12px; --radius-capsule:18px; --radius-icon:9px; --hairline:1px; --hit-min:44px; --measure:38rem; --page:1200px; --gutter:var(--s7); --font-sans:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; /* type ramp: size/line/weight/tracking */ --t-display-xl:128px; --t-display-xl-lh:1; --t-display-xl-tr:-3px; --t-display-lg:64px; --t-display-lg-lh:1.05; --t-display-lg-tr:-1.5px; --t-display-md:40px; --t-display-md-lh:1.1; --t-display-md-tr:-0.8px; --t-title:28px; --t-title-lh:1.25; --t-title-tr:-0.4px; --t-body-lg:19px; --t-body-lg-lh:1.5; --t-body:17px; --t-body-lh:1.6; --t-caption:13px; --t-caption-lh:1.4; --t-label:12px; --t-label-lh:1.2; --t-label-tr:0.8px; } html[data-theme="night"] { color-scheme: dark; --bg:#22393C; --card:#2B4549; --ink:#F2E9DC; --sub:#D1C7B6; --faint:#BCB3A3; --line:rgba(242,233,220,.18); --rule:#8C9793; --edge:#8C9793; --ok:#EFA556; --warn:#F49C84; --sel:#E8963A; --selText:#22282A; } html[data-theme="day"] { color-scheme: light; --bg:#FAF8F4; --card:#F0EDE7; --ink:#1A1815; --sub:#57544E; --faint:#655F57; --line:#D7D2C8; --rule:#7F89A3; --edge:#8E887C; --ok:#7E5A1C; --warn:#9C4A30; --sel:#1A1815; --selText:#FAF8F4; } @media (max-width: 720px) { :root { --gutter:var(--s4); } }