/* BeUpFlow — design tokens + 3 motywy wg dokumentu Front_ClaudeCode_Review (v0.1). Przełączanie: [data-theme] na (bez reloadu). */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap'); :root, [data-theme="business"] { /* BeUp HR (Firmowy) — domyślny */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Poppins', 'Inter', sans-serif; --bg:#F7F9FC; --surface:#FFFFFF; --surface-2:#F1F4F9; --border:#E4E9F2; --border-strong:#CBD3E0; --text:#1A2332; --text-muted:#6B7A99; --text-inverse:#FFFFFF; --primary:#1E75C6; --primary-hover:#1962AD; --primary-soft:#E7F1FB; --primary-fg:#FFFFFF; --accent:#F59F00; --accent-hover:#DE8E00; --accent-soft:#FFF4E0; --success:#37B24D; --success-soft:#E6F5E9; --warn:#F1C40F; --warning:#F1C40F; --warning-soft:#FDF7DE; --danger:#E03131; --danger-soft:#FBE4E4; --info:#4DABF7; --info-soft:#E4F1FE; --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-full:999px; --shadow:0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --shadow-sm:0 1px 2px rgba(15,23,42,.04); --shadow-lg:0 10px 30px rgba(15,23,42,.08); } [data-theme="dark"] { /* Slate Dark */ --bg:#0B1120; --surface:#111827; --surface-2:#1F2937; --border:#1F2937; --border-strong:#334155; --text:#F1F5F9; --text-muted:#94A3B8; --text-inverse:#0B1120; --primary:#818CF8; --primary-hover:#6366F1; --primary-soft:#1E1B4B; --primary-fg:#0B1120; --accent:#F472B6; --accent-hover:#EC4899; --accent-soft:#500724; --success:#10B981; --success-soft:#022C22; --warn:#FBBF24; --warning:#FBBF24; --warning-soft:#451A03; --danger:#F87171; --danger-soft:#450A0A; --info:#60A5FA; --info-soft:#172554; --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-full:999px; --shadow:0 2px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.55); } [data-theme="accent"] { /* Minimal Light (HubSpot-style) */ --bg:#FFFFFF; --surface:#F5F8FA; --surface-2:#EAF0F6; --border:#CBD6E2; --border-strong:#A9BAC9; --text:#33475B; --text-muted:#7C98B6; --text-inverse:#FFFFFF; --primary:#FF7A59; --primary-hover:#E56B4E; --primary-soft:#FFEDE7; --primary-fg:#FFFFFF; --accent:#2E475D; --accent-hover:#1D3244; --accent-soft:#DFE3EB; --success:#00A38D; --success-soft:#D6F3EE; --warn:#F5C26B; --warning:#F5C26B; --warning-soft:#FDF3DF; --danger:#F2545B; --danger-soft:#FDDBDC; --info:#00A4BD; --info-soft:#D2ECF1; --radius:6px; --radius-sm:3px; --radius-lg:8px; --radius-full:999px; --shadow:0 1px 2px rgba(51,71,91,.10); --shadow-sm:0 1px 2px rgba(51,71,91,.06); --shadow-lg:0 8px 24px rgba(51,71,91,.12); } [data-theme="pastel"] { /* Kolory marki BeUpSoft — pomarańcz z logo (#E8551E) + grafit (#4A4D4C), jasne tło */ --bg:#FDFCFB; --surface:#FFFFFF; --surface-2:#F4F3F1; --border:#EAE7E3; --border-strong:#D5D1CC; --text:#2B2D2E; --text-muted:#77746F; --text-inverse:#FFFFFF; --primary:#E8551E; --primary-hover:#CE4715; --primary-soft:#FDE7DC; --primary-fg:#FFFFFF; --accent:#4A4D4C; --accent-hover:#363838; --accent-soft:#EAEAEA; --success:#5FAE7E; --success-soft:#E3F1E9; --warn:#E9B451; --warning:#E9B451; --warning-soft:#FBF0D8; --danger:#D9534F; --danger-soft:#F8E1E0; --info:#5B8CB0; --info-soft:#E4EDF4; --radius:12px; --radius-sm:7px; --radius-lg:16px; --radius-full:999px; --shadow:0 2px 8px rgba(74,77,76,.08), 0 1px 2px rgba(74,77,76,.05); --shadow-sm:0 1px 2px rgba(74,77,76,.05); --shadow-lg:0 10px 30px rgba(74,77,76,.12); } body { background:var(--bg); color:var(--text); font-family:var(--font-sans); } h1,h2,h3,h4,.brand,.side-brand { font-family:var(--font-display); }