/* Design tokens. Every component reads these; nothing hard-codes a colour, size or radius, because merchant branding repaints the site at runtime by overwriting a handful of them (--brand-500, --accent-500, --radius-md, --font-sans, and data-theme on ). */ :root{ /* Blue is the whole identity, so it is a friendly, slightly cool blue rather than a saturated primary — it has to sit under long body text without shouting. */ /* --brand-500 is the *ink* blue: it sits on dark surfaces as text and borders, where a lighter tone reads better. --brand-600 is the *solid* blue, used wherever white text sits on top of it — white on #4A86FF is 3.42:1 and fails, white on #2F6BE0 is 4.88:1 and passes. One token cannot do both jobs. */ --brand-900:#0A1020; --brand-700:#1E4FD8; --brand-600:#2F6BE0; --brand-500:#4A86FF; --brand-300:#93B8FF; --brand-100:#E9F0FF; /* Violet, not orange. It reads as "the AI part" beside the blue instead of competing with it, and it is what the reference uses for the same job. */ --accent-600:#7C4DEF; --accent-500:#8B5CF6; --accent-300:#B79BFA; --accent-100:#F1EBFE; --line-green:#06C755; --line-green-dark:#05A847; --ok:#12B76A; --warn:#F79009; --err:#F04438; --info:#3B9EFF; --ink-900:#0B1220; --ink-700:#3E4A61; --ink-500:#6B7889; --ink-300:#D4DBE6; --ink-100:#F2F5FA; --paper:#FFFFFF; --canvas:#F7F9FC; --surface:#FFFFFF; --surface-2:#F7F9FC; --hairline:rgba(11,18,32,.09); --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* A wider type scale. The jump from body to display is what reads as confident; a timid 2.25rem "large" heading is most of what makes a page feel dated. */ --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1.0625rem; --text-lg:1.1875rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:4rem; --text-6xl:5.25rem; /* --space-5 and --space-7 were used in the nav, the hero and the FAQ but never defined, so `gap: var(--space-5)` resolved to nothing and the whole nav ran together as one word. A missing custom property fails silently, which is exactly why the scale has no gaps in it now. */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem; /* Softer corners throughout. The reference rounds cards at ~18px and inner rows at ~12px, which is what stops a dark card grid reading as a spreadsheet. */ --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-pill:999px; --shadow-sm:0 1px 2px rgba(11,18,32,.05); --shadow-md:0 8px 28px -8px rgba(11,18,32,.12); --shadow-lg:0 28px 70px -20px rgba(11,18,32,.20); --container:1200px; --nav-h:76px; } /* Dark theme. Only the surfaces and the ink ramp flip — brand, accent and status colours keep their meaning in both themes, so a component never needs a dark-specific rule. */ /* Dark is the primary look. The page is a deep, slightly blue near-black; cards sit one step above it and are separated by a hairline rather than a shadow, which is what keeps a dark UI from turning murky. */ [data-theme="dark"]{ --paper:#0C1424; --canvas:#04070E; --surface:#0C1424; --surface-2:#111C31; --hairline:rgba(255,255,255,.09); --ink-900:#F2F6FC; --ink-700:#AEBBD0; --ink-500:#7F8EA8; --ink-300:#27344C; --ink-100:#131F36; --brand-100:#132445; --accent-100:#1E1740; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 28px rgba(0,0,0,.5); --shadow-lg:0 28px 70px rgba(0,0,0,.6); } /* A visitor who has not chosen a theme gets the one their OS asks for. An explicit choice writes data-theme, which wins because it is a more specific selector. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0E1729; --canvas:#080D18; --surface:#0E1729; --surface-2:#131E33; --hairline:rgba(255,255,255,.08); --ink-900:#EAF0FA; --ink-700:#A7B4C9; --ink-500:#7B8AA3; --ink-300:#2A3750; --ink-100:#16223A; --brand-100:#132445; --accent-100:#1E1740; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 8px 28px rgba(0,0,0,.5); --shadow-lg:0 28px 70px rgba(0,0,0,.6); } } /* Corner-radius presets chosen in /start/ step 1. The merchant picks a stop; every component that uses --radius-md follows. */ [data-radius="none"]{ --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0; } [data-radius="sm"] { --radius-sm:3px; --radius-md:5px; --radius-lg:8px; --radius-xl:12px; } [data-radius="md"] { --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; } [data-radius="lg"] { --radius-sm:10px;--radius-md:18px; --radius-lg:28px; --radius-xl:40px; } [data-font="serif"] { --font-sans:"Noto Serif JP",Georgia,"Times New Roman",serif; } [data-font="rounded"]{ --font-sans:"Zen Maru Gothic",ui-rounded,"Hiragino Maru Gothic ProN",system-ui,sans-serif; }