/* ========================================================================== Design Tokens -- AI Visibility Tracker CSS custom properties for colors, typography, spacing, shadows, transitions. Light mode defaults. Dark mode via .dark class on . ========================================================================== */ :root { /* --- Font --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --- Typography Scale (minor third 1.2) --- */ --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: 2.75rem; /* 44px */ /* --- Font Weights --- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* --- Letter Spacing --- */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* --- Surface Colors (Light) --- */ --surface-primary: #FFFFFF; --surface-secondary: #F8FAFC; --surface-tertiary: #F1F5F9; --surface-elevated: #FFFFFF; --surface-overlay: rgba(0, 0, 0, 0.5); /* --- Text Colors (Light) --- */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #94A3B8; --text-inverse: #FFFFFF; /* --- Border Colors (Light) --- */ --border-primary: #E2E8F0; --border-secondary: #CBD5E1; --border-focus: #0D9488; /* --- Accent / Brand (Teal) --- */ --accent-primary: #0D9488; --accent-primary-hover: #0F766E; --accent-primary-light: rgba(13, 148, 136, 0.1); --accent-primary-text: #FFFFFF; /* --- Status Colors (Light) --- */ --status-success: #059669; --status-success-light: rgba(5, 150, 105, 0.1); --status-warning: #D97706; --status-warning-light: rgba(217, 119, 6, 0.1); --status-error: #DC2626; --status-error-light: rgba(220, 38, 38, 0.1); --status-info: #2563EB; --status-info-light: rgba(37, 99, 235, 0.1); /* --- Chart Palette (8 distinct, accessible colors) --- */ --chart-1: #0D9488; /* teal */ --chart-2: #2563EB; /* blue */ --chart-3: #DC2626; /* red */ --chart-4: #D97706; /* amber */ --chart-5: #059669; /* emerald */ --chart-6: #DB2777; /* pink */ --chart-7: #9333EA; /* violet -- chart only */ --chart-8: #EA580C; /* orange */ /* --- Domain Type Colors --- */ --type-news: #2563EB; --type-gov: #0D9488; --type-academic: #7C3AED; --type-ecommerce: #EA580C; --type-social: #DB2777; --type-review: #D97706; --type-blog: #059669; --type-forum: #0891B2; --type-wiki: #64748B; --type-corporate: #334155; --type-other: #94A3B8; /* --- Spacing (4px base unit) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- Layout --- */ --header-height: 52px; --sidebar-width: 220px; --filter-bar-height: 48px; --top-chrome-height: calc(var(--header-height) + var(--filter-bar-height)); --content-max-width: 1280px; --content-padding-x: 24px; --content-padding-y: 24px; /* --- Border Radius --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* --- Shadows (Light) --- */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* --- Transitions --- */ --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --duration-slower: 400ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Z-Index Scale --- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== Dark Mode Overrides ========================================================================== */ .dark { --surface-primary: #0F172A; --surface-secondary: #1E293B; --surface-tertiary: #334155; --surface-elevated: #1E293B; --surface-overlay: rgba(0, 0, 0, 0.7); --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-tertiary: #64748B; --text-inverse: #0F172A; --border-primary: #334155; --border-secondary: #475569; --border-focus: #14B8A6; --accent-primary: #14B8A6; --accent-primary-hover: #2DD4BF; --accent-primary-light: rgba(20, 184, 166, 0.15); --status-success: #10B981; --status-success-light: rgba(16, 185, 129, 0.15); --status-warning: #F59E0B; --status-warning-light: rgba(245, 158, 11, 0.15); --status-error: #EF4444; --status-error-light: rgba(239, 68, 68, 0.15); --status-info: #3B82F6; --status-info-light: rgba(59, 130, 246, 0.15); --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 1px 2px -1px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } } /* ========================================================================== High Contrast ========================================================================== */ @media (prefers-contrast: high) { :root { --border-primary: #94A3B8; --border-secondary: #64748B; } .dark { --border-primary: #64748B; --border-secondary: #94A3B8; } }