/* ============================================================ BERTHÉ CAREER & EDUCATION — SHARED COLOUR TONES Every tone defines the same token contract, so all three design concepts consume them. Switch via . Brief: bright palette — blue, white, subtle accent colours; professional and institutional rather than commercial. ============================================================ */ :root { /* fallback = institutional blue */ --bg: #ffffff; --bg-2: #f2f6fb; --surface: #ffffff; --text: #14202c; --text-muted:#5a6b7d; --accent: #1b5fa8; --accent-2: #0f3d70; --accent-3: #e5eff9; --on-accent: #ffffff; --line: rgba(20,32,44,.12); --glow: rgba(27,95,168,.20); color-scheme: light; } /* ---------- INSTITUTIONAL BLUES (recommended by the brief) ---------- */ /* Institut — classic public-sector blue on white */ [data-theme="institut"] { --bg:#ffffff; --bg-2:#f2f6fb; --surface:#ffffff; --text:#14202c; --text-muted:#5a6b7d; --accent:#1b5fa8; --accent-2:#0f3d70; --accent-3:#e5eff9; --on-accent:#ffffff; --line:rgba(20,32,44,.12); --glow:rgba(27,95,168,.20); color-scheme: light; } /* Horizont — brighter, friendlier sky blue */ [data-theme="horizont"] { --bg:#ffffff; --bg-2:#eef6fd; --surface:#ffffff; --text:#0f1e2b; --text-muted:#54697c; --accent:#2f86d0; --accent-2:#1a5f9c; --accent-3:#e2f1fd; --on-accent:#ffffff; --line:rgba(15,30,43,.11); --glow:rgba(47,134,208,.22); color-scheme: light; } /* Marine — deep navy, most formal of the blues */ [data-theme="marine"] { --bg:#ffffff; --bg-2:#eff2f7; --surface:#ffffff; --text:#101826; --text-muted:#556378; --accent:#1c3f77; --accent-2:#0b2549; --accent-3:#e4e9f2; --on-accent:#ffffff; --line:rgba(16,24,38,.12); --glow:rgba(28,63,119,.20); color-scheme: light; } /* ---------- BRAND TONES (taken from the Berthé logo) ---------- */ /* Berthé — sage green + terracotta, exactly the logo lockup */ [data-theme="berthe"] { --bg:#ffffff; --bg-2:#f5f6f2; --surface:#ffffff; --text:#2f3a3c; --text-muted:#6d7b7c; --accent:#6f8f78; --accent-2:#3f4d48; --accent-3:#eaf0ea; --on-accent:#ffffff; --line:rgba(47,58,60,.12); --glow:rgba(111,143,120,.24); color-scheme: light; } /* Terrakotta — the warm accent of the logo taking the lead */ [data-theme="terrakotta"] { --bg:#ffffff; --bg-2:#faf4f0; --surface:#ffffff; --text:#33261f; --text-muted:#7a675c; --accent:#c1734a; --accent-2:#8d4f2f; --accent-3:#f8e9e0; --on-accent:#ffffff; --line:rgba(51,38,31,.12); --glow:rgba(193,115,74,.22); color-scheme: light; } /* Salbei — soft sage, calm and approachable */ [data-theme="salbei"] { --bg:#ffffff; --bg-2:#f1f5f1; --surface:#ffffff; --text:#1f2b25; --text-muted:#5d6f65; --accent:#4e8262; --accent-2:#2f5a43; --accent-3:#e6f1ea; --on-accent:#ffffff; --line:rgba(31,43,37,.12); --glow:rgba(78,130,98,.22); color-scheme: light; } /* ---------- FURTHER OPTIONS ---------- */ /* Teal — modern education / EdTech feel */ [data-theme="teal"] { --bg:#ffffff; --bg-2:#eef7f8; --surface:#ffffff; --text:#10242a; --text-muted:#4f6a71; --accent:#0e7c86; --accent-2:#075a63; --accent-3:#dff2f4; --on-accent:#ffffff; --line:rgba(16,36,42,.12); --glow:rgba(14,124,134,.22); color-scheme: light; } /* Sand — warm off-white paper, very calm and human */ [data-theme="sand"] { --bg:#fdfaf5; --bg-2:#f5efe4; --surface:#ffffff; --text:#2a2418; --text-muted:#726650; --accent:#9a6b2f; --accent-2:#6b4718; --accent-3:#f3e9d7; --on-accent:#ffffff; --line:rgba(42,36,24,.13); --glow:rgba(154,107,47,.20); color-scheme: light; } /* Nacht — dark professional variant (accessible contrast) */ [data-theme="nacht"] { --bg:#0e1620; --bg-2:#141f2c; --surface:#1a2735; --text:#eef4fa; --text-muted:#9db0c4; --accent:#5aa9ea; --accent-2:#8fc6f2; --accent-3:#1e2f42; --on-accent:#08121c; --line:rgba(238,244,250,.14); --glow:rgba(90,169,234,.28); color-scheme: dark; }