/* ========================================================================= Farsight Design System — Foundations Magpie IQ · AI-Native Market Intelligence ========================================================================= */ :root { /* ----------------------------------------------------------------------- COLOR — Brand ----------------------------------------------------------------------- */ --magpie-gold: #F5B400; /* primary accent — AI, focus, brand */ --magpie-gold-text: #A37800; /* WCAG-AA gold for text on light */ --magpie-black: #1A1916; /* sidebar, primary button, headings */ --magpie-deep: #0C0B09; /* sidebar deep, code surfaces */ --magpie-cream: #EDEBE7; /* page background */ --magpie-surface: #FFFFFF; /* cards, panels, inputs */ --magpie-muted: #F4F2EE; /* sub-panels, table headers, ghost btns */ /* tinted glazes (used on light + dark surfaces) */ --gold-glaze-08: rgba(245,180,0,0.08); --gold-glaze-12: rgba(245,180,0,0.12); --gold-glaze-15: rgba(245,180,0,0.15); --gold-glaze-22: rgba(245,180,0,0.22); --gold-glaze-35: rgba(245,180,0,0.35); --teal-glaze-08: rgba(11,143,106,0.08); --teal-glaze-20: rgba(11,143,106,0.20); --red-glaze-09: rgba(200,59,59,0.09); /* ----------------------------------------------------------------------- COLOR — Text ----------------------------------------------------------------------- */ --fg-1: #1A1916; /* primary — headings, body */ --fg-2: #4A4845; /* secondary — descriptions, paragraphs */ --fg-3: #8A8784; /* tertiary — labels, timestamps, placeholders */ --fg-gold: #A37800; /* gold text on light surfaces */ --fg-on-dark-1: #F5B400; /* active text on sidebar */ --fg-on-dark-2: rgba(255,255,255,0.60); /* readable on sidebar */ --fg-on-dark-3: rgba(255,255,255,0.32); /* inactive on sidebar */ --fg-on-dark-4: rgba(255,255,255,0.24); /* timestamps on sidebar */ /* ----------------------------------------------------------------------- COLOR — Semantic ----------------------------------------------------------------------- */ --positive: #0B8F6A; /* share gain, positive delta, success */ --negative: #C83B3B; /* loss, error, destructive */ --info: #1D6FE8; /* links, competitor data */ --warn: #F5B400; /* warning aligns with brand gold */ /* ----------------------------------------------------------------------- COLOR — Borders ----------------------------------------------------------------------- */ --border: rgba(26,25,22,0.09); --border-strong: rgba(26,25,22,0.15); --border-gold: rgba(245,180,0,0.35); --border-on-dark: rgba(255,255,255,0.05); /* ----------------------------------------------------------------------- ELEVATION ----------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.10); --shadow-pop: 0 2px 8px rgba(0,0,0,0.08); /* ----------------------------------------------------------------------- RADIUS — small, taut, geometric ----------------------------------------------------------------------- */ --radius-1: 4px; /* chips, badges */ --radius-2: 6px; /* small buttons, search inputs */ --radius-3: 8px; /* buttons, inputs */ --radius-4: 10px; /* cards, panels */ --radius-5: 12px; /* large panels, canvas */ --radius-pill: 999px; /* Asymmetric corners — signature of Farsight chat */ --radius-answer: 3px 12px 12px 12px; /* AI answer card */ --radius-bubble: 12px 12px 3px 12px; /* user bubble */ /* ----------------------------------------------------------------------- SPACING — 4-base scale ----------------------------------------------------------------------- */ --s-1: 4px; --s-1\.5: 6px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* ----------------------------------------------------------------------- TYPE — Families ----------------------------------------------------------------------- */ --font-display: 'Avenir Next', 'Segoe UI', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Avenir Next', 'Segoe UI', ui-sans-serif, system-ui, sans-serif; --font-mono: 'SFMono-Regular', 'SF Mono', Consolas, Menlo, monospace; /* ----------------------------------------------------------------------- TYPE — Semantic styles ----------------------------------------------------------------------- */ --t-display-size: 28px; --t-display-lh: 1.15; --t-display-tracking: -0.03em; --t-h1-size: 20px; --t-h1-lh: 1.25; --t-h1-tracking: -0.03em; --t-h2-size: 16px; --t-h2-lh: 1.35; --t-h2-tracking: -0.02em; --t-body-size: 14px; --t-body-lh: 1.65; --t-body-tracking: 0; --t-ui-size: 13px; --t-ui-lh: 1.5; --t-secondary-size: 12px; --t-secondary-lh: 1.5; --t-data-size: 13px; --t-data-lh: 1.4; --t-code-size: 11.5px;--t-code-lh: 1.7; --t-micro-size: 10.5px;--t-micro-tracking: 0.06em; /* ----------------------------------------------------------------------- MOTION ----------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 400ms; } /* ========================================================================= Type — semantic class helpers (use as needed) ========================================================================= */ .t-display { font-family: var(--font-display); font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-tracking); font-weight: 700; color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tracking); font-weight: 700; color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tracking); font-weight: 600; color: var(--fg-1); } .t-body { font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--fg-1); } .t-ui { font-family: var(--font-sans); font-size: var(--t-ui-size); line-height: var(--t-ui-lh); font-weight: 500; color: var(--fg-1); } .t-secondary { font-family: var(--font-sans); font-size: var(--t-secondary-size); line-height: var(--t-secondary-lh); color: var(--fg-3); } .t-data { font-family: var(--font-mono); font-size: var(--t-data-size); line-height: var(--t-data-lh); font-weight: 500; } .t-code { font-family: var(--font-mono); font-size: var(--t-code-size); line-height: var(--t-code-lh); color: var(--fg-2); } .t-micro { font-family: var(--font-sans); font-size: var(--t-micro-size); letter-spacing: var(--t-micro-tracking); font-weight: 600; text-transform: uppercase; color: var(--fg-3); } /* ========================================================================= Animations — used in the product ========================================================================= */ @keyframes blink { 0%,100%{opacity:.25} 50%{opacity:1} } @keyframes pulse-ring { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.08)} } @keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} } @keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .shimmer { background: linear-gradient(90deg, rgba(26,25,22,0.05) 25%, rgba(26,25,22,0.10) 50%, rgba(26,25,22,0.05) 75%); background-size: 400px 100%; animation: shimmer 1.4s infinite; } /* ========================================================================= Reduced motion — fewer and gentler, not zero. Keep opacity/color fades (they aid comprehension); remove movement and stop infinite decorative loops. Page-local animations should respect this too: gate any `animation:` shorthand behind the same query. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-iteration-count: 1 !important; /* infinite loops play once, then rest */ } .shimmer { animation: none; } }