/* GuidePrice design tokens. Revised 19 Sep 2026: teal leads, tan is a drawing mark. Two brands live here, and the file keeps them apart structurally: WIDGET CHASSIS (bare :root) - what a homeowner sees on a fitter's site: ink, on-ink, ink-2, paper, sunk, rule, focus, danger, success + --fitter-accent / --on-fitter-accent, set per fitter at runtime. --accent, --mark and --ground are NOT defined here, so a widget cannot use them. GUIDEPRICE SURFACES (marketing, dashboard, email, checkout, social): opt in with . That scope adds --accent, --on-accent, --accent-sunk, --mark and --ground, and gives the neutrals their green bias. It also adds --radius-card (8px), --font-label (Manrope) and the on-ink pair for inverted bands. The widget gets none of these: it stays near-square and downloads only the mono. Contrast rules that are not negotiable: - text on --accent is ALWAYS --on-accent. It is white in light and ink in dark: never hand-pick it. - --accent is 7.6:1 on paper and 6.6:1 on ground, so it may be text, links, fills and borders. - --mark (plywood tan) is 3.4:1 on ground. Dimension lines and drawn marks only. Never text, never a fill, never a button. - --rule is 1.5:1 on paper. Borders only. Never text, never a meaningful icon. */ :root { --ink: #111214; --on-ink: #ffffff; --ink-2: #5a5f66; --paper: #ffffff; --sunk: #f2f3f5; --rule: #c5cec9; --focus: #111214; --danger: #a33a2a; --success: #2e6b45; /* Widget only. Overwritten per fitter; --on-fitter-accent is COMPUTED, never chosen. */ --fitter-accent: var(--ink); --on-fitter-accent: var(--on-ink); --font-display: "Archivo", "Arial Narrow", Arial, sans-serif; --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* Widget only: body text and headings fall through to the host site's system stack. Inside a widget, JetBrains Mono is the ONLY face that gets downloaded. */ --font-widget-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --radius-none: 0; --radius-sm: 2px; --radius-tile: 3px; /* Motion. fast = hover and state changes; bar = the price bar and price figure; draw = a drawn mark extending once (marketing site only). */ --motion-fast: 120ms; --motion-bar: 150ms; --motion-draw: 600ms; --ease: cubic-bezier(.2, .7, .2, 1); } /* Widget chassis, dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e8eaec; --on-ink: #111214; --ink-2: #98a29e; --paper: #16181b; --sunk: #1e2124; --rule: #333a38; --focus: #e8eaec; --danger: #f09a8a; --success: #7fc799; } } :root[data-theme="dark"] { --ink: #e8eaec; --on-ink: #111214; --ink-2: #98a29e; --paper: #16181b; --sunk: #1e2124; --rule: #333a38; --focus: #e8eaec; --danger: #f09a8a; --success: #7fc799; } /* GuidePrice surfaces, light. Page is --ground; cards, fields and panels are --paper. */ :root[data-surface="guideprice"] { --ink: #1b2421; --on-ink: #ffffff; --ink-2: #4c5a55; --ground: #edf0ee; --paper: #fafbfa; --sunk: #e2e7e4; --rule: #c5cec9; --accent: #1d5b6a; --on-accent: #ffffff; --accent-sunk: #d8e7ea; --mark: #a8773a; --focus: #1b2421; --danger: #a33a2a; --success: #2e6b45; /* Inverted (--ink) bands. Derived from ink and on-ink, so they follow the theme. --on-ink-2 is secondary text on ink (about 8:1); --rule-on-ink is borders only. */ --on-ink-2: color-mix(in srgb, var(--on-ink) 70%, var(--ink)); --rule-on-ink: color-mix(in srgb, var(--on-ink) 22%, var(--ink)); /* GuidePrice surfaces only. Cards, panels, buttons and fields. */ --radius-card: 8px; /* Nav links, section labels, table headers. Never numbers: those are --font-mono. */ --font-label: "Manrope", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* GuidePrice surfaces, dark. */ @media (prefers-color-scheme: dark) { :root[data-surface="guideprice"]:not([data-theme="light"]) { --ink: #e3eae6; --on-ink: #121816; --ink-2: #9dada6; --ground: #121816; --paper: #1a2220; --sunk: #0e1312; --rule: #33403b; --accent: #7cc0ce; --on-accent: #0e1a1d; --accent-sunk: #1e3338; --mark: #d9ac6e; --focus: #e3eae6; --danger: #f09a8a; --success: #7fc799; } } :root[data-surface="guideprice"][data-theme="dark"] { --ink: #e3eae6; --on-ink: #121816; --ink-2: #9dada6; --ground: #121816; --paper: #1a2220; --sunk: #0e1312; --rule: #33403b; --accent: #7cc0ce; --on-accent: #0e1a1d; --accent-sunk: #1e3338; --mark: #d9ac6e; --focus: #e3eae6; --danger: #f09a8a; --success: #7fc799; } /* Type scale. Display = Archivo, Text = Inter Tight, Data = JetBrains Mono, Label = Manrope (GuidePrice surfaces). */ .display-xl { font-family: var(--font-display); font-size: 44px; line-height: 46px; font-weight: 800; letter-spacing: -0.03em; } .display-lg { font-family: var(--font-display); font-size: 32px; line-height: 34px; font-weight: 800; letter-spacing: -0.03em; } .heading { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; } .heading-sm { font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.015em; } .body { font-family: var(--font-body); font-size: 15px; line-height: 23px; font-weight: 400; } .body-strong { font-family: var(--font-body); font-size: 15px; line-height: 23px; font-weight: 600; } .body-sm { font-family: var(--font-body); font-size: 13.5px; line-height: 20px; font-weight: 400; } .caption { font-family: var(--font-body); font-size: 11.5px; line-height: 17px; font-weight: 400; } .price { font-family: var(--font-mono); font-size: 32px; line-height: 34px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; } .price-sm { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .figure { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; } .label { font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.14em; } .section-label{ font-family: var(--font-label); font-size: 12.5px; line-height: 18px; font-weight: 600; letter-spacing: 0.09em; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }