/* ============================================================================ Inta Studio — design tokens (canonical) ---------------------------------------------------------------------------- The single source of truth for the Inta visual language: one monospace type scale, and two palettes — "paper" (light) and "terminal" (dark). This is a PALETTE LAYER, not a redesign. Layout, type scale and spacing are identical in both themes; only colour changes. Theme resolution (see /theme.js): - no [data-theme] -> follow the OS via prefers-color-scheme - [data-theme="light"] -> forced paper - [data-theme="dark"] -> forced terminal The attribute is written on before first paint, so there is no flash. Contrast: every foreground/background pair below meets WCAG AA (>= 4.5:1) for normal text. Measured ratios are noted inline. Ported to inta-hq (the internal dashboard) so the tools look like the site. ============================================================================ */ :root { /* ---- Type ------------------------------------------------------------ */ --font-mono: Menlo, ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace; --font-size-base: 13px; --line-height-base: 1.5; --font-weight-normal: 400; --font-weight-bold: 700; --underline-offset: 0.15em; /* ---- Space ----------------------------------------------------------- */ --measure: 640px; /* max reading column */ --block-gap: 1.5em; /* one blank monospace line between blocks */ --page-pad-x: clamp(0.75rem, 5vw, 2rem); --page-pad-top: clamp(2rem, 8vh, 4rem); /* ---- Palette: paper (light) ------------------------------------------ */ color-scheme: light; --bg: #ffffff; --fg: #0c0c0c; /* 19.1:1 on --bg */ --fg-muted: #555555; /* 7.5:1 on --bg */ --link: #0c0c0c; /* 19.1:1 on --bg */ --link-hover: #555555; /* 7.5:1 on --bg */ --accent: #0c0c0c; --rule: #e0e0e0; --focus: #0c0c0c; --caret-glyph: ''; /* no terminal caret on paper */ --caret-gap: 0; } /* ---- Palette: terminal (dark) ------------------------------------------- Background is the light theme's ink, inverted: #0c0c0c. One accent, chosen and held to: amber phosphor. No second hue. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #0c0c0c; --fg: #e4e4e4; /* 15.4:1 on --bg */ --fg-muted: #8a8a8a; /* 5.7:1 on --bg */ --link: #e8a33d; /* 9.1:1 on --bg */ --link-hover: #f5c56b; /* 12.5:1 on --bg */ --accent: #e8a33d; --rule: #262626; --focus: #e8a33d; --caret-glyph: '\2588'; /* full block cursor */ --caret-gap: 0.35ch; } } :root[data-theme='dark'] { color-scheme: dark; --bg: #0c0c0c; --fg: #e4e4e4; --fg-muted: #8a8a8a; --link: #e8a33d; --link-hover: #f5c56b; --accent: #e8a33d; --rule: #262626; --focus: #e8a33d; --caret-glyph: '\2588'; --caret-gap: 0.35ch; }