/* ========================================================================== Baiond pitch draft — Design Tokens -------------------------------------------------------------------------- Direction v2 (operator redirect, 2026-08-19): modern SaaS at Vercel/Framer tier. Sans only — Geist, no mono, no serif, anywhere. Their lime carries the page; the washed olive gradient is gone. Two schemes, LIGHT default (their own product UI is light-mode, so the page opens wearing what the application wears), dark one click away. Accent surfaces are the brand lime at FULL strength — tinted percentages read soft and washed out, which is the note this direction exists to fix. Palette pinned from the prospect's own CSS: lime #CAE825, teal #00A6A0, blacks #0a0a0a / #1b1b1b. CONTRACT: the SEMANTIC custom-property names (--color-*, --space-*, --text-*, …) mirror ../jaeger-template-v01 verbatim for `pitch convert`. Primitive ramps and the effect tokens below are the re-brand surface. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* Neutral ramp — cool-neutral, tuned to sit under lime without going olive */ --zinc-50: #fafafa; --zinc-100: #f1f1f0; --zinc-200: #e2e2e0; --zinc-300: #c6c6c3; --zinc-400: #9a9a97; --zinc-500: #71716e; --zinc-600: #52524f; --zinc-700: #383836; --zinc-800: #242423; --zinc-900: #171716; --zinc-950: #0a0a0a; /* Accent ramp — Baiond energy lime (brand: #CAE825) */ --lime-200: #edfaa8; --lime-300: #e3f56e; --lime-400: #d6ef47; --lime-500: #cae825; --lime-600: #a9c414; --lime-700: #7f930f; --lime-800: #5c6a0c; /* Secondary accent — Baiond teal (brand: #00A6A0). Data + supporting geometry only, never a competing CTA colour. */ --teal-300: #5fd9d4; --teal-400: #2cc4be; --teal-500: #00a6a0; --teal-600: #00807b; --white: #ffffff; --black: #000000; /* Spacing — hybrid 4-then-doubling scale */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ --space-12: 16rem; /* 256px */ /* Fluid type scale — clamp(min, fluid, max). 5xl is the hero only. */ --text-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem); /* 12 → 13px */ --text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem); /* 14 → 15px */ --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 → 17px */ --text-lg: clamp(1.0625rem,1.01rem + 0.27vw, 1.1875rem); /* 17 → 19px */ --text-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); /* 20 → 24px */ --text-2xl: clamp(1.5rem, 1.34rem + 0.80vw, 1.9375rem); /* 24 → 31px */ --text-3xl: clamp(1.875rem, 1.55rem + 1.61vw, 2.75rem); /* 30 → 44px */ --text-4xl: clamp(2.25rem, 1.71rem + 2.68vw, 3.75rem); /* 36 → 60px */ --text-5xl: clamp(2.75rem, 1.82rem + 4.64vw, 5.25rem); /* 44 → 84px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Letter spacing — Geist is tight by nature; display goes tighter still */ --tracking-tighter: -0.035em; --tracking-tight: -0.022em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; /* Font weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Font families. The DRAFT is one face: Geist. No mono display, no serif, anywhere on it — a hard rule of direction v2, and draft.css never references --font-mono. The mono stays defined and self-hosted for the deliverable pages only (evidence tables, raw header values, file names), which are internal documents, not the client's site. */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Radii — SaaS-scale rounding; the hero panel uses 3xl */ --radius-none: 0; --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --radius-3xl: 2.5rem; --radius-full: 9999px; /* Motion */ --duration-fast: 140ms; --duration-normal: 240ms; --duration-slow: 420ms; --duration-slower: 800ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* Layout containers */ --container-narrow: 40rem; /* 640px — prose */ --container-default: 68rem; /* 1088px — main */ --container-wide: 82rem; /* 1312px — panels */ --container-xwide: 94rem; /* 1504px — the hero panel breaks out */ /* ---------------------------------------------------------------- 2. SEMANTIC — LIGHT (default scheme) Their product UI is light-mode with white cards, so the default the page opens on is the one the application itself wears. ---------------------------------------------------------------- */ color-scheme: light; /* Surfaces */ --color-bg: #fbfbfa; --color-bg-subtle: #f2f2f0; --color-bg-muted: #e9e9e6; --color-bg-inset: var(--white); --color-panel: #0a0b0a; /* the hero/proof panel — black in BOTH schemes */ /* Text */ --color-text: #101110; --color-text-muted: #55564f; --color-text-subtle: #7d7e77; --color-text-on-accent: #10130a; /* Borders */ --color-border: rgb(16 17 16 / 0.10); --color-border-strong: rgb(16 17 16 / 0.20); /* Accent. Lime on white fails contrast as TEXT, so the text-accent darkens; every surface use of the accent stays the brand lime at full strength — no tinted percentages, which read washed out. */ --color-accent: var(--lime-500); --color-accent-hover: var(--lime-400); --color-accent-fg: #10130a; --color-accent-quiet: color-mix(in oklab, var(--lime-500) 22%, transparent); --color-accent-text: var(--lime-800); --color-second: var(--teal-600); --color-second-quiet: color-mix(in oklab, var(--teal-500) 16%, transparent); /* Feedback */ --color-focus-ring: var(--lime-700); --color-selection-bg: var(--lime-500); --color-selection-fg: #10130a; /* ---- Effects: glass, dual glow rings, shadows ------------------- The "double glowing border" is one element: an outer soft lime halo (box-shadow) plus an inner 1px hairline highlight (inset). Both are tokens so the other scheme retunes them, not re-authors them. */ --glass-bg: rgb(255 255 255 / 0.72); --glass-bg-strong: rgb(255 255 255 / 0.88); --glass-border: rgb(16 17 16 / 0.09); --glass-blur: 18px; --glass-inner: inset 0 1px 0 0 rgb(255 255 255 / 0.9); --glow-lime: 0 0 0 1px color-mix(in oklab, var(--lime-600) 40%, transparent), 0 0 30px -8px color-mix(in oklab, var(--lime-500) 62%, transparent), 0 18px 60px -28px rgb(16 17 16 / 0.4); --glow-lime-soft: 0 0 36px -14px color-mix(in oklab, var(--lime-500) 60%, transparent); --glow-teal-soft: 0 0 40px -14px color-mix(in oklab, var(--teal-500) 40%, transparent); --shadow-sm: 0 1px 2px 0 rgb(16 17 16 / 0.06); --shadow-md: 0 4px 14px -4px rgb(16 17 16 / 0.10); --shadow-lg: 0 18px 44px -16px rgb(16 17 16 / 0.16); --shadow-xl: 0 40px 90px -30px rgb(16 17 16 / 0.24); /* Background geometry — the triangle field + ambient wash */ --tri-lime: color-mix(in oklab, var(--lime-600) 46%, transparent); --tri-teal: color-mix(in oklab, var(--teal-500) 42%, transparent); --tri-grey: rgb(16 17 16 / 0.08); --wash-1: color-mix(in oklab, var(--lime-500) 18%, transparent); --wash-2: color-mix(in oklab, var(--teal-500) 10%, transparent); /* The panel is black in both schemes, so its local text/border values never flip. Components inside it re-point the surface tokens — see `.panel` in draft.css. */ --on-panel-text: var(--zinc-50); --on-panel-text-muted: #a3a5a1; --on-panel-border: rgb(255 255 255 / 0.10); } /* ---------------------------------------------------------------- 3. SEMANTIC — DARK Overrides only. Structure, spacing and type are scheme-agnostic. ---------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --color-bg: #080908; --color-bg-subtle: #101110; --color-bg-muted: #191a19; --color-bg-inset: #0c0d0c; --color-text: var(--zinc-50); --color-text-muted: #a3a5a1; --color-text-subtle: #74766f; --color-border: rgb(255 255 255 / 0.09); --color-border-strong: rgb(255 255 255 / 0.16); --color-accent-quiet: color-mix(in oklab, var(--lime-500) 16%, transparent); --color-accent-text: var(--lime-400); --color-second: var(--teal-400); --color-second-quiet: color-mix(in oklab, var(--teal-500) 18%, transparent); --color-focus-ring: var(--lime-400); --glass-bg: rgb(255 255 255 / 0.045); --glass-bg-strong: rgb(255 255 255 / 0.07); --glass-border: rgb(255 255 255 / 0.11); --glass-inner: inset 0 1px 0 0 rgb(255 255 255 / 0.10); --glow-lime: 0 0 0 1px color-mix(in oklab, var(--lime-500) 34%, transparent), 0 0 32px -6px color-mix(in oklab, var(--lime-500) 46%, transparent), 0 0 90px -20px color-mix(in oklab, var(--lime-500) 52%, transparent); --glow-lime-soft: 0 0 40px -14px color-mix(in oklab, var(--lime-500) 42%, transparent); --glow-teal-soft: 0 0 46px -14px color-mix(in oklab, var(--teal-500) 44%, transparent); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.55); --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / 0.7); --shadow-xl: 0 40px 90px -24px rgb(0 0 0 / 0.85); --tri-lime: color-mix(in oklab, var(--lime-500) 62%, transparent); --tri-teal: color-mix(in oklab, var(--teal-500) 62%, transparent); --tri-grey: rgb(255 255 255 / 0.10); --wash-1: color-mix(in oklab, var(--lime-500) 12%, transparent); --wash-2: color-mix(in oklab, var(--teal-500) 11%, transparent); } /* ---------------------------------------------------------------- 4. WEB FONT — Geist, self-hosted (OFL). Variable 100–900, two subsets. No CDN, no second family: the whole draft is this face. ---------------------------------------------------------------- */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Geist-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Deliverable pages only — never requested by the draft, because nothing in draft.css asks for --font-mono. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Geist-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } }