/* ============================================================ Shared design tokens — Hub, Budget, Display ============================================================ One file, loaded first on every page, holding the decisions all three apps have to agree on: the type scale, the radius scale, the shadow scale, the spacing scale, and the semantic names for surface, ink, line and accent. Why this exists. The three apps were measurably three products. On the same household, the same theme, the same session: page title Hub 17.3px Quicksand Budget 26.4px Luckiest Guy Display 30.4px Quicksand card radius Hub 18px Budget 18px Display 28px card shadow Hub 0 6px 18px/.055 Budget none Display 0 6px 18px -10px/.24 base palette Hub and Budget share --bg/--card/--border; the Display defines none of them and carries its own cream/paper/ink set instead. None of that was a decision anyone made three times. It is what happens when each surface grows its own values. A shared scale means a difference between the apps is now something someone chose and can point at - the Display's larger title is a step on this scale, because it is read from across a room, not a different scale. How to use it. Style against the semantic names (--surface, --ink, --line, --accent, --card-radius, --card-shadow), not the raw scale, so a theme that redefines the semantics moves everything with it. Themes and the per-page layers still override anything here; this is the floor, not a ceiling. ============================================================ */ :root { /* ---- type ---------------------------------------------------- A 1.2 ratio, in rem so the household text-size setting (--text-scale on ) carries the whole ramp with it. */ --step--2: 0.694rem; --step--1: 0.833rem; --step-0: 1rem; --step-1: 1.2rem; --step-2: 1.44rem; --step-3: 1.728rem; --step-4: 2.074rem; --step-5: 2.488rem; /* Semantic roles. The Display overrides the first two upward - a kiosk is read from four feet away, not eighteen inches. */ --type-page-title: var(--step-2); --type-card-title: var(--step-1); --type-body: var(--step-0); --type-meta: var(--step--1); --type-label: var(--step--2); --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; --weight-heavy: 800; /* ---- space --------------------------------------------------- A 4px grid. Everything that sets a gap, a padding or a stack rhythm should land on one of these. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* ---- radius -------------------------------------------------- Radius tracks the size of the thing it is on: a chip is not a small card. */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ---- elevation ----------------------------------------------- Four levels, and only four. Level 2 is the one card shadow; it is what "this is a surface" looks like. Level 3 is for things that sit above the page (a panel, a dialog, a lightbox). Level 0 is not an absence - it is the deliberate flat state that a secondary surface takes, paired with a hairline. The tint is a variable rather than a fixed grey: a shadow on the Hub's pink ground and one on the Display's cream ground want the same geometry and different warmth, and that is the only thing that should differ between them. */ --shadow-tint: 63, 50, 54; --shadow-0: none; --shadow-1: 0 1px 2px rgba(var(--shadow-tint), 0.05); --shadow-2: 0 6px 18px rgba(var(--shadow-tint), 0.07); --shadow-3: 0 18px 44px -14px rgba(var(--shadow-tint), 0.24); /* Between 2 and 3: the one surface on a screen that is allowed to sit above the others. Only the primary surface uses it. */ --shadow-raise: 0 10px 26px rgba(var(--shadow-tint), 0.10); /* ---- semantic surfaces --------------------------------------- Defined in terms of the app palettes that already exist, so a theme that redefines --bg/--card/--border still drives all three apps. The literals are fallbacks for the Display, which does not load styles.css. */ --surface-page: var(--bg, #fdf6f0); --surface: var(--card, #fffdfb); --surface-sunken: color-mix(in srgb, var(--card, #fffdfb) 82%, var(--border, #f0dfd3)); --line: var(--border, #f0dfd3); --line-strong: color-mix(in srgb, var(--border, #f0dfd3) 55%, var(--text-muted, #6d605a)); --ink: var(--text, #3f3236); --ink-muted: var(--text-muted, #6d605a); --ink-secondary: var(--text-secondary, #6b5a5e); --accent: var(--teal, #2dd4bf); --accent-ink: var(--teal-ink, #176e63); --accent-soft: var(--teal-soft, #e3f6f5); /* ---- the card contract --------------------------------------- What every card in every app resolves to unless it has a reason not to. VIS-02 leans on these: a primary surface takes --card-shadow, everything secondary takes --shadow-0 and the hairline instead. */ --card-radius: var(--radius-lg); --card-shadow: var(--shadow-2); --card-shadow-primary: var(--shadow-raise); --card-padding: var(--space-4); --card-gap: var(--space-3); } /* The kiosk is read from across a room. Same scale, two steps up - which is the point: the difference is now a decision on a shared ramp rather than an unrelated number. */ body.display-shell { /* Warmer shadow tint to sit on the kiosk's cream ground - same geometry as everywhere else. */ --shadow-tint: 90, 58, 20; --type-page-title: var(--step-4); --type-card-title: var(--step-2); --type-body: var(--step-1); --type-meta: var(--step-0); --card-radius: var(--radius-xl); } /* ------------------------------------------------------------------ DEF-02: the "Skip for now" control that makeDismissible() (branding.js) injects into every modal wizard. Styled here rather than in a per-app layer because the helper is shared, and a dismissal that looks like a different control in each app is a dismissal people stop trusting. Deliberately quiet: it is the way out, not a competing call to action. ------------------------------------------------------------------ */ .overlay-skip-btn { position: absolute; top: 12px; right: 14px; z-index: 5; padding: 6px 12px; border: 1px solid var(--line, rgba(0, 0, 0, 0.14)); border-radius: 999px; background: transparent; color: var(--muted, #6b6360); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .overlay-skip-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--ink, #2c2320); } .overlay-skip-btn:focus-visible { outline: 2px solid var(--brand-color-ink, currentColor); outline-offset: 2px; } /* The dialogs are the positioning context for it. */ .budget-dialog, .display-dialog { position: relative; } /* The button is prepended as the dialog's first child, so anything that follows it needs to clear the space it occupies - otherwise it sits on top of the step-progress bar. A sibling selector means this only applies where the button was actually injected. */ .overlay-skip-btn ~ [class*="wizard-progress"] { margin-top: 30px; }