/*
* memore design tokens — THE single source of truth for COLOUR (and the core
* scale). ONE file, used by everything:
* - the Svelte app → frontend/src/styles/base.css @imports this file
* - every static page (landing, faq, waitlist, …) →
* Served by the backend at /assets/tokens.css. Never define colours anywhere
* else — change them here and the whole product (app + marketing) updates.
*
* PALETTE — the bold "Signal" set, taken a touch DEEPER / less neon so the
* full-bleed cards don't glare:
* Signal Black #282828 · Creamy Milk #F8F3EC · Watermelon #D9594E ·
* Light Malachite #2A9D5B · Azure Cornflower #1C77D4 · Lemon #EACA4D ·
* Amethyst #6F5AD9 (+ derived deeper orange/teal/pink to fill the 8 routes).
*
* Naming: the app uses --route-X / -soft / -ink. Static pages historically use
* the SHORT names (--blue, --red, …) — those are kept as aliases at the bottom
* so one file serves both without anyone rewriting call-sites.
*/
:root {
/* Ink scale — neutral near-black → light (Signal Black family). */
--ink: #282828;
--ink-2: #565656;
--ink-3: #8a8a8a;
--ink-4: #bdbdbd;
/* Rules (borders / separators) — neutral light grey. */
--rule: #e5e5e5;
--rule-2: #f0f0f0;
/* Surfaces — the page is ALWAYS white; cards carry the colour. */
--paper: #ffffff;
--paper-2: #f4f4f4; /* neutral quiet fill for inputs / skeletons (NOT warm) */
--cream: #f8f3ec; /* Creamy Milk — reserved brand tint, used sparingly */
--canvas: #ffffff;
--soft-blue: color-mix(in srgb, var(--route-blue) 10%, white); /* focus halo */
--soft-amber: color-mix(in srgb, var(--route-yellow) 22%, white);
--soft-green: color-mix(in srgb, var(--route-green) 14%, white);
/* Brand / semantic. Primary action = ink-black (the reference look). Semantic
text colours are DEEP shades so error/success text stays legible on white. */
--accent: #282828; /* primary action = ink */
--accent-press: #000000;
--accent-2: #565656;
--warn: #b7791f; /* deep amber — warning text/dot */
--danger: #e23b30; /* deep watermelon — error text/buttons */
--ai: #6f5ad9; /* Amethyst (deepened) — AI provenance ONLY */
--ok: #1e9e4a; /* deep malachite — success text */
--ok-ink: #15803d; /* success text on a soft surface */
/* The EIGHT route hues. Each hue has ONE source value; its -soft tint is
COMPUTED from that hue (a % of the colour mixed into white) so the soft
backgrounds (calendar rows, highlights) are always a true tint of the brand
colour and can never drift off-hue. -ink is a deep shade tuned for legible
TEXT on white. Yellow uses a higher mix % because it's already light. */
--route-blue: #1c77d4; --route-blue-soft: color-mix(in srgb, var(--route-blue) 22%, white); --route-blue-ink: #0b5fa5; /* Azure Cornflower */
--route-red: #d9594e; --route-red-soft: color-mix(in srgb, var(--route-red) 22%, white); --route-red-ink: #b23b31; /* Watermelon */
--route-green: #2a9d5b; --route-green-soft: color-mix(in srgb, var(--route-green) 22%, white); --route-green-ink: #167a3f; /* Light Malachite */
--route-yellow: #eaca4d; --route-yellow-soft: color-mix(in srgb, var(--route-yellow) 34%, white); --route-yellow-ink: #8a6d00; /* Lemon */
--route-purple: #6f5ad9; --route-purple-soft: color-mix(in srgb, var(--route-purple) 22%, white); --route-purple-ink: #4b33c7; /* Amethyst */
--route-orange: #d56f1e; --route-orange-soft: color-mix(in srgb, var(--route-orange) 22%, white); --route-orange-ink: #b45309; /* orange (deep enough for white card text) */
--route-teal: #169c8e; --route-teal-soft: color-mix(in srgb, var(--route-teal) 22%, white); --route-teal-ink: #0f766e; /* teal */
--route-pink: #d65a92; --route-pink-soft: color-mix(in srgb, var(--route-pink) 22%, white); --route-pink-ink: #be2d7e; /* pink */
/* Typography — Helvetica everywhere (mono dropped; token kept pointing at sans). */
--font-sans: "Helvetica Neue", Helvetica, "Arimo", Arial, system-ui, sans-serif;
--font-mono: "Helvetica Neue", Helvetica, "Arimo", Arial, system-ui, sans-serif;
--font: "Helvetica Neue", Helvetica, "Arimo", Arial, system-ui, sans-serif; /* alias for static pages */
/* Spacing scale (8px base) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
/* Type scale — fluid where it matters. */
--text-display: clamp(2.75rem, 10vw, 4.75rem);
--text-h1: clamp(2rem, 6.5vw, 3rem);
--text-h2: 1.5rem;
--text-h3: 1.0625rem;
--text-body: 0.9375rem;
--text-meta: 0.6875rem;
/* Borders / radius — rounding via tokens only (guard-enforced in the app). */
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 22px; /* big marketing/feature cards — rounder than app surfaces */
--radius-pill: 999px;
--border: 2px solid var(--ink);
--border-1: 1.5px solid var(--ink);
--hair: 1.5px solid var(--rule-2);
/* Soft, subtle lift (the references are flat — shadows stay gentle). */
--shadow-bold: 0 8px 28px rgba(0, 0, 0, 0.13);
--shadow-bold-sm: 0 4px 14px rgba(0, 0, 0, 0.10);
/* Overlays — ONE scrim colour + ONE stacking order shared by every sheet /
modal / dialog (the canonical /