/** * RevvUp / GEO Platform — Design System v2 Tokens * Source of truth for colors, typography, spacing, radius, shadows, motion. * Both marketing site, tenant app, and admin console @import this file. * * Update procedure: change a value here, re-deploy. Do NOT override these * tokens in individual app stylesheets — extend the semantic layer instead. * * v2 (April 2026): navy + cyan palette, Inter Tight / Inter / DM Mono fonts. * Legacy alias names (northstar, sky, sand, cloud, mist, slate-blue, * deep-ink) are preserved and remapped to v2 hexes so existing class * usage keeps working during migration. */ :root { /* ─────────────────────────────────────────────────────────────── * Color — v2 named tokens (preferred) * ─────────────────────────────────────────────────────────────── */ /* Dark surfaces — sidebar, nav, hero sections */ --color-navy-deep: #0D1117; --color-navy-mid: #111827; --color-navy-light: #1E2D3D; /* Primary signal — cyan */ --color-cyan-primary: #00C2C7; --color-cyan-bright: #00E5FF; /* Text/ink on dark */ --color-white: #F0F6FF; --color-white-muted: #8BA0B4; /* Light surfaces */ --color-canvas: #F4F7FA; --color-surface: #FFFFFF; --color-surface-raised: #EDF2F7; /* Text on light */ --color-text-primary: #0D1117; --color-text-secondary: #4A5568; --color-text-muted: #8BA0B4; /* Borders on light */ --color-border: #CBD5E0; --color-border-subtle: #E2E8F0; /* Score tiers */ --color-score-low: #EF4444; --color-score-mid: #F59E0B; --color-score-high: #00C2C7; /* ─────────────────────────────────────────────────────────────── * Color — Primitive scales (v2 remap — legacy key names retained) * ─────────────────────────────────────────────────────────────── */ /* "Northstar" scale — now the cyan signal family */ --color-northstar-50: #E6FAFB; --color-northstar-100: #C5F3F4; --color-northstar-200: #9AE9EB; --color-northstar-300: #5FDBDE; --color-northstar-400: #26CDD1; --color-northstar-500: #00C2C7; --color-northstar-600: #00C2C7; /* primary — matches cyan-primary */ --color-northstar-700: #00A4A8; --color-northstar-800: #00858A; --color-northstar-900: #006669; --color-northstar-950: #003F42; /* "Sky" scale — brighter cyan, used for hover / highlight / peak values */ --color-sky-50: #E6FDFE; --color-sky-100: #C5F9FB; --color-sky-200: #9AEDEF; --color-sky-300: #5FE5E9; --color-sky-400: #00E5FF; /* cyan-bright */ --color-sky-500: #00C7E5; --color-sky-600: #00A4BD; --color-sky-700: #007F8F; /* "Sand" scale — retired as a warm accent; remapped onto warning/amber so * existing class usage does not render as dead color. Prefer warning. */ --color-sand-50: #FEF3C7; --color-sand-100: #FDE68A; --color-sand-200: #FCD34D; --color-sand-300: #FBBF24; --color-sand-400: #F59E0B; --color-sand-500: #D97706; --color-sand-600: #B45309; /* Neutrals — v2 cool gray, anchored to navy-deep at the dark end */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F4F7FA; /* canvas */ --color-neutral-100: #EDF2F7; /* surface-raised */ --color-neutral-200: #E2E8F0; /* border-subtle (cloud alias) */ --color-neutral-300: #CBD5E0; /* border default (mist alias) */ --color-neutral-400: #A0AEC0; --color-neutral-500: #8BA0B4; /* text-muted / white-muted */ --color-neutral-600: #4A5568; /* text-secondary (slate-blue alias) */ --color-neutral-700: #2D3748; --color-neutral-800: #0D1117; /* navy-deep (deep-ink alias) */ --color-neutral-900: #0D1117; /* Legacy aliases — keeps existing app/admin class names valid in v2 */ --color-northstar: var(--color-cyan-primary); --color-sky: var(--color-cyan-bright); --color-sand: var(--color-score-mid); --color-cloud: var(--color-border-subtle); --color-mist: var(--color-border); --color-slate-blue: var(--color-text-secondary); --color-deep-ink: var(--color-navy-deep); /* Semantic — functional UI */ --color-success: #10B981; --color-success-bg: #D1FAE5; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --color-danger: #EF4444; --color-danger-bg: #FEE2E2; --color-info: #00E5FF; --color-info-bg: #E6FDFE; /* Estimated-data treatment (per v2 spec) */ --color-estimated-bg: rgba(245, 158, 11, 0.10); --color-estimated-border: #F59E0B; /* ─────────────────────────────────────────────────────────────── * Color — Semantic (role-based) tokens * Prefer these in components; swap primitives only for one-offs. * ─────────────────────────────────────────────────────────────── */ --color-bg-canvas: var(--color-canvas); --color-bg-subtle: var(--color-surface-raised); --color-bg-muted: var(--color-surface-raised); --color-bg-accent: var(--color-border-subtle); --color-bg-inverse: var(--color-navy-deep); /* sidebars, overlays */ --color-fg-default: var(--color-text-primary); --color-fg-muted: var(--color-text-secondary); --color-fg-subtle: var(--color-text-muted); --color-fg-inverse: var(--color-white); --color-fg-brand: var(--color-cyan-primary); --color-fg-accent: var(--color-cyan-bright); --color-border-default: var(--color-border-subtle); --color-border-muted: var(--color-border-subtle); --color-border-strong: var(--color-border); --color-border-brand: var(--color-cyan-primary); --color-border-focus: var(--color-cyan-bright); /* Primary CTA: cyan fill, navy-deep text (per v2 spec) */ --color-action-primary-bg: var(--color-cyan-primary); --color-action-primary-bg-hover: var(--color-cyan-bright); --color-action-primary-fg: var(--color-navy-deep); /* Secondary CTA: transparent bg, cyan border + text */ --color-action-secondary-bg: transparent; --color-action-secondary-bg-hover: rgba(0, 194, 199, 0.10); --color-action-secondary-fg: var(--color-cyan-primary); --color-action-secondary-border: var(--color-cyan-primary); /* ─────────────────────────────────────────────────────────────── * Typography * ─────────────────────────────────────────────────────────────── */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Inter Tight", "Inter", system-ui, sans-serif; --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Type scale — tight 1.2 ratio from base */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; /* ─────────────────────────────────────────────────────────────── * Spacing — 8px rhythm (matches Tailwind's default) * ─────────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 — v2 card padding / section gaps */ --space-6: 2rem; /* 32 — module spacing */ --space-7: 3rem; /* 48 — section breaks */ --space-8: 4rem; /* 64 — page-level rhythm */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ─────────────────────────────────────────────────────────────── * Radius * ─────────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 9999px; --radius-full: 9999px; /* ─────────────────────────────────────────────────────────────── * Shadows — v2 uses flat rgba for light-surface elevation; * dark surfaces use borders (see --border-dark) not shadows. * ─────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.08); --shadow-card-light: var(--shadow-sm); --shadow-card-raised: var(--shadow-md); --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-cyan-bright); /* Border presets (v2) */ --border-dark: 1px solid #1E2D3D; --border-light: 1px solid #CBD5E0; --border-cyan: 1px solid #00C2C7; /* ─────────────────────────────────────────────────────────────── * Motion * ─────────────────────────────────────────────────────────────── */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --duration-micro: 200ms; --duration-panel: 400ms; --duration-reveal: 600ms; --duration-count-up: 800ms; --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0.1, 1); /* ─────────────────────────────────────────────────────────────── * Layout primitives * ─────────────────────────────────────────────────────────────── */ --layout-header-h: 4rem; --layout-sidebar-w: 15rem; --layout-content-maxw: 72rem; --layout-prose-maxw: 48rem; /* ─────────────────────────────────────────────────────────────── * Gradients — used sparingly * ─────────────────────────────────────────────────────────────── */ --gradient-cyan: linear-gradient(135deg, #00C2C7 0%, #00E5FF 100%); --gradient-horizon: linear-gradient(135deg, #0D1117 0%, #1E2D3D 60%, #00C2C7 100%); } /* ─────────────────────────────────────────────────────────────── * Base — applied globally when this file is imported. * ─────────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-sans); color: var(--color-fg-default); background: var(--color-bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }