/* ================================================================= tokens.css — DESIGN TOKENS The single source of truth. Every other framework file reads from here and hard-codes nothing. If a value appears in a component file that isn't a var(--fb-*), that's a bug. All names are prefixed --fb- so they can sit alongside the calculator's existing variables (--navy, --orange, --r) without either one touching the other. The palette is not new. It is the existing brand palette given semantic names, so "primary" can be re-pointed once instead of hunting down every orange in the project. ================================================================= */ :root{ /* =============================================================== 1 · BRAND PALETTE — raw values. Reference these only through the semantic tokens below, never directly in a component. =============================================================== */ --fb-orange-100:#FFE3D0; --fb-orange-300:#FF9B62; --fb-orange-500:#F26A21; /* brand orange */ --fb-orange-700:#C9500F; --fb-orange-900:#8F3806; --fb-navy-100:#DCEEFB; --fb-navy-300:#5C9DD0; --fb-navy-400:#12588F; --fb-navy-500:#0B3B66; /* brand navy */ --fb-navy-700:#072B4C; --fb-navy-900:#04192C; --fb-blue-100:#E4F2FD; --fb-blue-300:#7BC0EF; --fb-blue-500:#1C7FD0; --fb-blue-700:#125E9C; --fb-green-100:#E6F7EE; --fb-green-500:#2FA96B; --fb-green-700:#1F7A4B; --fb-amber-100:#FFF6DF; --fb-amber-500:#F2A93B; --fb-amber-700:#B87A17; --fb-red-100:#FDE9E5; --fb-red-500:#E23A1F; --fb-red-700:#A82611; --fb-cyan-500:#2BB8DE; /* cool end of the temperature gradient */ --fb-neutral-0:#FFFFFF; --fb-neutral-50:#F7FAFD; --fb-neutral-100:#F2F8FD; --fb-neutral-200:#E3EDF5; --fb-neutral-300:#D6E6F2; --fb-neutral-400:#B7CBDA; --fb-neutral-500:#8AA2B5; --fb-neutral-600:#5A7488; --fb-neutral-800:#243B4E; --fb-neutral-900:#0C1B2A; /* =============================================================== 2 · SEMANTIC COLOUR — what components actually use =============================================================== */ /* primary = the action colour. Every CTA in the product. */ --fb-primary:var(--fb-orange-500); --fb-primary-hover:var(--fb-orange-300); --fb-primary-active:var(--fb-orange-700); --fb-primary-subtle:var(--fb-orange-100); --fb-primary-contrast:var(--fb-neutral-0); /* secondary = the structural colour. Headings, chrome, selected states. */ --fb-secondary:var(--fb-navy-500); --fb-secondary-hover:var(--fb-navy-700); --fb-secondary-active:var(--fb-navy-900); --fb-secondary-subtle:var(--fb-navy-100); --fb-secondary-contrast:var(--fb-neutral-0); /* accent = informational highlight. Links, focus, data viz. */ --fb-accent:var(--fb-blue-500); --fb-accent-hover:var(--fb-blue-700); --fb-accent-subtle:var(--fb-blue-100); --fb-accent-contrast:var(--fb-neutral-0); /* status */ --fb-success:var(--fb-green-500); --fb-success-subtle:var(--fb-green-100); --fb-success-strong:var(--fb-green-700); --fb-warning:var(--fb-amber-500); --fb-warning-subtle:var(--fb-amber-100); --fb-warning-strong:var(--fb-amber-700); --fb-danger:var(--fb-red-500); --fb-danger-subtle:var(--fb-red-100); --fb-danger-strong:var(--fb-red-700); /* =============================================================== 3 · SURFACES =============================================================== */ --fb-background:#EAF7FF; /* page behind everything */ --fb-background-alt:var(--fb-neutral-100); --fb-surface:var(--fb-neutral-0); /* cards, panels */ --fb-surface-raised:var(--fb-neutral-0); --fb-surface-sunken:var(--fb-neutral-100); --fb-surface-inverse:var(--fb-navy-500); /* dark panels, results hero */ --fb-border:var(--fb-neutral-300); --fb-border-strong:var(--fb-neutral-400); --fb-border-edge:#C3D8E8; /* the pressed edge under a ghost button */ --fb-divider:var(--fb-neutral-200); /* glass — for panels floating over the sky or the house. Backdrop blur is progressively enhanced; without support the panel is simply a translucent white and still legible. */ --fb-glass-bg:rgba(255,255,255,.62); --fb-glass-bg-strong:rgba(255,255,255,.82); --fb-glass-bg-dark:rgba(11,59,102,.55); --fb-glass-border:rgba(255,255,255,.75); --fb-glass-blur:14px; --fb-glass-saturate:1.35; /* =============================================================== 4 · TEXT =============================================================== */ --fb-text:var(--fb-neutral-900); --fb-text-muted:var(--fb-neutral-600); --fb-text-subtle:var(--fb-neutral-500); --fb-text-inverse:var(--fb-neutral-0); --fb-text-inverse-muted:#B9DCF5; --fb-text-on-primary:var(--fb-neutral-0); --fb-text-link:var(--fb-accent); /* =============================================================== 5 · TYPOGRAPHY Type scale is a 1.2 minor third off a 16px base, rounded to whole pixels. Display sizes use clamp() so they breathe between a 360px phone and a tablet without a breakpoint. =============================================================== */ --fb-font-display:"Archivo",system-ui,sans-serif; --fb-font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --fb-font-mono:"IBM Plex Mono",monospace; --fb-font-hand:"Caveat",cursive; --fb-text-3xs:10px; --fb-text-2xs:11px; --fb-text-xs:12px; --fb-text-sm:13px; --fb-text-base:16px; --fb-text-md:18px; --fb-text-lg:21px; --fb-text-xl:clamp(22px, 5vw, 26px); --fb-text-2xl:clamp(26px, 6.4vw, 32px); --fb-text-3xl:clamp(30px, 8.2vw, 42px); --fb-text-metric:clamp(32px, 9vw, 44px); --fb-weight-regular:400; --fb-weight-medium:500; --fb-weight-semi:600; --fb-weight-bold:700; --fb-weight-black:800; --fb-leading-tight:1.05; --fb-leading-snug:1.25; --fb-leading-normal:1.5; --fb-leading-relaxed:1.65; --fb-tracking-tight:-.025em; --fb-tracking-normal:0; --fb-tracking-wide:.08em; --fb-tracking-caps:.13em; /* Archivo is a variable font. These are the two widths in use. */ --fb-vf-display:"wdth" 112,"wght" 800; --fb-vf-heading:"wdth" 108,"wght" 760; --fb-vf-label:"wdth" 106,"wght" 780; /* =============================================================== 6 · SPACING — 4px base =============================================================== */ --fb-space-0:0; --fb-space-1:4px; --fb-space-2:8px; --fb-space-3:12px; --fb-space-4:16px; --fb-space-5:20px; --fb-space-6:24px; --fb-space-8:32px; --fb-space-10:40px; --fb-space-12:48px; --fb-space-16:64px; /* =============================================================== 7 · RADIUS =============================================================== */ --fb-radius-xs:8px; --fb-radius-sm:12px; --fb-radius-md:14px; --fb-radius-lg:16px; --fb-radius-xl:20px; --fb-radius-2xl:26px; --fb-radius-pill:999px; --fb-radius-circle:50%; /* =============================================================== 8 · SHADOWS — tinted navy, never neutral grey. Grey shadows on a blue-tinted background read as dirt. =============================================================== */ --fb-shadow-none:none; --fb-shadow-xs:0 1px 2px rgba(11,59,102,.08); --fb-shadow-sm:0 2px 6px rgba(11,59,102,.08), 0 10px 30px rgba(11,59,102,.10); --fb-shadow-md:0 4px 12px rgba(11,59,102,.12), 0 14px 36px rgba(11,59,102,.12); --fb-shadow-lg:0 8px 40px rgba(11,59,102,.18); --fb-shadow-xl:0 16px 60px rgba(11,59,102,.24); --fb-shadow-inset:inset 0 2px 4px rgba(11,59,102,.10); /* chunky "pressable" shadow used by the primary button */ --fb-shadow-press:0 4px 0 var(--fb-primary-active), 0 8px 22px rgba(242,106,33,.35); --fb-shadow-press-hover:0 6px 0 var(--fb-primary-active), 0 12px 28px rgba(242,106,33,.42); --fb-shadow-press-active:0 1px 0 var(--fb-primary-active), 0 4px 12px rgba(242,106,33,.30); --fb-ring:0 0 0 4px rgba(28,127,208,.28); /* focus ring */ --fb-ring-danger:0 0 0 4px rgba(226,58,31,.24); /* =============================================================== 9 · MOTION =============================================================== */ --fb-duration-instant:80ms; --fb-duration-fast:160ms; --fb-duration-base:260ms; --fb-duration-slow:420ms; --fb-duration-slower:700ms; --fb-duration-ambient:3.4s; /* idle loops: float, pulse */ --fb-ease-out:cubic-bezier(.2,.9,.3,1); --fb-ease-in-out:cubic-bezier(.65,0,.35,1); --fb-ease-spring:cubic-bezier(.2,1.2,.35,1); --fb-ease-linear:linear; --fb-transition-colors:color var(--fb-duration-fast) var(--fb-ease-out), background-color var(--fb-duration-fast) var(--fb-ease-out), border-color var(--fb-duration-fast) var(--fb-ease-out); --fb-transition-transform:transform var(--fb-duration-fast) var(--fb-ease-out); --fb-transition-all:all var(--fb-duration-fast) var(--fb-ease-out); /* =============================================================== 10 · LAYOUT =============================================================== */ --fb-container-sm:400px; --fb-container-md:540px; /* the current tool's column width */ --fb-container-lg:720px; --fb-container-xl:960px; --fb-gutter:16px; /* =============================================================== 11 · Z-INDEX — one ladder, no ad-hoc numbers =============================================================== */ --fb-z-base:1; --fb-z-sticky:30; --fb-z-dock:40; --fb-z-popover:46; --fb-z-overlay:50; --fb-z-toast:55; --fb-z-modal:60; --fb-z-max:99; /* =============================================================== 12 · CONTROL SIZING — keeps every tappable thing above the 44px minimum without each component guessing. =============================================================== */ --fb-control-height-sm:40px; --fb-control-height:52px; --fb-control-height-lg:60px; --fb-tap-target:44px; --fb-icon-sm:16px; --fb-icon-md:20px; --fb-icon-lg:24px; --fb-icon-xl:32px; } /* ----------------------------------------------------------------- DARK SURFACE CONTEXT Drop .fb-on-dark on any container sitting on a navy/inverse surface. Text and border tokens re-point; components below need no dark-mode variants of their own. ----------------------------------------------------------------- */ .fb-on-dark{ --fb-text:var(--fb-text-inverse); --fb-text-muted:var(--fb-text-inverse-muted); --fb-text-subtle:rgba(255,255,255,.6); --fb-surface:rgba(255,255,255,.12); --fb-surface-sunken:rgba(255,255,255,.08); --fb-border:rgba(255,255,255,.20); --fb-border-strong:rgba(255,255,255,.34); --fb-divider:rgba(255,255,255,.16); }