/* ============================================================ * Tiptree brand token layer — hub palette/typography expressed * as overrides of the canonical tokens in tokens.css. * Companion: docs/design-tokens.map.md (every value traces to a * row there); source values from the hub's src/app/globals.css. * * Contract (per app-theme.css): override canonical tokens only; * keep structural surfaces opaque. Every surface below is an * opaque hex off the stone ramp; alpha appears only in hover * washes, scrims, and shadows. * * Import order: tokens.css → THIS FILE (where app-theme.css * sits today; it displaces app-theme.css's remaps). * * Theme model: dark is the hub default, so dark lives on :root * and light under [data-theme='light']. The product is * light-only today — applying this file UNTHEMED flips it dark. * Until the founders call the default (open question 2), pilot * behind a flag with data-theme="light" set on . * * Stylelint: the ADDITIVE block defines tokens that don't exist * in tokens.css yet. Before this file lands in the product, one * of two moves is needed (dev-sync decision): lift the additive * block into tokens.css (their naming review applies), or add * this file to .stylelintrc.json's importFrom list. * ============================================================ */ /* ------------------------------------------------------------ * ADDITIVE — proposed new canonical tokens (theme-independent). * Ramps anchor to the locked brand values already in tokens.css * (--brand-grey, --brand-light-blue, --brand-dark-blue, * --brand-yellow); never restate those hexes. * ------------------------------------------------------------ */ :root { /* STONE — warm neutrals (hub ramp, duplicates resolved to the * winning values). 200 = brand Grey; 100 ≈ light page; 900 ≈ * dark page; 950/1000 are the deep wells. */ --stone-000: #fff; --stone-050: #fcfcfa; --stone-50: #fcfcfb; --stone-100: #f8f8f6; --stone-150: #f1f1ec; --stone-200: var(--brand-grey); --stone-250: #e6e6e0; --stone-300: #dcdcd4; --stone-350: #cfcfc6; --stone-400: #bebeb3; --stone-450: #a6a69b; --stone-500: #909088; --stone-550: #7e7c73; --stone-600: #6f6f67; --stone-650: #5c5c55; --stone-700: #4d4d47; --stone-750: #3b3b38; --stone-800: #33332f; --stone-850: #2c2c2a; --stone-875: #262624; --stone-900: #1f1f1e; --stone-950: #1a1a19; --stone-1000: #141413; /* TEAL — the brand-identity ramp. 500 = brand Light Blue, * 600 = brand Dark Blue. */ --teal-100: #e4eeee; --teal-200: #c8dcdc; --teal-300: #a3c3c4; --teal-400: #82a7a9; --teal-500: var(--brand-light-blue); --teal-600: var(--brand-dark-blue); --teal-700: #3a5759; --teal-800: #2d4345; --teal-900: #1f3031; /* CITRON — the brand Yellow's ramp. 200 = brand Yellow; * light themes need 500+ for contrast. */ --citron-100: #f4f5db; --citron-200: var(--brand-yellow); --citron-300: #cfd478; --citron-400: #b7be54; --citron-500: #9ba23c; --citron-600: #7d842e; --citron-700: #616724; --citron-800: #474b1b; --citron-900: #2f3212; /* Font weights — Inter-variable axis positions (need the * variable face from brand/fonts.css). */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 510; --font-weight-semibold: 590; --font-weight-bold: 680; /* Inter feature settings. */ --font-settings: 'cv01', 'ss03'; --font-variations: 'opsz' auto; /* Mono split (Ivan, 2026-07-21): the hub's "monospace" role deliberately * resolves to Inter (a Linear-inherited quirk used for small mono-ish * labels), while real code is Google Sans Code (the mockup set's voice). * Two additive tokens carry that split; the canonical --font-family-mono * (system mono stack) is deliberately NOT remapped — their product * renders real terminal output through it and must keep true mono. */ --font-family-label-mono: inter, 'inter Fallback', ui-monospace, sfmono-regular, 'SF Mono', menlo, monospace; --font-family-code-mono: 'Google Sans Code', ui-monospace, sfmono-regular, 'SF Mono', menlo, monaco, consolas, monospace; /* Body type scale (hub §2.6) — size / line-height / * letter-spacing per step. */ --text-large-size: 1.0625rem; --text-large-line-height: 1.6; --text-large-letter-spacing: 0; --text-regular-size: 0.9375rem; --text-regular-line-height: 1.5; --text-regular-letter-spacing: -0.011em; --text-small-size: 0.875rem; --text-small-line-height: calc(21 / 14); --text-small-letter-spacing: -0.013em; --text-mini-size: 0.8125rem; --text-mini-line-height: 1.5; --text-mini-letter-spacing: -0.01em; --text-micro-size: 0.75rem; --text-micro-line-height: 1.4; --text-micro-letter-spacing: 0; --text-tiny-size: 0.625rem; --text-tiny-line-height: 1.5; --text-tiny-letter-spacing: -0.015em; /* Heading register (hub §2.5b) — the brand's heading voice. * Serif carries the display steps; the sub step rides the * sans. Weight rises as size falls. */ --heading-page-family: var(--font-family-serif); --heading-page-size: 2.5rem; --heading-page-line-height: 1.2; --heading-page-letter-spacing: -0.02em; --heading-page-weight: 300; --heading-section-family: var(--font-family-serif); --heading-section-size: 1.375rem; --heading-section-line-height: 1.33; --heading-section-letter-spacing: -0.01em; --heading-section-weight: 400; --heading-sub-family: var(--font-family-sans); --heading-sub-size: 1.0625rem; --heading-sub-line-height: 1.4; --heading-sub-letter-spacing: -0.012em; --heading-sub-weight: 500; /* Link underline treatment (hub §2.7). */ --underline-thickness: clamp(1px, 0.0625em, 3px); --underline-offset: clamp(2px, 0.225em, 6px); /* Hairline border — 1px, halved on ≥2x screens below. */ --border-hairline: 1px; /* Accent/link slots the canonical sheet lacks (theme-tuned * in the blocks below; dark defaults here). */ --color-accent-hover: var(--teal-300); --color-accent-tint: #1f2928; --link-color-hover: var(--brand-white); --color-highlight: #d6dc85; /* -------------------------------------------------------- * OVERRIDES — theme-independent. * -------------------------------------------------------- */ /* Typography roles → the self-hosted faces (brand/fonts.css). */ --font-family-sans: inter, 'inter Fallback', 'SF Pro Display', -apple-system, blinkmacsystemfont, 'Segoe UI', arial, sans-serif; --font-family-serif: literata, 'Literata Fallback', georgia, serif; /* --font-family-mono is intentionally NOT overridden — see the mono-split * note in the additive block above. */ /* Functional status colors (hub §1.1 — theme-independent; * reserved for states, never for brand accents). */ --status-success: #27a644; --status-warning: #fc7840; --status-danger: #eb5757; --status-running: #0a84ff; /* Destructive actions ride the same functional red. */ --action-danger-bg: #eb5757; --action-danger-bg-hover: #d64c4c; --action-danger-bg-pressed: #c24444; /* -------------------------------------------------------- * DARK THEME (hub default). Elevation steps LIGHTER * (page → card → menu), never darker; brand-black territory * is reserved for deep wells. * -------------------------------------------------------- */ color-scheme: dark; /* Surfaces — opaque, off the stone ramp. */ --surface-canvas: var(--stone-950); --surface-raised: var(--stone-875); --surface-sunken: var(--stone-1000); --surface-hover: #ffffff0f; --hover-bg: #ffffff0f; --button-hover-bg: #ffffff0f; --scrim: #000000d9; /* Text. */ --text-primary: var(--stone-100); --text-secondary: #ccc9c0; --text-tertiary: var(--stone-450); --text-quaternary: var(--stone-550); --text-strong: var(--stone-100); --primary-color: var(--stone-100); /* Borders + focus. */ --border-default: var(--stone-750); --border-interactive: #464641; --focus-ring: var(--teal-400); --action-focus-ring: var(--teal-400); /* Accent + links — teal, one step lighter for dark contrast. */ --color-accent: var(--teal-400); --link-color: var(--teal-300); /* Primary action — the hub's invert pill: warm off-white on * the dark page. Accent buttons stay on --action-accent-*. */ --action-primary-bg: var(--stone-200); --action-primary-bg-hover: var(--brand-white); --action-primary-bg-pressed: var(--stone-250); --action-primary-fg: var(--brand-black); /* Secondary action — solid raised pill + visible stroke. */ --action-secondary-bg: var(--stone-875); --action-secondary-bg-hover: #30302e; --action-secondary-border: #464641; --action-secondary-border-hover: #52524c; /* Disabled fill. */ --action-disabled-bg: #ffffff14; /* Inverse chrome flips light on the dark page. */ --surface-inverse: var(--stone-200); --text-on-inverse: var(--brand-black); --tooltip-bg: var(--stone-200); /* Scrollbar. */ --scrollbar-thumb: #ffffff1a; /* Shadows — dark elevation is carried by the surface ladder; * shadows are secondary (xs drops out entirely). */ --shadow-xs: 0 0 0 transparent; --shadow-sm: 0 2px 6px -2px #0000002b, 0 1px 2px #0002; --shadow-md: 0 4px 14px -3px #00000036, 0 1px 3px #00000026; --shadow-elevated: 0 20px 60px -8px #0006, 0 4px 12px #00000038; } @supports (text-decoration-thickness: from-font) { :root { --underline-thickness: from-font; } } @media (resolution >= 192dpi) { :root { --border-hairline: 0.5px; } } /* ------------------------------------------------------------ * LIGHT THEME — overrides on the hub's theme attribute. * The page sits on the warm off-white; pure white is reserved * for cards so raised surfaces pop. * ------------------------------------------------------------ */ [data-theme='light'] { color-scheme: light; /* Surfaces. */ --surface-canvas: var(--stone-50); --surface-raised: var(--stone-000); --surface-sunken: var(--stone-150); --surface-hover: rgb(27 27 27 / 5%); --hover-bg: rgb(27 27 27 / 5%); --button-hover-bg: rgb(27 27 27 / 4%); --scrim: #ffffffa6; /* Text — primary is the brand black itself. */ --text-primary: var(--brand-black); --text-secondary: var(--stone-700); --text-tertiary: var(--stone-600); --text-quaternary: var(--stone-500); --text-strong: var(--brand-black); --primary-color: var(--brand-black); /* Borders + focus. */ --border-default: var(--stone-300); --border-interactive: var(--stone-350); --focus-ring: var(--brand-dark-blue); --action-focus-ring: var(--brand-dark-blue); /* Accent + links — the locked brand teal carries light. */ --color-accent: var(--brand-dark-blue); --color-accent-hover: var(--teal-700); --color-accent-tint: var(--teal-100); --link-color: var(--brand-dark-blue); --link-color-hover: var(--brand-black); --color-highlight: #8a9132; /* Primary action — brand-black pill; hover lifts two visible * steps so the state change reads. */ --action-primary-bg: var(--brand-black); --action-primary-bg-hover: var(--stone-750); --action-primary-bg-pressed: var(--stone-700); --action-primary-fg: var(--brand-white); /* Secondary action — white pill + hairline stroke. */ --action-secondary-bg: var(--stone-000); --action-secondary-bg-hover: var(--stone-150); --action-secondary-border: var(--stone-300); --action-secondary-border-hover: var(--stone-400); /* Disabled fill. */ --action-disabled-bg: rgb(27 27 27 / 6%); /* Inverse chrome. */ --surface-inverse: var(--brand-black); --text-on-inverse: var(--brand-white); --tooltip-bg: #000c; /* Scrollbar. */ --scrollbar-thumb: #0000001a; /* Shadows — soft ambient + faint contact, low alpha. */ --shadow-xs: 0 1px 2px 0 #00000012; --shadow-sm: 0 2px 6px -2px #0000000d, 0 1px 2px #00000008; --shadow-md: 0 4px 14px -3px #00000012, 0 1px 3px #0000000a; --shadow-elevated: 0 20px 60px -8px #0000001f, 0 4px 12px #0000000d; }