/* ============================================================ MASAGI Digital — design tokens (single source of truth) SOURCE OF THE CONTRACT The structure (type ramp, spacing, radius, motion, band alternation) is transcribed from Dentsu Data Artist Mongol (ddam.ai) in SKILL (1).md. The COLOUR was retargeted on 2026-08-17 to the MASAGI visual design brief: violet #8B5CF6 on a near-black #0A0E1A canvas. The alternating band is derived from that canvas by the same +5/+5/+5 step the previous pair used, so the rhythm is unchanged and no band colour is invented. ONE THEME. This file is dark-only. There is no light scheme, no [data-theme] selector, no prefers-color-scheme branch and no theme toggle: the page background is --surface-raised (#0A0E1A) and the alternating band is --surface-muted (#0f131f). THE ACCENT IS A FILL, NOT AN INK. #8B5CF6 measures 4.55:1 as text on #0A0E1A, so unlike the violet it replaces it is technically legible as ink — but the brief assigns it to glow, lines, borders, charts and highlights, and mixing it into body copy would undo that. Keep it a fill. WHITE ON #8B5CF6 IS 4.23:1 — IT FAILS AA FOR SMALL TEXT. The old #9333ea carried white at 5.38:1; the brief's lighter violet does not. Buttons run 16px/400 labels, which need 4.5:1. So filled controls use --accent-strong (#7C3AED, 5.70:1 under white) — the violet-600 sibling on the same ramp as the brief's violet-500, not a new hue. Everything the brief actually names the accent for — glows, 1px borders, chart strokes, eyebrow rules, focus rings — uses --accent itself. NO HAIRLINES. --border and --border-soft are transparent on purpose: the owner asked for every border line to be deleted. Separation is carried by the 120px section rhythm and the #0f131f / #0A0E1A band alternation. The two exceptions are the 2px white button outline (set in ddam.css) and --field-border, which WCAG 1.4.11 requires at >=3:1 for form controls — rgba(255,255,255,.35) measures 3.35:1 on the page background and 3.25:1 on the muted band. RADIUS NAMING. The contract lists "--r-xs 5px · --r-sm 50px", but the existing sheets already use --r-sm for a small surface radius. To keep them resolving, the 50px pill value lives in --pill (its established name) and --r-sm/--r-md/--r-lg all collapse to the 5px surface radius. No third radius exists; icon chips use 50%. ============================================================ */ :root { color-scheme: dark; /* ---------- palette (measured) ---------- */ --text: #ffffff; /* 19.25:1 on the page background */ --text-2: #eeeeee; /* 16.60:1 */ --text-3: #999999; /* 6.76:1 */ --text-inverse: #c8c8c8; /* 11.51:1 */ --surface-base: #000000; /* deepest band: nav fills, table foot */ --surface-muted: #0f131f; /* alternating section band, cards */ --surface-raised: #0A0E1A; /* PAGE BACKGROUND (brief) */ --accent: #8B5CF6; /* glow, lines, borders, charts, rules */ --accent-strong: #7C3AED; /* fills that carry small white text */ /* The contract mandates an `error` state on every component but names no colour for one, and the accent cannot carry it (error and primary would be the same swatch). This is the single documented addition to the measured palette. 4.71:1 on the page background, so it is safe as text. It is the ONLY red in the system — do not introduce a second. */ --danger: #ef4444; /* ---------- typeface ---------- */ --font-sans: 'Poppins', sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 16px; /* body */ --fs-xl: 35px; /* sub-head */ --fs-2xl: 65px; /* h1 desktop */ --fs-section: 80px; /* section head */ --lh-body: 24px; --lh-display-m: 56px; /* h1 line-height below 768px */ --ls-display: 4px; /* h1 desktop + section head */ --ls-display-m: 1px; /* h1 mobile */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- spacing ---------- */ --sp-3: 3px; --sp-5: 5px; --sp-7: 7px; --sp-10: 10px; --sp-15: 15px; --sp-24: 24px; --sp-25: 25px; --sp-30: 30px; --sp-section: 120px; /* section padding, top AND bottom, all viewports */ /* ---------- radius ---------- */ --r-xs: 5px; --pill: 50px; /* ---------- shadow ---------- */ --shadow: rgba(0, 0, 0, .2) 0 3px 1px -2px, rgba(0, 0, 0, .14) 0 2px 2px 0, rgba(0, 0, 0, .12) 0 1px 5px 0; /* ---------- motion ---------- */ --m-instant: 280ms; --m-fast: 400ms; --m-normal: 500ms; /* ============================================================ LEGACY ALIASES styles.css, pricing.html and the blog templates still reference these names. They are mapped onto the tokens above so every existing declaration keeps resolving; nothing here introduces a new value. ============================================================ */ --bg: var(--surface-raised); --bg-2: var(--surface-muted); --surface: var(--surface-muted); --surface-2: var(--surface-base); --surface-3: var(--surface-muted); --surface2: var(--surface-base); /* un-hyphenated spelling in styles.css */ --surface3: var(--surface-muted); --card-bg: var(--surface-muted); --card: var(--surface-muted); --navy: var(--surface-muted); /* footer fill on the old sheets */ --border: transparent; /* every hairline is deleted */ --border-soft: transparent; --field-border: rgba(255, 255, 255, .35); /* 3.34:1 — WCAG 1.4.11 */ --accent-ink: #ffffff; /* 5.70:1 on --accent-strong */ --accent-2: var(--accent); --accent-soft: rgba(139, 92, 246, .16); --accent-line: rgba(139, 92, 246, .45); /* the mark's old greens are gone; anything still asking for them gets the single accent so gradients and chips keep rendering in palette */ --green-1: var(--accent); --green-2: var(--accent); --green-3: var(--accent); --nav-bg: rgba(10, 14, 26, .92); --glass: rgba(255, 255, 255, .04); --glass-line: transparent; --card-sh: var(--shadow); --r-sm: var(--r-xs); --r-md: var(--r-xs); --r-lg: var(--r-xs); }