/* ============================================================
Collaborative Growth Psychological Services
cgps-tokens.css — Design System: SOURCE OF TRUTH
------------------------------------------------------------
Link this ONE file on every page to stay on-brand:
It defines: brand tokens (:root), the swappable accent system,
base resets/typography, buttons, layout helpers, and the logo.
Do NOT hardcode hex values or font names in page CSS — always
reference the var(--token) names below. See DESIGN-SYSTEM.md.
FONTS: Cardinal Classic Short (serif) and Dia (sans) live in
/styles/cgps-fonts.css. Link it BEFORE this file on every page:
============================================================ */
:root {
/* Brand palette ----------------------------------------- */
--sage: #4E7263; /* primary brand green */
--sage-deep: #37534A; /* darkest green — headings on light, dark sections */
--sage-soft: #8AA89B; /* muted green — borders, secondary marks */
--sage-wash: #EDF2EE; /* palest green — icon chips, tints */
--blue: #6E8B99; /* dusty blue — secondary accent */
--blue-wash: #EBF1F3;
--blush: #E2D6BE; /* warm beige */
--terracotta: #C0815E; /* warm accent / primary CTA color */
--terracotta-deep: #A96B49; /* terracotta hover / emphasis */
--blush-wash: #F2EBDD;
--cream: #FAF6EF; /* default page background */
--cream-2: #F3ECE0; /* alternating section background */
--surface: #FFFFFF; /* cards, panels */
--surface-warm: #FFFDF9; /* warm white section background */
--ink: #2E3833; /* primary body text */
--ink-soft: #4C564F; /* secondary text, leads */
--muted: #757D77; /* captions, meta, list detail */
--line: #E6DFD3; /* warm hairline borders */
--line-cool: #DDE4E0; /* cool hairline borders */
/* Accent — swappable per scope via [data-accent] -------- */
--accent: var(--terracotta);
--accent-deep: var(--terracotta-deep);
/* Typography -------------------------------------------- */
--serif: 'Cardinal Classic Short', 'Cardinal Classic Mid', Georgia, 'Times New Roman', serif;
--sans: 'Dia', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Radius ------------------------------------------------ */
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
/* Elevation / shadow ------------------------------------ */
--shadow-sm: 0 1px 2px rgba(46,56,51,.05), 0 2px 8px rgba(46,56,51,.04);
--shadow-md: 0 4px 14px rgba(46,56,51,.07), 0 12px 34px rgba(46,56,51,.06);
--shadow-lg: 0 18px 50px rgba(46,56,51,.12);
/* Layout ------------------------------------------------ */
--maxw: 1200px;
}
/* Accent overrides — set data-accent on any wrapper or .
e.g. recolors accents within it. */
[data-accent="blue"] {
--accent: var(--blue);
--accent-deep: #56707D;
}
[data-accent="sage"] {
--accent: var(--sage);
--accent-deep: var(--sage-deep);
}
/* ============================================================
Reset / base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ============================================================
Typography
============================================================ */
.display, h1, h2, h3 {
font-family: var(--serif);
font-weight: 400;
color: var(--ink);
line-height: 1.16;
letter-spacing: -0.005em;
margin: 0;
padding-bottom: 0.04em;
}
h1 { font-size: clamp(2.8rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.eyebrow {
font-family: var(--sans);
font-weight: 600;
font-size: .78rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent-deep);
margin: 0;
}
.lead { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.7; }
p { margin: 0 0 1rem; text-wrap: pretty; }
/* ============================================================
Buttons
============================================================ */
.btn {
font-family: var(--sans);
font-weight: 600;
font-size: .9rem;
letter-spacing: .01em;
display: inline-flex;
align-items: center;
gap: .55em;
padding: .56em 1.2em;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
white-space: nowrap;
}
.btn-primary { background: var(--sage); color: #fff; box-shadow: 0 6px 18px rgba(78,114,99,.28); }
.btn-primary:hover { background: var(--sage-deep); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(78,114,99,.34); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(192,129,94,.28); }
.btn-accent:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sage); color: var(--sage-deep); background: var(--sage-wash); }
.btn-light { background: #fff; color: var(--sage-deep); }
.btn-lg { padding: .56em 1.2em; font-size: .9rem; }
/* ============================================================
Layout helpers
============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
/* ============================================================
Logo — shared between brand sheet and site header
============================================================ */
.cg-logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); }
.cg-logo .cg-mark { flex: none; }
.cg-logo .cg-name { display: flex; flex-direction: column; line-height: 1; }
.cg-logo .cg-name .cg-title {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.005em;
font-size: 1.5rem;
color: var(--sage-deep);
white-space: nowrap;
}
.cg-title em { font-style: normal; font-weight: 400; color: var(--sage); }
.cg-logo .cg-name .cg-sub {
font-family: var(--sans);
font-weight: 600;
font-size: .56rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
margin-top: .42em;
}
.cg-logo.stacked { flex-direction: column; gap: .55rem; text-align: center; }
.cg-logo.stacked .cg-name { align-items: center; }