/* ============================================================ AAPA — Civic Warmth · Design Tokens Atlanta Area Psychological Associates, P.C. Source of truth for color, type, spacing, radius, shadow. Mirror of theme.json (developers should keep these in sync). ============================================================ */ :root { /* ---------- Color · Surface ---------- */ --aapa-paper: #F5F1E8; /* page background */ --aapa-paper-deep: #EBE3D0; /* alternating section */ --aapa-card: #FBF8F1; /* card / panel surface */ --aapa-white: #FFFFFF; /* ---------- Color · Ink ---------- */ --aapa-ink: #241F1A; /* primary text */ --aapa-ink-soft: #5C5247; /* secondary text */ --aapa-ink-muted: #8A7F70; /* captions, metadata */ /* ---------- Color · Brand (Teal) ---------- */ --aapa-teal: #2B7A78; /* brand primary */ --aapa-teal-dark: #1F5654; /* deep backgrounds */ --aapa-teal-darker: #15403E; /* footer */ --aapa-teal-light: #3D9B98; /* hover, accent */ --aapa-teal-veil: #A6C7C5; /* on-dark secondary text */ /* ---------- Color · Accent (Coral) ---------- */ --aapa-coral: #C9744C; /* primary CTA */ --aapa-coral-soft: #E8956F; /* on-dark accent */ --aapa-coral-deep: #A55A36; /* coral hover */ /* ---------- Color · Rule ---------- */ --aapa-rule: #D5CCB6; /* primary divider */ --aapa-rule-soft: #E5DCC4; /* inner double-rule */ /* ---------- Color · State ---------- */ --aapa-focus: #2B7A78; --aapa-focus-ring: rgba(43,122,120,0.35); --aapa-error: #B0392A; --aapa-success: #2B7A78; /* ---------- Type · Family ---------- */ --aapa-font-serif: 'Lora', Georgia, 'Times New Roman', serif; --aapa-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --aapa-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- Type · Scale (desktop) ---------- */ --aapa-fs-display: 76px; /* hero section H2 */ --aapa-fs-h1: 64px; /* page title */ --aapa-fs-h2: 48px; /* major section */ --aapa-fs-h3: 30px; /* subsection */ --aapa-fs-h4: 22px; /* callout heading */ --aapa-fs-h5: 19px; /* card title */ --aapa-fs-lead: 19px; /* large body */ --aapa-fs-body: 17px; /* body default */ --aapa-fs-body-sm: 15px; /* nav, captions */ --aapa-fs-caption: 13px; /* metadata */ --aapa-fs-eyebrow: 11px; /* uppercase eyebrow */ /* ---------- Type · Line height ---------- */ --aapa-lh-tight: 1.05; --aapa-lh-snug: 1.25; --aapa-lh-base: 1.55; --aapa-lh-prose: 1.75; --aapa-lh-loose: 1.85; /* ---------- Type · Letter spacing ---------- */ --aapa-ls-tighter: -0.018em; --aapa-ls-h2: -0.014em; /* per-element override; sits between tighter and tight */ --aapa-ls-tight: -0.005em; --aapa-ls-normal: 0; --aapa-ls-wide: 0.06em; --aapa-ls-wider: 0.18em; --aapa-ls-widest: 0.32em; --aapa-ls-eyebrow: 0.4em; /* ---------- Type · Weight ---------- */ --aapa-fw-regular: 400; --aapa-fw-medium: 500; --aapa-fw-semibold: 600; --aapa-fw-bold: 700; /* ---------- Spacing scale (4px base) ---------- */ --aapa-space-0: 0; --aapa-space-1: 4px; --aapa-space-2: 8px; --aapa-space-3: 12px; --aapa-space-4: 16px; --aapa-space-5: 20px; --aapa-space-6: 24px; --aapa-space-7: 32px; --aapa-space-8: 40px; --aapa-space-9: 56px; --aapa-space-10: 72px; --aapa-space-11: 88px; --aapa-space-12: 110px; /* section vertical rhythm */ /* ---------- Layout ---------- */ --aapa-container: 1180px; --aapa-gutter: 56px; --aapa-gutter-mobile:24px; /* ---------- Prose measure ---------- Reading-column width caps for long-form text. --aapa-measure is the default body measure on single articles (≈ 86ch at 17px Lora). Widened 680 → 920 in R3: at real-world desktop viewports (1500–1700px) the 680 column left too much empty paper either side; 920 holds the longreads cadence without the body feeling marooned. Inherited by every inner-page template that reads as long-form (single.php, future generic pages). --aapa-measure-narrow is for italic intros, captions, and CTA copy. */ --aapa-measure: 920px; --aapa-measure-narrow: 560px; /* ---------- Radius ---------- */ /* Civic Warmth is intentionally squared — radius is a last resort. */ --aapa-radius-0: 0; --aapa-radius-sm: 2px; /* form fields, micro */ --aapa-radius-md: 4px; /* opt-in only */ /* ---------- Border ---------- */ --aapa-border: 1px solid var(--aapa-rule); --aapa-border-soft: 1px solid var(--aapa-rule-soft); /* ---------- Shadow ---------- */ /* Shadows are quiet here — institutional, not floating. */ --aapa-shadow-0: none; --aapa-shadow-sm: 0 1px 0 rgba(36,31,26,0.04); --aapa-shadow-md: 0 2px 12px rgba(36,31,26,0.06); --aapa-shadow-lg: 0 8px 32px rgba(36,31,26,0.10); /* ---------- Motion ---------- */ --aapa-ease-standard: cubic-bezier(0.2, 0.0, 0, 1); --aapa-dur-fast: 120ms; --aapa-dur-base: 200ms; --aapa-dur-slow: 320ms; /* ---------- Z ---------- */ --aapa-z-base: 1; --aapa-z-sticky: 100; --aapa-z-drawer: 900; --aapa-z-modal: 1000; } /* ---------------------------------------------------------------- Breakpoints (use as media queries, not custom-property values — IDs documented for theme.json + developer reference). ---------------------------------------------------------------- */ /* --bp-sm: 480px small phone --bp-md: 768px tablet portrait --bp-lg: 1024px tablet landscape / small desktop --bp-xl: 1280px desktop reference --bp-2xl: 1440px large desktop */ /* ---------------------------------------------------------------- Base resets — minimal, opinionated. ---------------------------------------------------------------- */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; background: var(--aapa-paper); color: var(--aapa-ink); font-family: var(--aapa-font-sans); font-size: var(--aapa-fs-body); line-height: var(--aapa-lh-prose); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Heading defaults */ h1, h2, h3, h4, h5 { font-family: var(--aapa-font-serif); font-weight: var(--aapa-fw-medium); color: var(--aapa-teal-dark); margin: 0 0 var(--aapa-space-4); text-wrap: balance; } h1 { font-size: var(--aapa-fs-h1); letter-spacing: var(--aapa-ls-tighter); line-height: var(--aapa-lh-tight); } h2 { font-size: var(--aapa-fs-h2); letter-spacing: var(--aapa-ls-h2); line-height: var(--aapa-lh-tight); } h3 { font-size: var(--aapa-fs-h3); letter-spacing: var(--aapa-ls-tight); line-height: 1.15; } h4 { font-size: var(--aapa-fs-h4); line-height: 1.3; } h5 { font-size: var(--aapa-fs-h5); line-height: 1.3; } p { margin: 0 0 var(--aapa-space-5); } /* Focus — visible, calm, branded */ :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--aapa-focus); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }