/* ============================================================
Tuesday2 — :root design tokens + base (IN-RIGA paper / ink / one-orange).
Authored at M04 as the INITIAL CANVAS; the designer ("Claude Design") refines
it from M05 on (one copy, no mirror). Token names + rules are the binding
contract in design-bridge/contract/CONSTITUTION.md §5:
- NO raw #hex / rgb() / hsl() in COMPONENT rules — tint only via
color-mix(in oklab, var(--TOKEN) N%, var(--paper)). The literals here ARE
the token definitions (the one sanctioned place).
- ONE accent (--orange). Status/carrier colours come FROM DATA; the
pipeline/stage ramp is the fixed red->orange->yellow->green
(window.Compute.STAGE_COLORS), distinct from --orange.
- Light <-> dark via data-theme on (set pre-paint from
localStorage('tuesday-theme')). NO Tailwind, NO .dark class.
Fonts: Archivo (display/sans) + JetBrains Mono (.mono labels) are SELF-HOSTED
(M47) — the @font-face block below serves the vendored .ttf from /vendor/fonts/
(same-origin, NO CDN). The former Google-Fonts is removed from every host
.html; do not re-add it (offline-isolation is sacred).
============================================================ */
/* ── Fonts SELF-HOSTED (M47): Archivo (display/sans) + JetBrains Mono (.mono) load
from vendored .ttf under /vendor/fonts/ (same-origin — NO CDN). Ported from the
original Tuesday riga-tokens.css @font-face; url() is ROOT-RELATIVE because the
Hono static-serve mounts frontend/ at the web root (/vendor/fonts/ resolves).
STANDING RULE: never re-add a Google-Fonts ; add a new weight by vendoring
its .ttf into frontend/vendor/fonts/ AND adding the matching @font-face here. ── */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap; src:url('/vendor/fonts/Archivo-Regular.ttf') format('truetype'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap; src:url('/vendor/fonts/Archivo-Medium.ttf') format('truetype'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap; src:url('/vendor/fonts/Archivo-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('/vendor/fonts/Archivo-Bold.ttf') format('truetype'); }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap; src:url('/vendor/fonts/Archivo-Black.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/vendor/fonts/JetBrainsMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/vendor/fonts/JetBrainsMono-Medium.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('/vendor/fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('/vendor/fonts/JetBrainsMono-Bold.ttf') format('truetype'); }
:root {
/* Surfaces */
--paper: #f4efe6;
--paper-2: #ebe5d8;
--paper-3: #e1dac9;
/* Ink */
--ink: #0e0e0c;
--ink-soft: #1a1814;
/* The ONE accent */
--orange: #ff4612;
--orange-soft: #ff461215;
/* Lines / muted */
--line: #0e0e0c1f;
--line-strong: #0e0e0c;
--muted: #0e0e0c88;
--muted-2: #0e0e0c66;
/* Semantic state (CONSTITUTION §5) */
--good: #2a8a3e; /* confirmed / paid */
--warn: #d99100; /* awaiting */
--bad: #c4321a; /* destructive / error */
--info: #1a4cf2; /* in-flight */
/* Role tints */
--tone-blue: #1a4cf2;
--tone-navy: #1e3a5f;
/* Type */
--font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-pill: 999px;
/* Spacing scale --s-1..--s-11 (4 -> 36px) */
--s-1: 4px; --s-2: 6px; --s-3: 8px; --s-4: 10px; --s-5: 12px; --s-6: 14px;
--s-7: 16px; --s-8: 20px; --s-9: 24px; --s-10: 30px; --s-11: 36px;
/* Elevation (modals / debug only — this system otherwise avoids shadow) */
--shadow-dialog: 0 18px 50px -12px color-mix(in oklab, var(--ink) 30%, transparent);
--shadow-hard: 0 4px 0 var(--line-strong);
}
[data-theme="dark"] {
--paper: #14130f;
--paper-2: #1d1c17;
--paper-3: #26241e;
--ink: #f4efe6;
--ink-soft: #e6dfd0;
--orange: #ff5a2a;
--orange-soft: #ff5a2a1f;
--line: #f4efe61f;
--line-strong: #f4efe6;
--muted: #f4efe688;
--muted-2: #f4efe666;
--good: #5fc777;
--warn: #f0b13d;
--bad: #ee6a55;
--info: #6a8af7;
--tone-blue: #6a8af7;
--tone-navy: #9bb4d4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Semantic type classes (CONSTITUTION §5) — used by the chrome + screens. */
.mono, .t-monoid, .t-eyebrow, .t-label { font-family: var(--font-mono); }
.t-display { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; }
.t-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.t-section { font-family: var(--font-display); font-weight: 600; }
.t-card { font-family: var(--font-sans); font-weight: 600; }
.t-body { font-family: var(--font-sans); font-weight: 400; }
.t-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.t-label { font-size: 11px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
a { color: inherit; text-decoration: none; }
/* Global pill tag (restores the ORIGINAL Tuesday's globals.css .tag GLOBAL scope —
duplicated verbatim from settings.css so every page that loads styles.css, not just
Settings, gets it: the orders-list Track pill needs it and orders.html does not load
settings.css). Identical rule + specificity; settings.css loads after styles.css so
Settings' own .tag rendering is byte-unchanged. Tokens only. */
.tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; text-decoration: none; }
/* Brand mark = the ORIGINAL Tuesday logo ![]()
(M41). Vendored OFFLINE, same-origin at
/vendor/tuesday-logo.png; sized 36px to match the original's .tuesday-logo (globals.css) —
the one allowed non-Lucide brand mark is now the real logo, not the CSS bullseye. */
.tuesday-logo {
width: 36px;
height: 36px;
display: block;
flex-shrink: 0;
object-fit: contain;
}
/* SUPERSEDED (M41): the CSS bullseye brand mark is replaced by the .tuesday-logo ![]()
in
shell.jsx + login.html. This rule is now INERT — nothing renders .bullseye anymore (grep:
no other .bullseye selector in frontend/). Kept (not deleted) as a reversible fallback +
history record per M41 Q02=A. Do NOT re-wire a .bullseye as the brand. */
.bullseye {
width: 22px;
height: 22px;
border-radius: 50%;
flex: 0 0 auto;
background:
radial-gradient(circle at center,
var(--orange) 0 3px,
var(--paper) 3px 6px,
var(--orange) 6px 8px,
var(--paper) 8px 10px,
var(--orange) 10px 11px);
}
/* Custom scrollbars — minimal, ink-on-paper. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ink) 27%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
background: color-mix(in oklab, var(--ink) 20%, transparent);
border-radius: 4px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--ink) 40%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }