/* ============================================================================ * Ads-Service design tokens — 4 themes as pure visual skins over ONE layout * (redesign plan §I). Themes change ONLY colours, font and corner-rounding; * never layout/spacing/composition. Every component consumes var(--token); * NO component hard-codes a colour, font or radius. * * Theme is selected with . * The bare :root is the Care default so the app is themed even before JS runs. * Palettes/fonts/radii are taken 1:1 from the brand screenshots. * ========================================================================== */ /* ---- semantic contract (the variable names every component uses) ---------- * --bg / --bg-2 page backdrop layers * --surface/-2/-3 card + inset + deeper surfaces * --text/-2/--muted text hierarchy * --border/-2 hairlines * --primary/-weak brand primary (+ tint) ; --on-primary text on it * --accent/-weak secondary accent * --cta/--on-cta the dominant call-to-action fill (theme-specific!) * --ok/--warn/--danger semantics (+ -weak tints) * --font/--font-display font families * --r-xs..--r-xl,--pill radius scale ; --sh-sm/--sh/--sh-lg shadows * --c1..--c6 chart palette * --space unit stays constant across themes (layout never changes) */ :root { /* layout constants — identical in every theme */ --sb: 76px; /* icon rail width */ --appbar-h: 64px; --bottomnav-h: 64px; --maxw: 1380px; --gap: 18px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ease: cubic-bezier(.2,.7,.2,1); --t-fast: .14s var(--ease); --t: .22s var(--ease); /* default theme = Care (light, Apple-minimal) */ --bg: #F8F4F4; --bg-2: #F0EBEB; --surface: #FFFFFF; --surface-2: #F5F1F1; --surface-3: #ECE7E7; --text: #1A1A1A; --text-2: #4A4A4A; --muted: #8E8E93; --border: #ECE7E7; --border-2: #DED8D8; --primary: #6450DF; --on-primary: #FFFFFF; --primary-weak: #ECE9FB; --accent: #FFB103; --on-accent: #1A1A1A; --accent-weak: #FFF3D6; --cta: #1A1A1A; --on-cta: #FFFFFF; /* Care: black pill CTAs */ --ok: #34C759; --ok-weak: #E4F7E9; --warn: #FFB103; --warn-weak: #FFF3D6; --danger: #FF3B30; --danger-weak: #FFE6E4; --ring: #6450DF55; --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Inter', sans-serif; --font-display: var(--font); --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --pill: 999px; --sh-sm: 0 1px 2px rgba(20,20,30,.05); --sh: 0 8px 24px rgba(20,20,30,.07); --sh-lg: 0 24px 56px rgba(20,20,30,.12); --glow: 0 0 0 transparent; --c1:#6450DF; --c2:#FFB103; --c3:#2D7FF9; --c4:#34C759; --c5:#FF5A4D; --c6:#FF649D; color-scheme: light; } /* ---- Theme 1 — BrightPath (Satoshi, light energetic) --------------------- */ :root[data-theme="brightpath"] { --bg: #EEF1F7; --bg-2: #E2E7F1; --surface: #FFFFFF; --surface-2: #F1F4F7; --surface-3: #E3E6E9; --text: #151313; --text-2: #45494E; --muted: #828A93; --border: #E3E6E9; --border-2: #D2D8DE; --primary: #2D5DDC; --on-primary: #FFFFFF; --primary-weak: #E6ECFB; --accent: #FF5734; --on-accent: #FFFFFF; --accent-weak: #FFE7E1; --cta: #C4F03B; --on-cta: #151313; /* BrightPath: lime CTAs */ --ok: #2FA45B; --ok-weak: #E2F4E9; --warn: #E8A317; --warn-weak: #FBEFD3; --danger: #E5484D; --danger-weak: #FBE3E4; --ring: #2D5DDC55; --font: 'Satoshi', 'Manrope', system-ui, sans-serif; /* Manrope = Cyrillic companion */ --font-display: 'Satoshi', 'Manrope', system-ui, sans-serif; --r-xs: 10px; --r-sm: 14px; --r: 18px; --r-lg: 22px; --r-xl: 28px; --pill: 999px; --sh-sm: 0 1px 2px rgba(21,30,55,.05); --sh: 0 10px 28px rgba(21,40,80,.08); --sh-lg: 0 24px 56px rgba(21,40,80,.14); --c1:#2D5DDC; --c2:#FF5734; --c3:#C4F03B; --c4:#151313; --c5:#6BA8FF; --c6:#FFA489; color-scheme: light; } /* ---- Theme 2 — Capture / HRadar (Poppins, dark minty) -------------------- */ :root[data-theme="capture"] { --bg: #1A1D1D; --bg-2: #141616; --surface: #2B2E2E; --surface-2: #343838; --surface-3: #3E4242; --text: #FFFFFF; --text-2: #C7CCCB; --muted: #8A908F; --border: #353A39; --border-2: #474D4C; --primary: #D7FEFA; --on-primary: #15201F; --primary-weak: #24302F; --accent: #8FD8E8; --on-accent: #0E1A1E; --accent-weak: #233233; --cta: #D7FEFA; --on-cta: #15201F; /* Capture: mint CTAs */ --ok: #6FE0A0; --ok-weak: #1F2E28; --warn: #F0C36B; --warn-weak: #322B1C; --danger: #FF7A7A; --danger-weak: #341F1F; --ring: #D7FEFA44; --font: 'Poppins', 'Nunito', system-ui, sans-serif; /* Nunito = Cyrillic companion */ --font-display: 'Poppins', 'Nunito', system-ui, sans-serif; --r-xs: 12px; --r-sm: 16px; --r: 22px; --r-lg: 26px; --r-xl: 32px; --pill: 999px; --sh-sm: 0 1px 2px rgba(0,0,0,.3); --sh: 0 12px 30px rgba(0,0,0,.4); --sh-lg: 0 28px 60px rgba(0,0,0,.55); --glow: 0 0 26px rgba(215,254,250,.18); --c1:#D7FEFA; --c2:#8FD8E8; --c3:#6AB8E0; --c4:#4A90D9; --c5:#6FE0A0; --c6:#F0C36B; color-scheme: dark; } /* ---- Theme 3 — Space Grotesk (high-contrast dark) ------------------------ */ :root[data-theme="spacegrotesk"] { --bg: #000000; --bg-2: #070707; --surface: #0E0E0E; --surface-2: #161616; --surface-3: #1F1F1F; --text: #FFFFFF; --text-2: #B8B8B8; --muted: #757575; --border: #1E1E1E; --border-2: #2C2C2C; --primary: #8ED78A; --on-primary: #06210A; --primary-weak: #122913; --accent: #FF649D; --on-accent: #2A0A16; --accent-weak: #2E1620; --cta: #FFFFFF; --on-cta: #000000; /* SpaceGrotesk: white active pill */ --ok: #8ED78A; --ok-weak: #122913; --warn: #F2C94C; --warn-weak: #2C2614; --danger: #FF5A6E; --danger-weak: #2E1418; --ring: #8ED78A55; --font: 'Space Grotesk', 'Onest', system-ui, sans-serif; /* Onest = Cyrillic companion */ --font-display: 'Space Grotesk', 'Onest', system-ui, sans-serif; --r-xs: 8px; --r-sm: 10px; --r: 16px; --r-lg: 20px; --r-xl: 24px; --pill: 999px; --sh-sm: 0 1px 2px rgba(0,0,0,.5); --sh: 0 10px 28px rgba(0,0,0,.6); --sh-lg: 0 24px 56px rgba(0,0,0,.7); --c1:#8ED78A; --c2:#FF649D; --c3:#5BD1E0; --c4:#F2C94C; --c5:#B388FF; --c6:#FFFFFF; color-scheme: dark; } /* ---- Theme 5 — Nova (Poppins, light violet/pink/yellow) ----------------- */ :root[data-theme="nova"] { --bg: #FAFBFC; --bg-2: #F1F3F6; --surface: #FFFFFF; --surface-2: #F4F5F8; --surface-3: #EBEDF2; --text: #343434; --text-2: #5A5A60; --muted: #9A9AA5; --border: #ECEEF2; --border-2: #DCDFE7; --primary: #8759F2; --on-primary: #FFFFFF; --primary-weak: #EFE9FE; --accent: #FF3E80; --on-accent: #FFFFFF; --accent-weak: #FFE4EC; --cta: #8759F2; --on-cta: #FFFFFF; /* Nova: violet CTAs */ --ok: #2FA866; --ok-weak: #E3F5EC; --warn: #E0A500; --warn-weak: #FFF4D2; /* Yellow #FFE180 family */ --danger: #F5455C; --danger-weak: #FFE4E7; --ring: #8759F255; --font: 'Poppins', 'Nunito', system-ui, sans-serif; /* Nunito = Cyrillic companion */ --font-display: 'Poppins', 'Nunito', system-ui, sans-serif; --r-xs: 10px; --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 26px; --pill: 999px; --sh-sm: 0 1px 2px rgba(52,52,52,.05); --sh: 0 10px 28px rgba(52,52,52,.08); --sh-lg: 0 24px 56px rgba(52,52,52,.14); --glow: 0 0 0 transparent; --c1:#8759F2; --c2:#FF3E80; --c3:#FFE180; --c4:#343434; --c5:#5BD1E0; --c6:#2FA866; color-scheme: light; } /* ---- Theme 4 — Care (SF Pro, light Apple) — same as :root default -------- */ :root[data-theme="care"] { --bg: #F8F4F4; --bg-2: #F0EBEB; --surface: #FFFFFF; --surface-2: #F5F1F1; --surface-3: #ECE7E7; --text: #1A1A1A; --text-2: #4A4A4A; --muted: #8E8E93; --border: #ECE7E7; --border-2: #DED8D8; --primary: #6450DF; --on-primary: #FFFFFF; --primary-weak: #ECE9FB; --accent: #FFB103; --on-accent: #1A1A1A; --accent-weak: #FFF3D6; --cta: #1A1A1A; --on-cta: #FFFFFF; --ok: #34C759; --ok-weak: #E4F7E9; --warn: #FFB103; --warn-weak: #FFF3D6; --danger: #FF3B30; --danger-weak: #FFE6E4; --ring: #6450DF55; --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Inter', sans-serif; --font-display: var(--font); --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --pill: 999px; --sh-sm: 0 1px 2px rgba(20,20,30,.05); --sh: 0 8px 24px rgba(20,20,30,.07); --sh-lg: 0 24px 56px rgba(20,20,30,.12); --glow: 0 0 0 transparent; --c1:#6450DF; --c2:#FFB103; --c3:#2D7FF9; --c4:#34C759; --c5:#FF5A4D; --c6:#FF649D; color-scheme: light; }