/* ========================================================================== DESIGN TOKENS — Replicord dark-first SaaS aesthetic Solar gradient (amber → orange → red) · Geist · glassmorphism ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400..600&display=swap'); :root { /* ==================================================================== BRAND — Solar gradient ==================================================================== */ --brand-amber: #FDE047; --brand-orange: #F97316; --brand-red: #DC2626; --gradient-brand: linear-gradient(135deg, #FDE047 0%, #F97316 50%, #DC2626 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(253,224,71,0.18) 0%, rgba(249,115,22,0.18) 50%, rgba(220,38,38,0.18) 100%); /* Agent tier */ --tier-master: #DC2626; --tier-senior: #F97316; --tier-junior: #FDE047; /* ==================================================================== SURFACES — dark stack ==================================================================== */ --bg-0: #0B0D12; --bg-1: #111521; --bg-2: #141A2A; --bg-3: #1A2133; --bg-4: #232838; /* ==================================================================== BORDERS ==================================================================== */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); /* ==================================================================== TEXT ==================================================================== */ --fg-1: #EDEFF5; --fg-2: #A7AFBF; --fg-3: #6B7385; --fg-4: #4A5163; /* ==================================================================== SEMANTIC STATUS ==================================================================== */ --success: #84CC16; --success-soft: rgba(132, 204, 22, 0.14); --warning: #EAB308; --warning-soft: rgba(234, 179, 8, 0.14); --danger: #F43F5E; --danger-soft: rgba(244, 63, 94, 0.14); --info: #14B8A6; --info-soft: rgba(20, 184, 166, 0.14); /* Brand glows */ --glow-amber: rgba(253, 224, 71, 0.30); --glow-orange: rgba(249, 115, 22, 0.40); --glow-red: rgba(220, 38, 38, 0.30); /* ==================================================================== AURORA MESH — use only on hero/login/CTA surfaces ==================================================================== */ --aurora-mesh: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(253,224,71,0.16) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 80% 25%, rgba(249,115,22,0.18) 0%, transparent 60%), radial-gradient(ellipse 55% 40% at 50% 95%, rgba(220,38,38,0.14) 0%, transparent 60%); /* ==================================================================== TYPOGRAPHY ==================================================================== */ --font-family-sans: 'Geist', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-family-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-size-base: 16px; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ==================================================================== SPACING — 8px baseline ==================================================================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ /* ==================================================================== CORNER RADII ==================================================================== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-full: 9999px; /* ==================================================================== SHADOWS — soft ambient, no hard drops ==================================================================== */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.30); --shadow-md: 0 8px 24px rgba(0,0,0,0.36); --shadow-lg: 0 18px 48px rgba(0,0,0,0.45); --shadow-xl: 0 32px 80px rgba(0,0,0,0.55); --inner-highlight: inset 0 1px 0 rgba(255,255,255,0.06); --glow-button: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(249,115,22,0.32), 0 0 32px rgba(220,38,38,0.20); --glow-focus: 0 0 0 2px rgba(249,115,22,0.55), 0 0 16px rgba(249,115,22,0.40); /* ==================================================================== MOTION ==================================================================== */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 200ms var(--ease-standard); --transition-normal: 300ms var(--ease-standard); --transition-slow: 500ms var(--ease-standard); /* ==================================================================== LEGACY ALIASES — old variable names mapped to dark palette All existing component CSS continues to work via these aliases. ==================================================================== */ /* Primaries (sidebar bg, hover) */ --color-primary: var(--bg-1); --color-primary-light: var(--bg-3); /* Brand / CTA — now Solar orange */ --color-secondary: var(--brand-orange); --color-secondary-light: #EA580C; /* orange-600 — hover/active state for CTA buttons */ --color-accent: var(--brand-orange); /* Surfaces */ --color-bg-main: var(--bg-0); --color-bg-surface: var(--bg-2); --color-bg-dark: #080A0F; --color-surface: var(--bg-2); --color-bg: var(--bg-2); /* Text */ --color-text-main: var(--fg-1); --color-text-muted: var(--fg-2); --color-text-light: #FFFFFF; /* Borders */ --color-border: var(--border-default); /* Status */ --color-danger: var(--danger); --color-danger-hover: #E11D8C; --color-green: var(--success); --color-green-dark: #A3E635; /* Secondary palette — tuned for dark canvas */ --color-indigo: #818CF8; --color-indigo-dark: #6366F1; --color-indigo-darker: #818CF8; --color-indigo-darkest: #A5B4FC; --color-amber-medium: var(--brand-amber); --color-amber-dark: var(--brand-orange); --color-blue: #60A5FA; --color-violet: #A78BFA; --color-red-dark: var(--danger); --color-bot-antenna: var(--brand-orange); --color-bot-antenna-light: var(--brand-amber); /* Icon sizes (unchanged) */ --size-icon-sm: 28px; --size-icon-md: 36px; --size-icon-lg: 40px; } /* ========================================================================== LIGHT MODE — paleta z Replicord Design Kit Nadpisuje tylko zmienne bazowe; aliasy (--color-*) dziedziczą automatycznie przez var() cascade. ========================================================================== */ [data-theme="light"] { /* surfaces — ciepłe neutralne szarości, bez niebieskiego odcienia */ --bg-0: #EDECEA; --bg-1: #F4F3F1; --bg-2: #FAF9F7; --bg-3: #E5E4E0; --bg-4: #D8D6D2; /* borders — neutralne, ciepłe */ --border-subtle: rgba(20, 18, 15, 0.07); --border-default: rgba(20, 18, 15, 0.12); --border-strong: rgba(20, 18, 15, 0.20); /* foreground — neutralne szarości bez niebieskiego */ --fg-1: #1F1E1C; /* ~18:1 na bg-2 */ --fg-2: #504E4A; /* ~7.5:1 na bg-2 */ --fg-3: #787470; /* ~4.6:1 na bg-2 */ --fg-4: #A09C97; /* pomocniczy, placeholder */ /* legacy aliases */ --color-text-main: #1F1E1C; --color-text-muted: #787470; --color-bg-main: #EDECEA; --color-bg-surface: #FAF9F7; --color-surface: #FAF9F7; --color-bg: #FAF9F7; --color-primary: #F4F3F1; --color-border: rgba(20, 18, 15, 0.12); /* tier colors */ --tier-junior: #9E5A08; /* semantic — stonowane, mniej żywe */ --success: #2A8F62; --success-soft: rgba(42, 143, 98, 0.12); --warning: #B5780C; --warning-soft: rgba(181, 120, 12, 0.12); --danger: #C22840; --danger-soft: rgba(194, 40, 64, 0.12); --info: #1572A6; --info-soft: rgba(21, 114, 166, 0.12); /* shadows — ciepłe, miękkie */ --shadow-sm: 0 1px 3px rgba(20,18,15,0.07), 0 1px 2px rgba(20,18,15,0.04); --shadow-md: 0 8px 24px rgba(20,18,15,0.09); --shadow-lg: 0 18px 48px rgba(20,18,15,0.13); /* aurora — minimalna, ledwo widoczna */ --aurora-mesh: radial-gradient(ellipse 50% 30% at 80% 0%, rgba(249,115,22,0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 30% at 0% 30%, rgba(253,224,71,0.05) 0%, transparent 60%); /* sidebar — ciemna nawet w light mode */ --sidebar-bg-override: #1A1F2E; }