/*
Y10 BRAND — canonical design tokens
---------------------------------------------------------------
The single source of truth for color, type, radius, and motion
across every Y10 project: y10tax.com, y10taxtech.com,
taxtechsimplified.com, practicereturns.com, IRC Reader,
yehudatenenbaum.com, and class slides.
Variable names match what the live sites already use (--blue,
--ink, --surface, ...), so this file can be dropped into any
project and shared verbatim. Build with the variables below;
never hardcode a hex in a project. Change a value here and it
propagates everywhere the token is used.
*/
:root {
/* ── Signature accent ── */
--blue: #3B5BFF; /* electric blue, the Y10 signature */
--blue-d: #2c46df; /* darker, for hover and eyebrows on light */
--blue-l: #7d92ff; /* lighter, for blue text/accents on dark */
/* ── Ink (dark base) ── */
--ink: #0B0E14; /* near-black base, hero and dark sections */
--ink2: #141a26; /* lifted dark surface */
--ink3: #1d2533; /* dark card / hairline on dark */
/* ── Light surfaces ── */
--surface: #f8fafc; /* cool off-white, section base */
--surface2: #eef1f6; /* deeper tint, alternating sections */
--surface3: #e7ebf1;
--card: #ffffff; /* pure white, cards lift off the section */
/* ── Text on light ── */
--text: #0B0E14;
--muted: #5b6472; /* cool slate, secondary text */
--muted2: #5f6878;
/* ── Status, for internal working documents ── */
/* Added for the firm's own PDFs (organizer summary, job record), where a reader
has to tell "we have it" from "we do not" at a glance. Deliberately only two:
anything de-emphasised, a duplicate for example, uses --muted, which already
reads as secondary. Both clear WCAG AA on white (5.19 and 5.00), because these
are set small and printed. Not for marketing surfaces. */
--status-ok: #0E7C5A; /* received, done, confirmed */
--status-attention: #A85C00; /* not received, or answered but needs a look */
/* ── Text on dark ── */
--on-dark: #ffffff;
--on-dark-soft: #a3adbf;
--on-dark-dim: #7d8798;
/* ── Lines ── */
--border: #e4e7ec;
--border2: #d7dbe2;
/* ── Light and dark schemes ── */
/* For sites with a light/dark toggle (see brand-guidelines.md, "Light and dark").
Light is light throughout: a faintly blue page with two soft blue glows behind it.
Dark uses the ink tokens above with the same glows, a little stronger. */
--surface-tint: #f5f7fc; /* light page base, off-white with a blue cast */
--surface-tint2: #eceff7; /* light footer and deeper bands */
--bg-glow: rgba(59,91,255,.16); /* light: radial glows behind the page */
--bg-glow-dark: rgba(59,91,255,.26); /* dark: the same glows */
--header-light: rgba(255,255,255,.82); /* translucent header over the page */
--header-dark: rgba(11,14,20,.75);
/* ── Data visualization ── */
/* Categorical fills for maps and charts that need more than the one accent (a map
where neighbouring states must differ, a chart legend). Five soft hues at one
lightness (oklch 87%), so ink labels read on every one; the dark set (oklch 44%)
takes white labels. Keep solid --blue for hover or the highlighted item. Use them
only for data, never for chrome, buttons or text. */
--viz-1: #bcd4ff; /* blue */
--viz-2: #9fe5d1; /* teal */
--viz-3: #ebd19c; /* sand */
--viz-4: #dfc8fd; /* violet */
--viz-5: #ffc2bc; /* coral */
--viz-1-dark: #3d517f;
--viz-2-dark: #096150;
--viz-3-dark: #674e14;
--viz-4-dark: #5d4676;
--viz-5-dark: #79403c;
/* ── Type ── */
--font-head: 'Space Grotesk', system-ui, sans-serif; /* headings, brand, numbers */
--font-body: 'Inter', system-ui, sans-serif; /* body copy, UI */
--tracking-tight: -0.01em; /* headings */
--tracking-eyebrow: 0.16em; /* uppercase eyebrows */
/* ── Radius ── */
--r: 12px; /* default */
--r-sm: 8px;
--r-lg: 16px;
/* ── Motion ── */
--ease: cubic-bezier(.2,.7,.2,1);
--glow: 0 0 6px rgba(59,91,255,.55), 0 0 15px rgba(59,91,255,.42), 0 0 28px rgba(59,91,255,.24);
--glow-strong: 0 0 9px rgba(59,91,255,.8), 0 0 22px rgba(59,91,255,.62), 0 0 44px rgba(59,91,255,.4);
}
/* Load the brand fonts in any project's :
*/