/* ================================================================= Make The Take — design tokens (canonical source of truth). Loaded on every page via site-header.js (which injects a to this file). /admin/styleguide reads from here too — edit a value once and the live preview, the JSON export, and every page that uses these vars all update. Naming convention (preferred going forward): --mtt-brand-* brand orange ramp --mtt-surface-* dark backgrounds (page → panel → raised) --mtt-text-* text shades (display → body → muted → dim) --mtt-border-* borders (soft → mid → strong → solid lines) --mtt-{status}-* success / danger / warning / info / accent --mtt-radius-* corner radii (sm → 3xl + pill) --mtt-font-* font stacks Back-compat aliases at the bottom map the older flatter --mtt-color-* / --mtt-status-* names (used by site-header.js and ~821 references in admin-styles.css) onto the canonical tokens so existing pages keep resolving. Prefer the canonical names in new code — the aliases will stay until adoption catches up. ================================================================= */ :root { /* Dark is the default; flips to light only when data-theme="light" is pinned (see the override block at the bottom of this file). */ color-scheme: dark; /* Brand */ --mtt-brand-500: #f97316; /* orange-500 — primary */ --mtt-brand-400: #fb923c; /* orange-400 — hover */ --mtt-brand-300: #fdba74; /* orange-300 — soft */ /* Surface (dark-first) */ --mtt-surface-base: #0a0a0a; /* page bg */ --mtt-surface-sub: #0e0e0e; /* sub-card on top of panel */ --mtt-surface-panel: #111111; /* section / panel */ --mtt-surface-raise: #1a1a1a; /* hover, highlight */ --mtt-surface-deep: #020617; /* slate-950 alt panel */ /* Border */ --mtt-border-soft: rgba(255, 255, 255, 0.06); --mtt-border-mid: rgba(255, 255, 255, 0.10); --mtt-border-strong: rgba(255, 255, 255, 0.18); --mtt-border-line: #1f1f1f; --mtt-border-card: #222222; /* Overlay tint — single source of truth for translucent hairlines / chip backgrounds / hover wash used across page chrome. Dark mode = white-on-dark (current behaviour); light mode flips this to black-on-light via the data-theme="light" block at the bottom of this file, so callers can write color-mix(in srgb, var(--mtt-overlay) 8%, transparent) and get a theme-aware tint with one source of change. */ --mtt-overlay: #ffffff; /* Text — brightness ramp from display (white) → faint (almost-bg). The slate-* shades sit between body and dim; "soft" sits between muted and dim and reads cooler (slight blue tint). Together they cover the most-repeated text colors in the app (587+ uses across landing pages alone). */ --mtt-text-display: #ffffff; --mtt-text-body: #e0e0e0; --mtt-text-bright: #e2e8f0; /* slate-100 — emphatic body on dark */ --mtt-text-secondary: #cbd5e1; /* slate-200 — secondary body / value text */ --mtt-text-muted: #94a3b8; /* slate-400 — meta + subtle labels */ --mtt-text-soft: #64748b; /* slate-500 — quiet meta lines */ --mtt-text-dim: #777777; --mtt-text-faint: #555555; /* Status — fills are translucent so panels stay flat */ --mtt-success-fill: rgba(34, 197, 94, 0.15); --mtt-success-text: #86efac; /* green-300 */ --mtt-success-edge: rgba(34, 197, 94, 0.35); --mtt-danger-fill: rgba(239, 68, 68, 0.15); --mtt-danger-text: #fca5a5; /* red-300 */ --mtt-danger-edge: rgba(239, 68, 68, 0.35); --mtt-warning-fill: rgba(234, 179, 8, 0.15); --mtt-warning-text: #fde68a; /* yellow-200 */ --mtt-warning-edge: rgba(234, 179, 8, 0.35); --mtt-info-fill: rgba(56, 189, 248, 0.15); --mtt-info-text: #7dd3fc; /* sky-300 */ --mtt-info-edge: rgba(56, 189, 248, 0.35); --mtt-purple-fill: rgba(168, 85, 247, 0.15); --mtt-purple-text: #d8b4fe; /* purple-300 */ --mtt-purple-edge: rgba(168, 85, 247, 0.35); --mtt-accent-fill: rgba(249, 115, 22, 0.18); --mtt-accent-text: #fdba74; --mtt-accent-edge: rgba(249, 115, 22, 0.35); /* Layout — shared page chrome dimensions. Every "regular" content page (and the sticky site header) reads these so the brand on the header aligns with the page main beneath it. Pages that need a different column width override --mtt-content-max on the body — the header auto-centers to whatever value is in scope. --mtt-content-max widest content column (px or %). --mtt-content-gutter side gutter floor used when the viewport is narrower than --mtt-content-max. */ --mtt-content-max: 1180px; --mtt-content-gutter: 18px; /* Typography — font stacks */ --mtt-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mtt-font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace; /* Typography — type scale. Mirrors the `fontSize` block in /admin/styleguide. --mtt-fs-* keeps a different prefix from --mtt-text-* (which is COLOR) so they don't collide. Roles: eyebrow uppercase pill / tiny label (≈11.2px) xs smallest meta / hint (≈11.5px) sm crumb, secondary (≈13.1px) base default body in chrome (≈14.1px) md body lede (≈15.2px) lg CTA label (16px) xl section h1 (24px) 2xl knob value, page h1 (32px) display landing hero (clamp 36-64px) */ --mtt-fs-eyebrow: 0.7rem; --mtt-fs-xs: 0.72rem; --mtt-fs-sm: 0.82rem; --mtt-fs-base: 0.88rem; --mtt-fs-md: 0.95rem; --mtt-fs-lg: 1rem; --mtt-fs-xl: 1.5rem; --mtt-fs-2xl: 2rem; --mtt-fs-display: clamp(2.25rem, 7vw, 4rem); /* Typography — weights. RULE: 600 (Inter SemiBold) is the heaviest weight we ship. Inter renders heavier than most sans-serifs at the same numeric weight, so anything above 600 reads chunky in our UI chrome. If a hero needs more presence, use size + tracking instead of adding weight back. No --mtt-fw-bold / --mtt-fw-extrabold / --mtt-fw-black tokens exist on purpose — the system can't be used to violate the rule. */ --mtt-fw-normal: 400; --mtt-fw-medium: 500; --mtt-fw-semibold: 600; /* Typography — letter-spacing (tracking). --mtt-tracking-mid (0.06em) bridges wide and wider — it's the dominant tracking value in the actual codebase (used 100+ times for eyebrow / pill / chip labels) so we honour it rather than fight it. */ --mtt-tracking-tight: -0.02em; --mtt-tracking-snug: -0.01em; --mtt-tracking-normal: 0; --mtt-tracking-wide: 0.04em; --mtt-tracking-mid: 0.06em; --mtt-tracking-wider: 0.08em; --mtt-tracking-widest: 0.1em; /* Typography — line heights. Three steps cover almost every in-app surface: tight (display headings), snug (UI chrome), normal (body copy and paragraphs). */ --mtt-leading-tight: 1.15; --mtt-leading-snug: 1.3; --mtt-leading-normal: 1.45; /* Radii — raw scale. `3xl` (18px) was removed once usage hit zero; keep this ramp tight so corners stay consistent across the app. */ --mtt-radius-sm: 6px; --mtt-radius-md: 8px; --mtt-radius-lg: 10px; --mtt-radius-xl: 10px; --mtt-radius-2xl: 14px; --mtt-radius-pill: 999px; /* Radii — semantic. Reach for these in new code; the raw scale stays available for one-off cases. Update the alias here to reshape every card / panel / control in one edit. */ --mtt-radius-card: var(--mtt-radius-xl); /* content cards (pack card, score card, detail card) */ --mtt-radius-panel: var(--mtt-radius-2xl); /* page-level panels & modals */ --mtt-radius-control: var(--mtt-radius-md); /* buttons, inputs, small surfaces */ /* --------------------------------------------------------------- Back-compat aliases. Map the older flatter naming used by site-header.js (--mtt-color-*) and the older status naming (--mtt-status-*-text) onto the canonical tokens above. Don't reference these in new code — go straight to the canonical name. Once usage drops to zero we can delete this block. --------------------------------------------------------------- */ --mtt-color-bg: var(--mtt-surface-base); --mtt-color-surface: var(--mtt-surface-panel); --mtt-color-surface-sub: var(--mtt-surface-sub); --mtt-color-surface-raised: var(--mtt-surface-raise); --mtt-color-text: var(--mtt-text-body); --mtt-color-text-strong: var(--mtt-text-display); --mtt-color-text-muted: var(--mtt-text-muted); --mtt-color-text-dim: var(--mtt-text-dim); --mtt-color-brand: var(--mtt-brand-500); --mtt-color-brand-hover: var(--mtt-brand-400); --mtt-color-brand-soft: var(--mtt-brand-300); --mtt-color-border: var(--mtt-border-card); --mtt-color-border-soft: var(--mtt-border-soft); --mtt-color-border-strong: var(--mtt-border-strong); --mtt-status-success-fill: var(--mtt-success-fill); --mtt-status-success-text: var(--mtt-success-text); --mtt-status-danger-fill: var(--mtt-danger-fill); --mtt-status-danger-text: var(--mtt-danger-text); --mtt-status-warning-fill: var(--mtt-warning-fill); --mtt-status-warning-text: var(--mtt-warning-text); --mtt-status-info-fill: var(--mtt-info-fill); --mtt-status-info-text: var(--mtt-info-text); } /* --------------------------------------------------------------- Light mode. Dark is the universal default (the :root block above). Light mode applies ONLY when the visitor explicitly turns it on via the header toggle, which pins data-theme="light" on (persisted to localStorage by site-header.js). OS preference is intentionally NOT consulted — unset = dark. Anything that should flip must consume tokens (--mtt-surface-*, --mtt-text-*, --mtt-border-*) or the --mtt-overlay color-mix pattern rather than hardcoding white/black. --------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --mtt-surface-base: #ffffff; --mtt-surface-sub: #fafafa; --mtt-surface-panel: #f5f5f5; --mtt-surface-raise: #ececec; --mtt-surface-deep: #e2e8f0; --mtt-border-soft: rgba(0, 0, 0, 0.06); --mtt-border-mid: rgba(0, 0, 0, 0.10); --mtt-border-strong: rgba(0, 0, 0, 0.18); --mtt-border-line: #e5e5e5; --mtt-border-card: #d4d4d4; --mtt-text-display: #0a0a0a; --mtt-text-body: #1f1f1f; --mtt-text-bright: #1e293b; --mtt-text-secondary: #334155; --mtt-text-muted: #64748b; --mtt-text-soft: #94a3b8; --mtt-text-dim: #94a3b8; --mtt-text-faint: #cbd5e1; --mtt-success-text: #16a34a; --mtt-danger-text: #dc2626; --mtt-warning-text: #b45309; --mtt-info-text: #0284c7; --mtt-purple-text: #9333ea; --mtt-accent-text: #c2410c; --mtt-overlay: #000000; } /* Global typography enforcement. Lives next to the tokens because it IS the token system applied — body text inherits Inter, code blocks get Fragment Mono. `!important` keeps per-page styles from accidentally overriding back to platform defaults. */ body, button, input, select, textarea { font-family: var(--mtt-font-sans) !important; } code, pre, kbd, samp, .mono, [data-mono] { font-family: var(--mtt-font-mono) !important; }