/* ============================================================ ABT CORE — central premium design system (single source of truth). Add class="abt" to . Dark mode via html[data-theme="dark"]. Aesthetic: warm editorial light, Cormorant display headings, restrained gold accents, generous whitespace. Mirrors the design hub. ============================================================ */ /* ---------- Design tokens: light (default) ---------- */ body.abt { --d-bg: #f5efe6; --d-bg-warm: #efe7da; --d-ink: #1d1a15; --d-ink-soft: #4a443b; --d-muted: #837a6c; --d-line: rgba(29, 26, 21, .12); --d-line-soft: rgba(29, 26, 21, .07); --d-gold: #ab7f4e; --d-gold-soft: rgba(171, 127, 78, .16); --d-surface: #fffdf9; --d-shadow: 0 24px 60px -28px rgba(40, 30, 18, .32); margin: 0; background: radial-gradient(1100px 640px at 50% -12%, rgba(171, 127, 78, .1), transparent 62%), radial-gradient(900px 600px at 100% 6%, rgba(120, 110, 92, .06), transparent 60%), var(--d-bg); color: var(--d-ink); font-family: var(--font-sans); } /* ---------- Design tokens: dark ---------- */ html[data-theme="dark"] body.abt { --d-bg: #141009; --d-bg-warm: #1c1710; --d-ink: #f4ece0; --d-ink-soft: #d4cbbb; --d-muted: #a89e8d; --d-line: rgba(244, 236, 224, .14); --d-line-soft: rgba(244, 236, 224, .07); --d-gold: #dcbd93; --d-gold-soft: rgba(220, 189, 147, .22); --d-surface: #1f1912; --d-shadow: 0 30px 66px -30px rgba(0, 0, 0, .72); background: radial-gradient(1100px 640px at 50% -12%, rgba(220, 189, 147, .12), transparent 62%), radial-gradient(900px 600px at 100% 6%, rgba(120, 110, 92, .1), transparent 60%), var(--d-bg); } body.abt ::selection { background: rgba(171, 127, 78, .24); } /* ---------- Container ---------- */ .abt-shell { width: min(1200px, calc(100% - 48px)); margin: 0 auto; } /* ---------- Eyebrow ---------- */ .abt-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--d-gold); font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; } .abt-eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .7; } /* ---------- Display heading ---------- */ .abt-display { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: .003em; color: var(--d-ink); } /* ---------- Buttons ---------- */ .abt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-sans); font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } .abt-btn--primary { background: var(--d-ink); color: #f7f1e6; box-shadow: 0 16px 32px -18px rgba(29, 26, 21, .7); } .abt-btn--primary:hover { transform: translateY(-2px); background: #2c2820; } .abt-btn--ghost { background: transparent; color: var(--d-ink); border-color: var(--d-line); } .abt-btn--ghost:hover { transform: translateY(-2px); border-color: var(--d-gold); color: var(--d-gold); background: rgba(171, 127, 78, .06); } html[data-theme="dark"] body.abt .abt-btn--primary { background: linear-gradient(135deg, #eccea6, #c99b66); color: #1a140c !important; } html[data-theme="dark"] body.abt .abt-btn--ghost { color: var(--d-ink) !important; } html[data-theme="dark"] body.abt .abt-btn--ghost:hover { color: var(--d-gold) !important; } /* ---------- Surface card ---------- */ .abt-card { border: 1px solid var(--d-line-soft); border-radius: 20px; background: var(--d-surface); box-shadow: var(--d-shadow); } /* ---------- Focus ---------- */ body.abt a:focus-visible, body.abt button:focus-visible { outline: 2px solid var(--d-gold); outline-offset: 3px; }