/* ============================================================ TARMAC · BRAND TOKENS (canonical) · LIGHT MODE ============================================================ Standalone CRM product. Portfolio-family palette (matches the Tarmac Chrome extension / TariffCheck): BLUE primary · GOLD accent · WHITE surfaces. Modern, clean, rounded. 2026-06-27 rebrand — black+gold → blue+gold+white. Strategy: blue is now the PRIMARY action color (CTAs, links, active nav, focus). Gold is the ACCENT (wordmark dots, premium badges, brand highlights). The legacy `--tm-amber-*` token names are PRESERVED as living aliases that now resolve to the BLUE ramp, so every "primary" usage across the app flipped to blue with no component edits. Genuine gold accents are restored by pointing specific rules at the new `--tm-gold-*` ramp. Direction: clear-sky tower · runway lights · operational Mood: bright, focused, instrument-panel-clear ============================================================ */ /* ── Google Fonts: Inter + JetBrains Mono ──────────────────── */ :root { color-scheme: light; /* force native controls (select popups, date pickers, scrollbars) to render LIGHT, even on an OS in dark mode */ /* ── BRAND · BLUE (PRIMARY · action / identity) ──────────── Canonical ramp, copied exactly from the extension's panel.css so the two products read as one family. */ --tm-blue: #2563EB; /* primary · CTAs, links, active nav, focus */ --tm-blue-mid: #1D4ED8; /* hover / pressed */ --tm-blue-deep: #1E3A8A; /* deep blue · strong emphasis */ --tm-blue-ink: #0F2A5E; /* darkest · headers, wordmark ink */ --tm-blue-pale: #EAF1FF; /* tint background · active row / badge bg */ --tm-blue-glow: rgba(37, 99, 235, 0.30); /* focus glow */ /* ── BRAND · GOLD (ACCENT · premium / highlight / logo) ──── Stays gold on purpose: wordmark dots, premium/upgrade badges, decorative brand highlights. Use --tm-gold-deep for gold TEXT on white (AA contrast). */ --tm-gold: #D4AF37; /* accent · badges, logo dots, highlights */ --tm-gold-mid: #BE9A2B; /* gold hover / mid-contrast */ --tm-gold-deep: #8A6D12; /* dark gold · gold text on white (legible) */ --tm-gold-pale: #FBF3D6; /* gold badge background tint */ /* ── BRAND · AMBER (LEGACY ALIASES — now hold BLUE) ──────── These names are kept so the ~50 component files that reference `--tm-amber-*` / `var(--tm-amber)` keep working untouched — they now render the PRIMARY action color, which is BLUE. Do NOT put gold values back here; point gold rules at --tm-gold-* explicitly instead. */ --tm-amber: var(--tm-blue); /* legacy bare name → BLUE primary */ --tm-amber-primary: var(--tm-blue); /* legacy name → BLUE · CTAs, links, active nav */ --tm-amber-deep: var(--tm-blue-mid); /* legacy name → deep BLUE · pressed / dark accents */ --tm-amber-mid: var(--tm-blue-mid); /* legacy name → BLUE hover */ --tm-amber-soft: #93B4F7; /* legacy name → soft BLUE · highlights */ --tm-amber-pale: var(--tm-blue-pale); /* legacy name → BLUE tint · badge bg */ --tm-amber-wash: #F4F8FF; /* legacy name → very pale BLUE wash · active row */ --tm-amber-glow: var(--tm-blue-glow); /* legacy name → BLUE focus glow */ /* ── BRAND COLORS · SIGNAL (status accents) ────────────── */ --tm-signal-green: #047857; /* clear/connected/healthy · darker for light bg contrast */ --tm-signal-red: #DC2626; /* hold/error/voicemail */ --tm-signal-blue: #2563EB; /* in-progress/ringing · now the brand blue */ --tm-signal-violet: #6D28D9; /* AI-generated insights */ /* ── SURFACES (LIGHT MODE — white + cool light grays) ──── */ /* APPLE PASS (2026-08-11 · from ~/tarmac-apple-mirror): warm cream content canvas · solid white chrome · matches the approved mockup. */ --tm-bg: #FDFBF3; /* primary background · cream */ --tm-bg-page: #FDFBF3; /* alias · used by auth + app shell page bg */ --tm-bg-deep: #F4EDD8; /* table headers, deep accent · warm */ --tm-bg-surface: #FFFFFF; /* card / panel surface · pure white */ --tm-bg-surface-2: #FAF6EC; /* card hover · warm, barely darker */ --tm-bg-rail: #FFFFFF; /* sidebar rail · solid white chrome */ /* ── TEXT (on light · blue-tinted ink) ─────────────────── */ --tm-text-primary: #0F1B33; /* headlines, body · blue-ink */ --tm-text-secondary: #475569; /* captions, meta · slate-600 */ --tm-text-muted: #97A3B6; /* placeholders, disabled · cool slate */ --tm-text-amber: var(--tm-blue-mid); /* legacy name → BLUE callout text */ /* ── LINES / GRIDS ─────────────────────────────────────── */ --tm-grid: rgba(15, 30, 60, 0.05); /* taxiway grid · faint blue-ink */ --tm-grid-amber: rgba(37, 99, 235, 0.06); /* legacy name → BLUE grid · for hero areas */ --tm-border: rgba(15, 30, 60, 0.12); /* card borders · mirror weight */ --tm-border-strong: rgba(37, 99, 235, 0.38); /* hover/focus · BLUE edge */ --tm-divider: rgba(15, 30, 60, 0.08); /* horizontal dividers · mirror separator */ /* ── SHADOWS (soft, larger, lifted — modern) ───────────── */ /* APPLE PASS · depth without weight (mirror shadow-1/2/pop) */ --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05); --tm-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.10); --tm-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.10); --tm-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.16); --tm-shadow-amber: var(--tm-shadow-blue); /* legacy name → BLUE glow shadow */ --tm-shadow-blue: 0 6px 18px rgba(37, 99, 235, 0.26); --tm-shadow-gold: 0 6px 18px rgba(212, 175, 55, 0.26); --tm-shadow-press: inset 0 1px 2px rgba(15, 30, 60, 0.06); /* ── TYPOGRAPHY (Inter-first, matching the extension) ───── */ /* APPLE PASS · SF-first system stack (mirror --font) */ --tm-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif; --tm-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace; --tm-tracking-tight: -0.02em; --tm-tracking-wide: 0.12em; --tm-tracking-runway: 0.32em; /* ── SPACING ────────────────────────────────────────────── */ --tm-space-1: 4px; --tm-space-2: 8px; --tm-space-3: 12px; --tm-space-4: 16px; --tm-space-5: 24px; --tm-space-6: 32px; --tm-space-7: 48px; --tm-space-8: 64px; --tm-space-9: 96px; --tm-space-10: 128px; /* ── RADIUS (modernized · was ~2px, read dated) ────────── */ --tm-radius: 18px; /* cards / panels · mirror r-lg */ --tm-radius-sm: 12px; /* buttons / inputs · mirror r-md */ --tm-radius-md: 12px; /* legacy name · mirror r-md */ --tm-radius-light: 999px; /* pills */ --tm-radius-pill: 999px; /* ── MOTION ─────────────────────────────────────────────── */ --tm-ease: cubic-bezier(.4, 0, .2, 1); --tm-ease-out: cubic-bezier(.16, 1, .3, 1); --tm-duration-quick: 120ms; --tm-duration: 240ms; --tm-duration-slow: 640ms; --tm-duration-beacon: 1800ms; } /* ── Universal type stack ──────────────────────────────────── */ html, body, button, input, select, textarea { font-family: var(--tm-font); } body { color: var(--tm-text-primary); background: var(--tm-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01' 1, 'ss02' 1; } /* Mono opt-in for data + numbers */ .tm-mono, pre, code, .tm-num { font-family: var(--tm-font-mono); font-feature-settings: 'zero' 1, 'ss01' 1; } /* ── Utilities ─────────────────────────────────────────────── */ .tm-text-primary { color: var(--tm-text-primary); } .tm-text-secondary { color: var(--tm-text-secondary); } .tm-text-muted { color: var(--tm-text-muted); } .tm-text-amber { color: var(--tm-text-amber); } .tm-bg { background: var(--tm-bg); } .tm-bg-surface { background: var(--tm-bg-surface); } .tm-bg-rail { background: var(--tm-bg-rail); } .tm-bg-deep { background: var(--tm-bg-deep); } .tm-border { border: 1px solid var(--tm-border); } .tm-divider { border-top: 1px solid var(--tm-divider); } .tm-shadow { box-shadow: var(--tm-shadow); } .tm-shadow-amber { box-shadow: var(--tm-shadow-amber); } .tm-tracking-tight { letter-spacing: var(--tm-tracking-tight); } .tm-tracking-wide { letter-spacing: var(--tm-tracking-wide); text-transform: uppercase; } .tm-tracking-runway { letter-spacing: var(--tm-tracking-runway); text-transform: uppercase; } /* ── Card · the standard Tarmac panel ────────────────────────── APPLE PASS: borderless, soft-shadow elevation (mirror .card) — the border box stays (transparent) so no layout shifts anywhere. */ .tm-card { background: var(--tm-bg-surface); border: 1px solid transparent; border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-sm); transition: background var(--tm-duration) var(--tm-ease), border-color var(--tm-duration) var(--tm-ease), box-shadow var(--tm-duration) var(--tm-ease), transform var(--tm-duration) var(--tm-ease); } .tm-card:hover { box-shadow: var(--tm-shadow); } .tm-card-lift:hover { transform: translateY(-1px); border-color: var(--tm-border-strong); } /* ── Pills (status chips) · APPLE PASS: full-round (mirror .pill) ── */ .tm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-size: 10px; font-weight: 600; letter-spacing: var(--tm-tracking-wide); background: rgba(15, 23, 42, 0.06); color: var(--tm-text-secondary); text-transform: uppercase; border-radius: var(--tm-radius-pill); } /* Gold badge · genuine premium/highlight accent · stays GOLD (uses --tm-gold-deep text for AA contrast on the pale gold tint). */ .tm-pill-amber { background: var(--tm-gold-pale); color: var(--tm-gold-deep); } .tm-pill-gold { background: var(--tm-gold-pale); color: var(--tm-gold-deep); } .tm-pill-green { background: rgba(4, 120, 87, 0.10); color: var(--tm-signal-green); } .tm-pill-red { background: rgba(185, 28, 28, 0.10); color: var(--tm-signal-red); } .tm-pill-blue { background: rgba(37, 99, 235, 0.10); color: var(--tm-signal-blue); } .tm-pill-violet { background: rgba(109, 40, 217, 0.10); color: var(--tm-signal-violet); } .tm-pill-ai::before { content: '✦ '; color: var(--tm-signal-violet); } /* ── Runway · 3-light wordmark used as the Tarmac logo ─────── Brand mark · stays GOLD (the logo dots are the family accent). */ .tm-runway-mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--tm-font-mono); font-weight: 700; letter-spacing: 2px; color: var(--tm-blue-ink); /* mark text in blue-ink; the glyphs stay gold */ } .tm-runway-mark::before { content: '▸ ▸ ▸'; color: var(--tm-gold); text-shadow: 0 0 8px rgba(212, 175, 55, 0.35); letter-spacing: -1px; } /* ── Runway-light pulse · the signature ambient animation ──── Drives the wordmark logo dots · stays GOLD (brand accent). */ @keyframes tm-beacon-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); } 60% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } } .tm-beacon-pulse { animation: tm-beacon-pulse var(--tm-duration-beacon) var(--tm-ease-out) infinite; border-radius: var(--tm-radius-light); } /* ── Taxiway grid · subtle background pattern for hero/empty states ── */ .tm-grid-bg { background-color: var(--tm-bg); background-image: linear-gradient(var(--tm-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tm-grid) 1px, transparent 1px); background-size: 40px 40px; background-position: -1px -1px; } /* ── Runway-edge lighting · the signature blue→gold accent underline. This is the family "top accent bar" motif (see extension panel.css). */ .tm-runway-edge { position: relative; } .tm-runway-edge::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, var(--tm-blue) 0%, var(--tm-blue-mid) 55%, var(--tm-gold) 100%); opacity: 0.85; } /* ── Scrollbars (light theme) ──────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--tm-bg-deep); } ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235, 0.45); } /* ── Form fields (light-themed) ────────────────────────────── */ .tm-input { background: var(--tm-bg-surface); border: 1px solid var(--tm-border); color: var(--tm-text-primary); padding: 8px 12px; font-size: 13px; outline: none; border-radius: var(--tm-radius-sm); transition: border-color var(--tm-duration-quick) var(--tm-ease), box-shadow var(--tm-duration-quick) var(--tm-ease); } .tm-input:focus { border-color: var(--tm-blue); box-shadow: 0 0 0 3px var(--tm-blue-glow); /* blue focus ring (interactive) */ } .tm-input::placeholder { color: var(--tm-text-muted); } /* ── Selects · uniform + light platform-wide ─────────────────── color-scheme:light forces the native option popup to render light (not the OS dark theme — this is the fix for dark dropdowns). Base box styling matches .tm-input so raw and classed