/* TenderScope — design tokens (single source of truth). * * PR FI-1 — first step of the public-page redesign sequence * (Stripe / Linear / Vercel-inspired refinement). Adds the new * design-system primitives every subsequent redesign PR (FI-2 * landing → FI-3 pricing → FI-4 auth → …) will consume. * * Consolidation history: * PR FI-1 (additive): introduced typography + container + gap + * elevated/card shadow primitives. Color tokens still lived * per-page at this point. * PR FQ (color tokens): folded the 16 color tokens (--ink/--paper/ * --line/--accent/--green/--amber families) into this file in * both light and dark blocks. Values were byte-identical across * all 5 page CSS files before, so this is a true consolidation * with zero visual diff — single source of truth where there * was already one truth. * * Page-specific tokens that legitimately vary stay per-page: * --bg (landing white, dashboard gray) * --paper-strong (landing #F1F5F9, results dark differs) * --r-lg (landing 14px, dashboard 12px) * --shadow-sm/md/lg (subtle per-page rgba differences) * --red/--red-soft (only index/auth/profile/results use them) * * Regression pin: tests/test_design_tokens_consolidated.py asserts * no consolidated token may reappear in a page CSS file's :root. * * What this file DOES introduce: typography scale, container * widths, section gaps, and the elevated-shadow primitive — the * vocabulary every subsequent PR needs to express the new * Stripe-/Linear-inspired layouts. Existing tokens stay where * they are. * * Loaded via `@import url("./tokens.css");` at the very top of: * static/auth.css static/index.css static/landing.css * static/profile.css static/results.css * * Files without their own `:root` block (brief.css, * company_profile.css, panel-render.css) consume these tokens * via whichever page CSS is also loaded on the same template. */ :root { /* ============================================================ * Typography — named font handles for the existing 3-family * stack. The font files themselves are loaded via Google Fonts * s in the layout templates (Noto Sans Georgian, Noto * Serif Georgian, JetBrains Mono — kept from current state). * * Use --display-font for hero H1/H2 (Georgian-language warmth). * Use --ui-font for body, labels, nav, form fields. * Use --mono-font for numerics, codes, copyright, version tags. * ============================================================ */ --display-font: 'Noto Serif Georgian', Georgia, serif; --ui-font: 'Noto Sans Georgian', system-ui, sans-serif; --mono-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ============================================================ * Type scale — Stripe/Linear-style hierarchy. Display headings * scale with viewport (clamp) so 56px on a 1440px laptop reads * as ~36px on a 375px phone without media queries. * ============================================================ */ --text-h1: clamp(36px, 5vw, 56px); --text-h2: clamp(24px, 3vw, 32px); --text-h3: 20px; --text-h4: 17px; --text-body: 15px; --text-small: 13px; --text-micro: 11px; /* Body line-heights — tight enough to look professional, loose * enough to read comfortably in Georgian (which is taller than * Latin). 1.55 is a deliberate notch above the typical 1.5. */ --line-height-display: 1.1; --line-height-heading: 1.25; --line-height-body: 1.55; /* Letter-spacing handles — display-tight is the * Stripe/Linear-style "snap" on large serif headings. */ --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-eyebrow: 0.08em; /* uppercase eyebrows */ --tracking-mono: 0; /* JetBrains Mono ships its own */ /* ============================================================ * Layout containers — three widths cover every public page. * The narrow one is for legal prose (terms/privacy) where * ~70-character lines maximise readability. The default is the * marketing-page sweet spot. Wide is reserved for data-dense * dashboards (FI-2 → FI-7 only touch the first two). * ============================================================ */ --container-narrow: 760px; --container: 1180px; --container-wide: 1280px; /* ============================================================ * Section + block gaps — clamp-based so vertical rhythm scales * with viewport without a separate mobile breakpoint. 64px on * a small phone, 128px on a desktop, ~100px on a tablet. * ============================================================ */ --gap-section: clamp(64px, 8vw, 128px); --gap-block: 32px; --gap-row: 16px; /* ============================================================ * Elevated shadow — for the "Most Popular" pricing card, * sticky CTAs, modals, and the brand panel in FI-4 auth. * Distinct from --shadow-lg (existing) which is heavier; * --shadow-elevated is the Stripe/Linear "lifted but quiet" * primitive: barely-there in light mode, slight glow in dark. * ============================================================ */ --shadow-elevated: 0 12px 28px -8px rgba(11, 18, 32, 0.12), 0 4px 8px -4px rgba(11, 18, 32, 0.08); /* Subtle card shadow + border combo — the canonical * Stripe/Linear "card without a border" effect. Pairs box- * shadow w/ a hairline inset so dark-mode degradation is * graceful. */ --shadow-card: 0 1px 3px rgba(11, 18, 32, 0.04), 0 0 0 1px rgba(11, 18, 32, 0.04); /* ============================================================ * Color tokens — PR FQ consolidation. * * PR FI-1 left these declared in each page's :root because the * redesign-in-progress didn't want to risk a visual diff. The * 5 page CSS files (auth/index/landing/profile/results) all * declared byte-identical values for these 16 light + 16 dark * tokens, so PR FQ folds them here and drops the duplicates. * * Page-specific tokens (--bg, --paper-strong, --r-lg, the * --shadow-sm/md/lg legacy triple) still live per-file because * those values genuinely vary (e.g., landing has --bg: white, * dashboard has --bg: gray; landing has --r-lg: 14px, others * 12px). Single source of truth where there IS one truth. * ============================================================ */ --ink: #0B1220; --ink-soft: #1E293B; --ink-muted: #475569; --ink-faint: #656E7C; --paper: #FFFFFF; --paper-soft: #F8FAFC; --line: #E2E8F0; --line-soft: #F1F5F9; --accent: #1E40AF; --accent-hover: #1E3A8A; --accent-soft: #DBE7FB; --accent-strong: #0B2545; --green: #15803D; --green-soft: #DCFCE7; --amber: #B45309; --amber-soft: #FEF3C7; /* PR HB — danger/error consolidation. Pre-PR-HB, --red lived in 4 * page-CSS files with the same #B91C1C value; same byte-identical * promotion path as PR FQ's green/amber consolidation. --red-soft is * the matching tinted background for status pills + danger banners. */ --red: #B91C1C; --red-soft: #FEE2E2; } /* ============================================================ * Dark mode — elevated shadow needs a softer fall-off because * dark surfaces don't reflect light the same way. We keep the * same custom-property name so consumers don't need to know * which theme is active. * ============================================================ */ [data-theme="dark"] { --shadow-elevated: 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.35); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); /* PR FQ — dark-mode color tokens consolidated from the 5 page CSS * files. Values were byte-identical across all 5 :root + dark * blocks before this PR; this is the single source of truth now. */ --ink: #F1F5F9; --ink-soft: #CBD5E1; --ink-muted: #94A3B8; --ink-faint: #7C8AA0; --paper: #131C2E; --paper-soft: #0F1626; --line: #2A3A52; --line-soft: #1A2438; --accent: #60A5FA; --accent-hover: #93C5FD; --accent-soft: #1E3A8A; --accent-strong: #1E40AF; --green: #4ADE80; --green-soft: #14532D; --amber: #FBBF24; --amber-soft: #451A03; /* PR HB — dark-mode danger. Light --red (#B91C1C) reads black-ish * against the dark paper; #F87171 is the standard tailwind red-400 * which carries on dark surfaces. --red-soft is a low-alpha-equivalent * deep maroon for tinted backgrounds. */ --red: #F87171; --red-soft: #7F1D1D; }