/* ============================================================= SELLGENIUS.AI — DESIGN TOKENS tokens.css — Version 1.0 This file is imported first by every single page. Never hardcode a color, font size, or spacing value anywhere. Always use these variables. Change it here, it updates everywhere. ============================================================= */ /* --------------------------------------------------------------- IMPORT FONTS Plus Jakarta Sans — headings and KPI numbers Inter — body text and table data JetBrains Mono — code and monospace fields --------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* --------------------------------------------------------------- ROOT VARIABLES All design decisions live here --------------------------------------------------------------- */ :root { /* ----------------------------------------------------------- COLORS — BRAND PURPLE ----------------------------------------------------------- */ --color-purple-50: #f5f3ff; --color-purple-100: #ede9fe; --color-purple-200: #ddd6fe; --color-purple-300: #c4b5fd; --color-purple-400: #a78bfa; --color-purple-500: #8b5cf6; --color-purple-600: #7c3aed; /* PRIMARY — main brand color */ --color-purple-700: #6d28d9; --color-purple-800: #5b21b6; --color-purple-900: #4c1d95; --color-purple-950: #2e1065; /* ----------------------------------------------------------- COLORS — BACKGROUNDS AND SURFACES ----------------------------------------------------------- */ --color-bg: #0d0d14; /* Page background — near black with purple tint */ --color-bg-secondary: #111120; /* Slightly lighter background for contrast areas */ --color-surface-1: #16162a; /* Card backgrounds */ --color-surface-2: #1c1c35; /* Elevated cards, dropdowns */ --color-surface-3: #22223f; /* Hover states, selected rows */ --color-surface-4: #2a2a4a; /* Active states, focus rings */ /* ----------------------------------------------------------- COLORS — BORDERS ----------------------------------------------------------- */ --color-border: #2d2d4a; /* Standard border */ --color-border-subtle: #232340; /* Subtle dividers */ --color-border-strong: #3d3d60; /* Emphasized borders */ --color-border-purple: rgba(124, 58, 237, 0.35); /* Purple accent border */ /* ----------------------------------------------------------- COLORS — TEXT ----------------------------------------------------------- */ --color-text-primary: #f8f8ff; /* Headlines, important values */ --color-text-secondary: #cbd5e1; /* Body text, descriptions */ --color-text-tertiary: #94a3b8; /* Labels, captions, placeholders */ --color-text-disabled: #4a5568; /* Disabled states */ --color-text-inverse: #0d0d14; /* Text on light backgrounds */ --color-text-purple: #a78bfa; /* Purple accent text */ /* ----------------------------------------------------------- COLORS — SEMANTIC ----------------------------------------------------------- */ /* Success — positive values, up arrows, healthy states */ --color-success: #10b981; --color-success-light: #34d399; --color-success-dim: rgba(16, 185, 129, 0.12); --color-success-border: rgba(16, 185, 129, 0.3); /* Warning — caution states, approaching threshold */ --color-warning: #f59e0b; --color-warning-light: #fcd34d; --color-warning-dim: rgba(245, 158, 11, 0.12); --color-warning-border: rgba(245, 158, 11, 0.3); /* Danger — negative values, down arrows, alerts */ --color-danger: #ef4444; --color-danger-light: #fca5a5; --color-danger-dim: rgba(239, 68, 68, 0.12); --color-danger-border: rgba(239, 68, 68, 0.3); /* Info — neutral informational states */ --color-info: #06b6d4; --color-info-light: #67e8f9; --color-info-dim: rgba(6, 182, 212, 0.12); --color-info-border: rgba(6, 182, 212, 0.3); /* ----------------------------------------------------------- COLORS — CHART PALETTE Used consistently across every chart in the platform ----------------------------------------------------------- */ --chart-purple: #7c3aed; /* Primary metric — net profit, main line */ --chart-cyan: #06b6d4; /* Secondary metric — TACoS, ad cost */ --chart-green: #10b981; /* Positive metric — revenue growth */ --chart-amber: #f59e0b; /* Warning metric — ACoS near target */ --chart-red: #ef4444; /* Negative metric — losses, refunds */ --chart-indigo: #6366f1; /* Tertiary metric */ --chart-pink: #ec4899; /* Quaternary metric */ --chart-area-purple: rgba(124, 58, 237, 0.15); /* Area fill under purple line */ --chart-area-cyan: rgba(6, 182, 212, 0.10); /* Area fill under cyan line */ --chart-grid: rgba(45, 45, 74, 0.8); /* Chart grid lines */ /* ----------------------------------------------------------- COLORS — RANK HEATMAP Used in keyword rank heatmap tracker ----------------------------------------------------------- */ --rank-top-3: rgba(16, 185, 129, 0.85); /* Rank 1 to 3 — dark green */ --rank-top-10: rgba(16, 185, 129, 0.50); /* Rank 4 to 10 — medium green */ --rank-top-20: rgba(245, 158, 11, 0.55); /* Rank 11 to 20 — amber */ --rank-top-50: rgba(239, 68, 68, 0.45); /* Rank 21 to 50 — orange-red */ --rank-below-50: rgba(239, 68, 68, 0.25); /* Rank 50 plus — light red */ --rank-none: rgba(45, 45, 74, 0.4); /* Not ranking — gray */ /* ----------------------------------------------------------- TYPOGRAPHY — FONT FAMILIES ----------------------------------------------------------- */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* All headings and KPIs */ --font-body: 'Inter', system-ui, sans-serif; /* All body text */ --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* Code, API keys, ASINs */ /* ----------------------------------------------------------- TYPOGRAPHY — FONT SIZES ----------------------------------------------------------- */ --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 15px; --text-xl: 17px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 30px; --text-5xl: 38px; --text-6xl: 48px; --text-7xl: 60px; /* ----------------------------------------------------------- TYPOGRAPHY — FONT WEIGHTS ----------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ----------------------------------------------------------- TYPOGRAPHY — LINE HEIGHTS ----------------------------------------------------------- */ --leading-tight: 1.1; /* Headlines */ --leading-snug: 1.3; /* Subheadings */ --leading-normal: 1.5; /* General text */ --leading-relaxed: 1.7; /* Body paragraphs */ /* ----------------------------------------------------------- TYPOGRAPHY — LETTER SPACING ----------------------------------------------------------- */ --tracking-tighter: -1.5px; /* Hero numbers */ --tracking-tight: -0.5px; /* Headings */ --tracking-normal: 0px; /* Body */ --tracking-wide: 0.5px; /* Buttons */ --tracking-wider: 1px; /* Labels */ --tracking-widest: 2px; /* Uppercase section labels */ /* ----------------------------------------------------------- SPACING — BASE SCALE Consistent spacing across every element ----------------------------------------------------------- */ --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ----------------------------------------------------------- BORDER RADIUS ----------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ----------------------------------------------------------- SHADOWS ----------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.7); --shadow-purple: 0 4px 20px rgba(124, 58, 237, 0.25); --shadow-purple-lg: 0 8px 32px rgba(124, 58, 237, 0.35); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(45, 45, 74, 0.5); /* ----------------------------------------------------------- TRANSITIONS ----------------------------------------------------------- */ --transition-fast: all 0.12s ease; --transition-normal: all 0.2s ease; --transition-slow: all 0.35s ease; --transition-color: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; /* ----------------------------------------------------------- Z-INDEX SCALE ----------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ----------------------------------------------------------- LAYOUT — SIDEBAR AND NAV ----------------------------------------------------------- */ --sidebar-width: 260px; --sidebar-width-collapsed: 64px; --topnav-height: 58px; /* ----------------------------------------------------------- LAYOUT — CONTENT ----------------------------------------------------------- */ --content-padding: 32px; --content-max-width: 1400px; --card-padding: 24px; --table-cell-padding: 12px 16px; /* ----------------------------------------------------------- COMPONENT — BADGE SIZES ----------------------------------------------------------- */ --badge-padding-sm: 2px 7px; --badge-padding-md: 4px 10px; --badge-font-sm: var(--text-xs); --badge-font-md: var(--text-sm); /* ----------------------------------------------------------- COMPONENT — BUTTON SIZES ----------------------------------------------------------- */ --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 48px; --btn-padding-sm: 0 14px; --btn-padding-md: 0 20px; --btn-padding-lg: 0 28px; --btn-font-sm: var(--text-base); --btn-font-md: var(--text-md); --btn-font-lg: var(--text-lg); /* ----------------------------------------------------------- COMPONENT — INPUT ----------------------------------------------------------- */ --input-height: 40px; --input-padding: 0 14px; --input-bg: var(--color-surface-2); --input-border: var(--color-border); --input-border-focus: var(--color-purple-600); --input-radius: var(--radius-md); --input-font: var(--text-md); /* ----------------------------------------------------------- COMPONENT — TABLE ----------------------------------------------------------- */ --table-header-bg: rgba(124, 58, 237, 0.1); --table-row-hover: rgba(124, 58, 237, 0.05); --table-border: var(--color-border-subtle); --table-header-color: var(--color-text-purple); --table-font: var(--text-base); } /* --------------------------------------------------------------- RESPONSIVE BREAKPOINTS (used in media queries) Use like this: @media (max-width: 1280px) { ... } laptop @media (max-width: 1024px) { ... } tablet landscape @media (max-width: 768px) { ... } tablet portrait @media (max-width: 480px) { ... } mobile --------------------------------------------------------------- */ /* Breakpoint reference — do not remove this comment block --bp-laptop: 1280px --bp-tablet: 1024px --bp-mobile: 768px --bp-small: 480px */