/* ============================================ tokens.css — design tokens + layout policy ============================================ Supported surfaces (locked): 1. Mobile (default) — field phones; full-width content 2. Office (wide) — min-width 60rem; content max 8.5in 3. Print — print.css (media=print); not tokens here Themes (cookie + data-theme on ): dark (default) — Sample-inspired dark + orange light — light + orange Tablets: no third layout. Width decides mobile vs office. ============================================ */ :root { /* Content column */ --content-max: 100%; --page-pad: 1rem; /* Shared type stack */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Spacing & radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Z-index scale (grow carefully) */ --z-toast: 1000; /* Brand accent (shared by both themes) */ --color-accent: #f97316; --color-accent-hover: #ea580c; --color-accent-light: rgba(249, 115, 22, 0.15); --color-on-accent: #ffffff; } /* ---------- Dark + Orange (default) ---------- */ :root, [data-theme="dark"] { color-scheme: dark; --color-text: #e5e5e5; --color-text-muted: #a3a3a3; --color-heading: #fafafa; --color-border: #262626; --color-bg: #0a0a0a; --color-bg-elevated: #141414; --color-bg-subtle: #1a1a1a; --color-toast-bg: #333333; --color-toast-fg: #ffffff; } /* ---------- Light + Orange ---------- */ [data-theme="light"] { color-scheme: light; --color-text: #262626; --color-text-muted: #737373; --color-heading: #0a0a0a; --color-border: #e5e5e5; --color-bg: #fafafa; --color-bg-elevated: #ffffff; --color-bg-subtle: #f5f5f5; --color-toast-bg: #262626; --color-toast-fg: #ffffff; --color-accent-light: rgba(249, 115, 22, 0.12); } /* * Office / wide breakpoint. * 60rem ≈ 960px — room for an 8.5in column plus a little chrome. * Content width stays 8.5in so on-screen forms match letter-size printing habits. */ @media screen and (min-width: 60rem) { :root { --content-max: 8.5in; --page-pad: 1.25rem; } }