/* ================================================================= 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; /* Hues — base colours for translucent tints, status dots and bars. Pages mix them rather than hardcoding rgba(): color-mix(in srgb, var(--mtt-green) 15%, transparent) Light mode deepens each hue so tints/edges still read on white. */ --mtt-red: #ef4444; --mtt-green: #22c55e; --mtt-sky: #38bdf8; --mtt-blue: #3b82f6; --mtt-amber: #f59e0b; --mtt-yellow: #facc15; --mtt-purple: #a855f7; --mtt-slate: #94a3b8; /* Text on strong fills — the same in both themes, because the fill doesn't flip: dark text on the orange brand fill, white text on red/green/blue status fills. */ --mtt-on-brand: #0a0a0a; --mtt-on-fill: #ffffff; /* Shade — "recessed" fills (black-alpha in dark). Light mode swaps to a pale slate so the same mix % reads as a soft grey, not mud. */ --mtt-shade: #000000; /* 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: #fbbf24; /* amber-400 */ --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: color-mix(in srgb, var(--mtt-brand-500) 18%, transparent); --mtt-accent-text: var(--mtt-brand-300); --mtt-accent-edge: color-mix(in srgb, var(--mtt-brand-500) 35%, transparent); /* 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 (≈10.6px) xs smallest meta / hint (≈11.8px) sm crumb, secondary (≈13.1px) base default body in chrome (≈14.1px) md body lede (≈15.2px) lg CTA label (16px) title card / section title (20px) xl section h1 (24px) 2xl knob value, page h1 (32px) display landing hero (clamp 36-64px) */ --mtt-fs-eyebrow: 0.66rem; --mtt-fs-xs: 0.74rem; --mtt-fs-sm: 0.82rem; --mtt-fs-base: 0.88rem; --mtt-fs-md: 0.95rem; --mtt-fs-lg: 1rem; --mtt-fs-title: 1.25rem; --mtt-fs-xl: 1.5rem; --mtt-fs-2xl: 2rem; --mtt-fs-display: clamp(2.25rem, 7vw, 4rem); /* Typography — weights. RULE: 500 (Inter Medium) is the heaviest weight we ship. Inter renders heavier than most sans-serifs at the same numeric weight, so anything above 500 reads chunky in our UI chrome. If a hero needs more presence, use size + tracking instead of adding weight back. --mtt-fw-semibold is kept as an alias of medium for back-compat; no bold tokens exist on purpose. */ --mtt-fw-normal: 400; --mtt-fw-medium: 500; --mtt-fw-semibold: 500; /* 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. Deliberately tight: corners read crisp, not soft. Chips/tags/toggles use `control`, not `pill` — public pages no longer use pill shapes (`pill` stays for the admin surface). Use `round` (50%) only for true circles: avatars, dots, indicators. */ --mtt-radius-sm: 2px; --mtt-radius-md: 3px; --mtt-radius-lg: 4px; --mtt-radius-xl: 4px; --mtt-radius-2xl: 6px; --mtt-radius-pill: 999px; --mtt-radius-round: 50%; /* 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, chips, small surfaces */ /* Elevation — modals/popovers only. Everything else is flat: depth comes from surface steps + borders, not shadows. */ --mtt-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.45); /* --------------------------------------------------------------- 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: #f1f5f9; /* On white, depth comes from borders — a notch stronger than the dark ramp's white-alpha equivalents. */ --mtt-border-soft: rgba(0, 0, 0, 0.08); --mtt-border-mid: rgba(0, 0, 0, 0.12); --mtt-border-strong: rgba(0, 0, 0, 0.22); --mtt-border-line: #e5e5e5; --mtt-border-card: #d4d4d4; --mtt-text-display: #0a0a0a; --mtt-text-body: #1f1f1f; --mtt-text-bright: #1e293b; --mtt-text-secondary: #334155; /* Every step stays readable on white and the light surfaces (≥ 4.5:1 for small text); faint is for disabled / placeholder only. */ --mtt-text-muted: #475569; --mtt-text-soft: #475569; --mtt-text-dim: #5f5f5f; --mtt-text-faint: #a3a3a3; /* Brand: light mode is BLUE (dark stays orange). 500 is the fill and also used as text (links, active nav), so it's blue-600: white on it and it on white both clear 4.5:1 (blue-500 was 3.7:1). The lighter steps are text-only and darken further. */ --mtt-brand-500: #2563eb; --mtt-brand-400: #1d4ed8; --mtt-brand-300: #1e40af; /* Text on a brand fill: near-black suits dark mode's orange, but on this blue it's unreadable — white instead. */ --mtt-on-brand: #ffffff; --mtt-success-text: #16a34a; --mtt-danger-text: #dc2626; --mtt-warning-text: #b45309; --mtt-info-text: #0284c7; --mtt-purple-text: #9333ea; --mtt-accent-text: var(--mtt-brand-300); --mtt-red: #dc2626; --mtt-green: #16a34a; --mtt-sky: #0284c7; --mtt-blue: #2563eb; --mtt-amber: #d97706; --mtt-yellow: #ca8a04; --mtt-purple: #9333ea; --mtt-slate: #64748b; --mtt-shade: #cbd5e1; /* Status fills/edges: same hues, tuned for white. */ --mtt-success-fill: rgba(34, 197, 94, 0.12); --mtt-success-edge: rgba(22, 163, 74, 0.35); --mtt-danger-fill: rgba(239, 68, 68, 0.10); --mtt-danger-edge: rgba(220, 38, 38, 0.35); --mtt-warning-fill: rgba(234, 179, 8, 0.14); --mtt-warning-edge: rgba(180, 83, 9, 0.35); --mtt-info-fill: rgba(56, 189, 248, 0.12); --mtt-info-edge: rgba(2, 132, 199, 0.30); --mtt-purple-fill: rgba(168, 85, 247, 0.10); --mtt-purple-edge: rgba(147, 51, 234, 0.30); --mtt-accent-fill: color-mix(in srgb, var(--mtt-brand-500) 12%, transparent); --mtt-accent-edge: rgba(194, 65, 12, 0.35); --mtt-shadow-modal: 0 12px 40px rgba(15, 23, 42, 0.18); --mtt-overlay: #000000; } /* --------------------------------------------------------------- Accent: blue (alternate to the default orange). Pinned via data-accent="blue" on (set at boot from localStorage["mtt-accent"]). Everything brand-coloured reads the --mtt-brand-* ramp, so swapping the ramp recolours the whole site. --------------------------------------------------------------- */ :root[data-accent="blue"] { --mtt-brand-500: #3b82f6; /* blue-500 — primary */ --mtt-brand-400: #60a5fa; /* blue-400 — hover */ --mtt-brand-300: #93c5fd; /* blue-300 — soft */ --mtt-on-brand: #ffffff; /* white text on the blue fill */ } :root[data-theme="light"][data-accent="blue"] { --mtt-brand-500: #2563eb; --mtt-brand-400: #1d4ed8; --mtt-brand-300: #1e40af; } /* 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; } /* Weight cap for elements whose browser default is bold. Two-element selectors beat Tailwind preflight's `b, strong { bolder }` but lose to any page class rule. */ html h1, html h2, html h3, html h4, html h5, html h6, html b, html strong, html th, html optgroup { font-weight: var(--mtt-fw-medium); } code, pre, kbd, samp, .mono, [data-mono] { font-family: var(--mtt-font-mono) !important; }