/* * @araharah/theme — Telemetry Rams design tokens * ------------------------------------------------------------------ * Single source of truth for every numeric design value in araharah. * Vocabulary is copied VERBATIM from the frontmatter of * stitch_minimalist_route_navigator/telemetry_rams/DESIGN.md (D-02: * mockup markup maps 1:1 — bg-signal-orange, px-margin, gap-space-md…). * * Values live ONLY here (D-07). Docs describe principles and point to * this package; they never restate hex codes, sizes, or spacing. * * @theme static — v4 tree-shakes unused theme variables by default; * `static` forces every token into the compiled output so the package * is consumable as plain CSS custom properties by any later phase * (D-01), including the MapLibre basemap derivation (D-09). */ @theme static { /* — Colors: Material-style neutrals + Rams brand (verbatim, 55) — */ --color-surface: #fff8f0; --color-surface-dim: #e0d9cd; --color-surface-bright: #fff8f0; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #faf3e6; --color-surface-container: #f5ede0; --color-surface-container-high: #efe7db; --color-surface-container-highest: #e9e2d5; --color-on-surface: #1e1b14; --color-on-surface-variant: #564335; --color-inverse-surface: #333028; --color-inverse-on-surface: #f7f0e3; --color-outline: #897363; --color-outline-variant: #dcc1af; --color-surface-tint: #914c00; --color-primary: #914c00; --color-on-primary: #ffffff; --color-primary-container: #eb8008; --color-on-primary-container: #522900; --color-inverse-primary: #ffb77f; --color-secondary: #5f5e5e; --color-on-secondary: #ffffff; --color-secondary-container: #e2dfde; --color-on-secondary-container: #636262; --color-tertiary: #676013; --color-on-tertiary: #ffffff; --color-tertiary-container: #b7ad59; --color-on-tertiary-container: #464000; --color-error: #ba1a1a; --color-on-error: #ffffff; --color-error-container: #ffdad6; --color-on-error-container: #93000a; --color-primary-fixed: #ffdcc3; --color-primary-fixed-dim: #ffb77f; --color-on-primary-fixed: #2f1500; --color-on-primary-fixed-variant: #6e3900; --color-secondary-fixed: #e5e2e1; --color-secondary-fixed-dim: #c8c6c5; --color-on-secondary-fixed: #1c1b1b; --color-on-secondary-fixed-variant: #474746; --color-tertiary-fixed: #f0e58a; --color-tertiary-fixed-dim: #d3c972; --color-on-tertiary-fixed: #1f1c00; --color-on-tertiary-fixed-variant: #4e4800; --color-background: #fff8f0; --color-on-background: #1e1b14; --color-surface-variant: #e9e2d5; /* Rams brand core (verbatim casing from the design doc) */ --color-signal-orange: #EB8008; --color-matte-black: #1A1A1A; --color-soft-beige: #D9D2C6; --color-functional-red: #ED3F1C; --color-olive-green: #736B1E; --color-chassis-subtle: #CCC4B5; --color-surface-dark: #121212; --color-pure-white: #FFFFFF; /* — Spacing: 8px baseline grid (verbatim; never recomputed — D-07) — */ --spacing-gutter: 1rem; --spacing-gutter-desktop: 1.5rem; --spacing-margin: 1rem; --spacing-margin-desktop: 2rem; --spacing-space-xs: 0.25rem; --spacing-space-sm: 0.5rem; --spacing-space-md: 1rem; --spacing-space-lg: 1.5rem; --spacing-space-xl: 2rem; --spacing-space-2xl: 3rem; /* — Type families: Geist (body) + Space Grotesk (headlines/telemetry). sans aliases Geist; mono aliases Space Grotesk so the mockups' font-mono telemetry labels render in a self-hosted Rams grotesk (D-10, D-16) instead of a system monospace. — */ --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-geist: "Geist", ui-sans-serif, system-ui, sans-serif; --font-space-grotesk: "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Grotesk", "Geist", ui-monospace, monospace; /* — Radius: absolute zero roundedness (design doc, Shapes). Every token-driven rounded-* utility compiles to 0 — including bare `rounded`, which v4 drives from the deprecated bare --radius key (v3-compat default, node_modules/tailwindcss/theme.css "Deprecated" block); the v3-style DEFAULT sub-key form is inert in v4 and must not reappear. rounded-none/rounded-full are literal built-ins, not var-driven. — */ --radius: 0px; /* deprecated bare key — THE key that drives bare `rounded` */ --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; --radius-3xl: 0px; --radius-4xl: 0px; /* — Rams-forbidden primitives, disabled at the key (WR-01): v4's deprecated bare keys (v3-compat defaults, node_modules/tailwindcss/ theme.css "Deprecated" block) are what drive the bare shadow / shadow-inner / drop-shadow / blur utilities. `initial` removes the key, so those utilities can never compile — from any candidate source, prose leakage included (defense in depth on top of the @source scoping in theme.css). Scale keys remain: mockup-worn vocabulary only, flagged the moment an implementation page wears one (audit adjudication 1). — */ --shadow: initial; --shadow-inner: initial; --drop-shadow: initial; --blur: initial; } /* * — Typography scale (verbatim values from the design doc frontmatter) — * Compound custom properties per type token: consume as * * .headline { font: var(--type-headline-md); * letter-spacing: var(--type-headline-md-tracking); } * * font shorthand composes weight + size/line-height + family; the * -tracking companion carries the letter-spacing (not expressible in * the font shorthand). Later plans build sheet/specimen classes on * these vars. */ :root { /* Space Grotesk — display + headlines */ --type-display-lg: 700 48px/52px var(--font-space-grotesk); --type-display-lg-tracking: -0.04em; --type-display-lg-mobile: 700 36px/40px var(--font-space-grotesk); --type-display-lg-mobile-tracking: -0.03em; --type-headline-lg: 700 32px/38px var(--font-space-grotesk); --type-headline-lg-tracking: -0.03em; --type-headline-lg-mobile: 700 24px/30px var(--font-space-grotesk); --type-headline-lg-mobile-tracking: -0.02em; --type-headline-md: 600 20px/26px var(--font-space-grotesk); --type-headline-md-tracking: -0.02em; --type-headline-sm: 600 16px/22px var(--font-space-grotesk); --type-headline-sm-tracking: -0.01em; /* Geist — body */ --type-body-lg: 400 16px/24px var(--font-geist); --type-body-lg-tracking: -0.01em; --type-body-md: 400 14px/20px var(--font-geist); --type-body-md-tracking: 0em; --type-body-sm: 400 12px/16px var(--font-geist); --type-body-sm-tracking: 0.01em; /* Labels (uppercase, expanded tracking per design doc) */ --type-label-lg: 700 14px/18px var(--font-space-grotesk); --type-label-lg-tracking: 0.06em; --type-label-md: 600 12px/16px var(--font-geist); --type-label-md-tracking: 0.04em; --type-label-sm: 700 10px/12px var(--font-geist); --type-label-sm-tracking: 0.08em; /* Telemetry counters */ --type-telemetry-num: 700 28px/32px var(--font-space-grotesk); --type-telemetry-num-tracking: -0.03em; }