/* ========================================================================== ToolsVale — Design tokens -------------------------------------------------------------------------- Single source of truth for the visual system. Every value here was extracted from the approved Claude Design exports (17 pages), not invented. Rules: 1. No hex value appears anywhere else in the CSS. Only var() references. 2. Add a token here before using a new value in components.css. 3. Gold (--tv-gold) is structural, never decorative. Hairlines, active states and one badge type only — never body text (fails contrast). Load order: tokens.css -> base.css -> layout.css -> components.css ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLOR PRIMITIVES Raw values. Components should use the semantic aliases in section 2, not these, so a palette change stays a one-line edit. ------------------------------------------------------------------ */ /* Brand violet — sampled from the logo (#301B5C .. #482E77) */ --tv-violet-950: #241247; /* deepest fill — footer, dark bands */ --tv-violet-900: #301B5C; /* logo dark */ --tv-violet-700: #482E77; /* PRIMARY — buttons, links, headings */ --tv-violet-500: #6E4AC0; /* hover / active link */ --tv-violet-300: #B6A2E6; /* on-dark accents, muted marks */ --tv-violet-100: #ECE5F9; /* selection, soft fills */ --tv-violet-050: #F3EFFB; /* hero radial wash */ /* Champagne gold — the signature. Structural use only. */ --tv-gold: #C6A15B; /* hairline rules, active underline, badge */ --tv-gold-soft: #EFE4CC; /* gold tint fill, badge background */ --tv-gold-ink: #7A5F23; /* text ON gold-soft — passes contrast */ --tv-gold-ink-2: #5E4A1E; /* darker gold ink for longer copy */ /* Neutrals */ --tv-ink-900: #17131F; /* primary text */ --tv-ink-700: #3A3348; /* rare mid ink */ --tv-ink-500: #524B63; /* body / supporting text */ --tv-ink-300: #8B8399; /* meta, captions, placeholders */ --tv-white: #FFFFFF; --tv-paper-050: #FCFBFE; /* raised card on canvas */ --tv-paper-100: #FAF9FC; /* page canvas */ --tv-paper-200: #F4F2F9; /* sunken wells, table stripes */ --tv-line-100: #ECE8F4; /* default hairline */ --tv-line-200: #DCD5E8; /* emphasised hairline, input border */ /* Semantic status — deliberately muted, never neon */ --tv-success: #1F7A54; --tv-warning: #B4791E; --tv-danger: #B23A3A; /* ------------------------------------------------------------------ 2. SEMANTIC ALIASES What templates and components actually consume. ------------------------------------------------------------------ */ /* Surfaces */ --tv-canvas: var(--tv-paper-100); --tv-surface: var(--tv-white); --tv-surface-raised: var(--tv-paper-050); --tv-surface-sunken: var(--tv-paper-200); --tv-surface-invert: var(--tv-violet-950); /* Text */ --tv-text: var(--tv-ink-900); --tv-text-soft: var(--tv-ink-500); --tv-text-muted: var(--tv-ink-300); --tv-text-invert: var(--tv-white); --tv-text-on-invert: #CFC5E4; /* body text inside dark bands */ --tv-text-invert-soft: #A99FCE; /* secondary text on dark */ --tv-text-invert-muted:#8F84B8; /* column titles, legal line */ --tv-border-invert: rgba(255,255,255,.10); /* Brand / interactive */ --tv-primary: var(--tv-violet-700); --tv-primary-hover: var(--tv-violet-500); --tv-accent: var(--tv-gold); /* Borders */ --tv-border: var(--tv-line-100); --tv-border-strong: var(--tv-line-200); --tv-border-accent: var(--tv-gold); /* Selection + focus */ --tv-selection: var(--tv-violet-100); --tv-focus-ring: 0 0 0 3px rgba(110, 74, 192, .28); /* ------------------------------------------------------------------ 3. TYPOGRAPHY Three families, three jobs. Self-hosted — see assets/fonts. ------------------------------------------------------------------ */ /* Self-hosted variable fonts — see fonts.css */ --tv-font-display: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; --tv-font-body: 'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --tv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (rem). Names describe role, not size. */ --tv-fs-micro: 0.625rem; /* 10px — dense mono labels */ --tv-fs-eyebrow: 0.6875rem; /* 11px — uppercase eyebrows, chips */ --tv-fs-tiny: 0.75rem; /* 12px */ --tv-fs-small: 0.8125rem; /* 13px — table cells, meta */ --tv-fs-caption: 0.875rem; /* 14px */ --tv-fs-base: 0.9375rem; /* 15px — UI default */ --tv-fs-body: 1rem; /* 16px — long-form body */ --tv-fs-lead: 1.0625rem; /* 17px — hero sub, intro paragraphs */ --tv-fs-h6: 1.125rem; --tv-fs-h5: 1.25rem; --tv-fs-h4: 1.375rem; --tv-fs-h3: 1.5rem; --tv-fs-h2: 1.75rem; --tv-fs-xl: 2rem; --tv-fs-2xl: 2.25rem; --tv-fs-3xl: 2.75rem; /* section display */ --tv-fs-4xl: 3.5rem; /* hero h1 */ /* Weights — only three exist in this system */ --tv-fw-medium: 500; --tv-fw-semibold: 600; --tv-fw-bold: 700; /* Tracking */ --tv-ls-display: -0.02em; /* large display type */ --tv-ls-tight: -0.01em; --tv-ls-normal: 0; --tv-ls-wide: 0.02em; --tv-ls-mono: 0.06em; --tv-ls-eyebrow: 0.14em; /* uppercase labels */ /* Leading */ --tv-lh-display: 1.06; --tv-lh-heading: 1.2; --tv-lh-snug: 1.45; --tv-lh-body: 1.65; --tv-lh-relaxed: 1.75; /* long-form article copy */ /* ------------------------------------------------------------------ 4. SPACING — 4px base ------------------------------------------------------------------ */ --tv-space-1: 4px; --tv-space-2: 8px; --tv-space-3: 12px; --tv-space-4: 16px; --tv-space-5: 20px; --tv-space-6: 24px; --tv-space-7: 28px; --tv-space-8: 32px; --tv-space-10: 40px; --tv-space-12: 48px; --tv-space-14: 56px; --tv-space-16: 64px; --tv-space-20: 80px; --tv-space-24: 96px; --tv-space-30: 120px; /* Section rhythm — vertical padding for page bands */ --tv-section-sm: var(--tv-space-14); /* 56px */ --tv-section: var(--tv-space-16); /* 64px */ --tv-section-lg: var(--tv-space-24); /* 96px */ --tv-section-xl: var(--tv-space-30); /* 120px */ /* ------------------------------------------------------------------ 5. LAYOUT ------------------------------------------------------------------ */ --tv-container: 1200px; --tv-gutter: var(--tv-space-12); /* 48px desktop */ --tv-gutter-mobile: var(--tv-space-5); /* 20px */ --tv-measure: 620px; /* max width for readable prose */ --tv-measure-narrow: 560px; /* centred intro paragraphs */ --tv-header-h: 92px; /* ------------------------------------------------------------------ 6. RADII ------------------------------------------------------------------ */ --tv-radius-xs: 4px; /* mono chips, kbd */ --tv-radius-sm: 8px; /* buttons, inputs */ --tv-radius: 12px; /* cards, panels */ --tv-radius-lg: 16px; /* large feature panels */ --tv-radius-pill: 999px; /* ------------------------------------------------------------------ 7. ELEVATION Hairlines carry structure; shadows are a last resort. Tinted violet so they read as part of the palette, not grey. ------------------------------------------------------------------ */ --tv-shadow-sm: 0 1px 2px rgba(36, 18, 71, .05); --tv-shadow: 0 6px 20px rgba(36, 18, 71, .08); --tv-shadow-lg: 0 24px 60px rgba(36, 18, 71, .14); /* ------------------------------------------------------------------ 8. MOTION One curve across the whole system. ------------------------------------------------------------------ */ --tv-ease: cubic-bezier(.2, .7, .2, 1); --tv-dur-fast: 120ms; --tv-dur: 220ms; --tv-dur-slow: 420ms; --tv-transition: all var(--tv-dur) var(--tv-ease); /* ------------------------------------------------------------------ 9. Z-INDEX — named, so no magic numbers appear in components ------------------------------------------------------------------ */ --tv-z-base: 1; --tv-z-sticky: 40; /* site header */ --tv-z-overlay: 60; /* scrim */ --tv-z-modal: 70; /* command palette */ --tv-z-toast: 80; } /* -------------------------------------------------------------------------- Fluid overrides — the display scale compresses on small screens. Kept here rather than in components so the scale stays in one place. -------------------------------------------------------------------------- */ @media (max-width: 900px) { :root { --tv-fs-4xl: 2.5rem; --tv-fs-3xl: 2rem; --tv-fs-2xl: 1.75rem; --tv-gutter: var(--tv-space-6); /* 24px */ --tv-section-xl: var(--tv-space-20); /* 80px */ --tv-section-lg: var(--tv-space-16); /* 64px */ --tv-header-h: 68px; } } @media (max-width: 560px) { :root { --tv-fs-4xl: 2.125rem; --tv-fs-3xl: 1.75rem; --tv-gutter: var(--tv-gutter-mobile); --tv-section-xl: var(--tv-space-16); /* 64px */ --tv-section-lg: var(--tv-space-14); /* 56px */ --tv-section: var(--tv-space-12); /* 48px */ } } /* -------------------------------------------------------------------------- Reduced motion — honoured globally. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --tv-dur-fast: 1ms; --tv-dur: 1ms; --tv-dur-slow: 1ms; } }