/* 1) Core palette (global) */ :root { /* base palette */ --brand-ink: #0F4C81; --accent: #0081F8; /* new blue */ --bg: #F4F8FA; --muted: #7B8C99; --success: #2E8B57; --warning: #E7A94E; --danger: #D64545; /* semantic tokens */ --text: #0f1720; --surface: var(--bg); --link-color: var(--accent); /* CTA tokens */ --cta-bg: var(--brand-ink); --cta-fg: #fff; --cta-border: color-mix(in srgb, var(--brand-ink) 88%, #000 12%); --cta-hover-bg: color-mix(in srgb, var(--brand-ink) 86%, #000 14%); --cta-active-bg: color-mix(in srgb, var(--brand-ink) 78%, #000 22%); --focus-ring: color-mix(in srgb, var(--brand-ink) 40%, #ffffff 60%); } /* Optional theme class if you want to scope palettes per page: … */ .theme--calm { --brand-ink:#0F4C81; --accent:#0081F8; --bg:#F4F8FA; --muted:#7B8C99; --success:#2E8B57; --warning:#E7A94E; --danger:#D64545; } /* /1* 2) Base button primitive (keeps current HTML intact) *1/ */ /* .btn, .button, a.btn, button.btn { */ /* --_bg: var(--surface); */ /* --_fg: var(--text); */ /* --_bd: color-mix(in srgb, var(--_bg) 80%, #000 20%); */ /* display: inline-flex; */ /* align-items: center; */ /* justify-content: center; */ /* gap: .5rem; */ /* padding: .7rem 1rem; */ /* border-radius: .6rem; */ /* border: 1px solid var(--_bd); */ /* background: var(--_bg); */ /* color: var(--_fg); */ /* text-decoration: none; */ /* line-height: 1; */ /* font-weight: 600; */ /* transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease; */ /* } */ /* .btn:active { transform: translateY(1px); } */ /* /1* 3) Primary/Contact variant — uses the accent globally *1/ */ /* .btn--primary, */ /* .btn--contact, */ /* button.contact, */ /* a.contact { */ /* --_bg: var(--cta-bg); */ /* --_fg: var(--cta-fg); */ /* --_bd: var(--cta-border); */ /* border-color: var(--_bd); */ /* background: var(--_bg); */ /* color: var(--_fg); */ /* } */ /* .btn--primary:hover, */ /* .btn--contact:hover, */ /* button.contact:hover, */ /* a.contact:hover { */ /* background: var(--cta-hover-bg); */ /* border-color: var(--cta-hover-bg); */ /* } */ /* .btn--primary:active, */ /* .btn--contact:active, */ /* button.contact:active, */ /* a.contact:active { */ /* background: var(--cta-active-bg); */ /* border-color: var(--cta-active-bg); */ /* } */ /* /1* 4) Focus styles for accessibility *1/ */ /* .btn:focus-visible, */ /* .button:focus-visible, */ /* a.btn:focus-visible, */ /* button.btn:focus-visible { */ /* outline: 2px solid var(--focus-ring); */ /* outline-offset: 2px; */ /* } */ /* /1* 5) If you support dark mode class, keep accent but tweak text/surface *1/ */ /* .dark-mode { */ /* --text: #eef2f7; */ /* --surface: #111827; */ /* --link-color: var(--accent); */ /* } */