/* ============================================================ REAKTIV CENTER — Design tokens Ember (graphite + Warm Amber) · Oswald + Inter Drop this in and build against the variables below. Fonts: add the from the spec to your . ============================================================ */ :root { /* ---- Color ---- */ --bg: #191A1E; /* page background (tinted near-black) */ --surface: #1F2126; /* cards, raised panels */ --surface-2: #26282E; /* higher elevation, inputs */ --band: #141519; /* darker bands: CTA, footer */ --line: rgba(243,238,231,.12); /* hairline borders/dividers */ --amber: #F0894F; /* accent: CTAs, links, numbers, pulse, mark */ --amber-hover: #F59D6A; /* hover */ --amber-press: #D9743B; /* active/pressed */ --on-amber: #1B0D04; /* text/icons ON an amber fill (never white) */ --text: #F3EEE7; /* primary text + headings (~14.9:1 on bg) */ --text-muted: #A7A199; /* secondary body, labels (~7:1 on bg) */ --text-subtle: #8E887E; /* captions, fine print (~4.8:1 on bg) */ --focus: var(--amber); /* ---- Type families ---- */ --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif; /* headings, eyebrows, buttons */ --font-body: "Inter", system-ui, -apple-system, sans-serif; /* body, links, UI text */ /* ---- Fluid type scale (min = ~360px, max = desktop) ---- */ --fs-display: clamp(2.75rem, 6.5vw, 4.6rem); /* 44 → 73.6px, hero */ --fs-h1: clamp(2rem, 4vw, 3rem); /* 32 → 48px */ --fs-h2: clamp(1.75rem, 3vw, 2.625rem); /* 28 → 42px */ --fs-h3: clamp(1.4rem, 2vw, 1.75rem); /* 22 → 28px */ --fs-lead: 1rem; /* 16px — D-027 */ --fs-body: 1rem; /* 16px */ --fs-small: 0.8125rem; /* 13px */ --fs-eyebrow: 0.75rem; /* 12px */ --fs-button: 0.875rem; /* 14px */ --lh-tight: 1.05; /* headings */ --lh-body: 1.6; /* paragraphs */ /* ---- Layout ---- */ --container: 1040px; /* inner content max-width */ --radius: 12px; /* cards */ --radius-lg: 16px; /* pricing / large panels */ } /* ---- Base ---- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: .005em; color: var(--text); margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; } a { color: var(--amber); text-decoration: none; } a:hover { color: var(--amber-hover); } /* Eyebrow / overline */ .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); } /* Buttons — labels use the DISPLAY font */ .btn { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-button); letter-spacing: .05em; text-transform: uppercase; padding: 12px 24px; border-radius: 9px; border: 1.5px solid transparent; cursor: pointer; display: inline-block; } .btn--primary { background: var(--amber); color: var(--on-amber); } /* NEVER white text here */ .btn--primary:hover { background: var(--amber-hover); } .btn--ghost { background: transparent; color: var(--text); border-color: rgba(167,161,153,.5); } /* Card */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }