/* ============================================================ tokens.css — Digital Crochet Salon, spa and gym management. Astoria, Queens, NY. The only file in this project that contains a raw value. Every colour, size, space and duration used anywhere must be a var() pointing here. ACCESSIBILITY NOTE ON THE BRAND INDIGO #6366F1 on white measures 4.47:1 — just under the 4.5:1 that WCAG AA requires for normal text, and white-on-#6366F1 is the same ratio. So the brand hue stays #6366F1 for large display type and decorative use, and --c-brand (the one buttons and links actually use) is #4F46E5, which measures 6.29:1 with white. Visually they read as the same indigo. ============================================================ */ @layer tokens { :root { /* ---- ground + ink ------------------------------------- Light mode is the default and the design's home. Neutrals carry a slight violet bias toward the indigo rather than being pure grey. */ --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-surface-2: #F6F6FB; --c-surface-3: #EFEFF8; --c-ink: #14142B; --c-muted: #5B5B78; --c-line: #E3E3F0; /* ---- brand -------------------------------------------- */ --c-brand: #4F46E5; /* 6.29:1 with white — text and buttons */ --c-brand-bright:#6366F1; /* the identity hue — display and fills */ --c-brand-soft: #EEF0FE; /* tinted surface */ --c-on-brand: #FFFFFF; /* ---- signals — these carry meaning, not decoration ----- money-saved is the story of this product, so it gets its own colour and nothing else uses it. */ --c-save: #0F7A5A; /* what the owner keeps */ --c-cost: #B03A2B; /* what a competitor takes */ --c-soon: #8A5A00; /* a feature that is not shipped yet */ --c-soon-bg: #FDF3E0; /* ---- the dark band ------------------------------------ One deep band for the hero/CTA. Same in both themes. */ --c-dark: #14142B; --c-dark-panel: #1E1E3D; --c-dark-ink: #F0F0F8; --c-dark-muted: #A3A3C2; --c-dark-line: #33335C; --c-brand-on-dark: #A5B4FC; /* brand on the dark band: 9.04:1 on --c-dark, 8.05:1 on --c-dark-panel */ /* Depth on the dark band: a brand glow and a faint grid. Decoration only; the glow's strength is capped by text contrast (components.css). */ --c-glow: #4F46E5; --c-grid: #FFFFFF; /* Calculator bars, on the dark panel. */ --c-bar-them: #6B5BE6; --c-bar-us: #A5B4FC; /* Money signals on the dark calculator. The light-theme --c-cost and --c-save measured 2.99:1 and 3.39:1 on --c-dark before any glow, so the calculator uses their dark-theme values, which hold in both themes. */ --c-cost-on-dark: #F0907C; --c-save-on-dark: #4ECCA0; /* Report status pills, on the dark panel. The light-theme signal colours fail on dark, so these are their dark-theme values. */ --c-leak: #F0907C; --c-watch: #E8B65C; --c-ok: #4ECCA0; --c-focus: var(--c-brand-bright); /* ---- type ---------------------------------------------- Instrument Sans + Figtree: professional without being the Inter-on-white default every SaaS lands on. Self-hosted; the fallback stacks carry the page until the files land. */ --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem); --text-0: clamp(1.02rem, 0.98rem + 0.18vw, 1.13rem); --text-1: clamp(1.22rem, 1.13rem + 0.42vw, 1.48rem); --text-2: clamp(1.47rem, 1.31rem + 0.78vw, 1.94rem); --text-3: clamp(1.76rem, 1.49rem + 1.32vw, 2.55rem); --text-4: clamp(2.11rem, 1.67rem + 2.14vw, 3.35rem); --lh-tight: 1.1; --lh-body: 1.6; --track-display: -0.024em; --track-label: 0.12em; /* ---- space — 8px grid, no exceptions ------------------ */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; /* ---- shape -------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgb(20 20 43 / 0.06); --shadow-2: 0 12px 32px -12px rgb(20 20 43 / 0.18); /* ---- motion — 150ms ease-out, nothing longer ---------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 150ms; /* ---- layout ------------------------------------------- */ --measure: 66ch; --page-max: 1120px; --gutter: 1rem; color-scheme: light dark; } /* Dark theme. Light is the default and the designed-for case; this keeps the page readable for anyone whose system is set dark, without inverting the design's intent. */ @media (prefers-color-scheme: dark) { :root { --c-bg: #101021; --c-surface: #18182F; --c-surface-2: #1E1E3A; --c-surface-3: #262649; --c-ink: #ECECF6; --c-muted: #A3A3C2; --c-line: #2E2E52; --c-brand: #A5B4FC; --c-brand-bright:#818CF8; --c-brand-soft: #232348; --c-on-brand: #14142B; --c-save: #4ECCA0; --c-cost: #F0907C; --c-soon: #E8B65C; --c-soon-bg:#2B2416; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-2: 0 12px 32px -12px rgb(0 0 0 / 0.7); } } } /* ============================================================ Self-hosted faces. Files are in assets/fonts/ as of 17 Sep 2026 -- the latin subset of each, from Google Fonts, 72KB for all three. Before that they were referenced and missing, which cost three console 404s on every page and a point of Lighthouse best-practices. format("woff2"), NOT "woff2-variations": that is legacy syntax, replaced in the spec by format("woff2") tech(variations). A variable woff2 declared as plain woff2 with a font-weight RANGE is what every current browser wants, and the range below is what makes it variable. ============================================================ */ @font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }