/* AtomicCTF — Theme: EAMES
* Direction 3 from Retro Directions exploration.
* Bricolage Grotesque (display) + DM Sans (body) + DM Mono (meta).
*
* USAGE
* -----
* 1. Load the fonts (Google Fonts):
*
*
*
*
* 2. Load the brand color tokens (colors_and_type.css) BEFORE this file.
*
* 3. Load this file, then activate by setting an attribute on or :
*
*
* Slice 8G — selectors namespaced as data-brand-theme so they don't
* collide with the SPA's user-appearance data-theme attribute used
* for light/dark (core/atomic-dark).
*
* Or scope it under any container if you want side-by-side previews.
*
* Voice: Eames Office / mid-century editorial — grown-up, geometric, mixed-case.
* Best for: in-app UI, dense screens, anything that needs to read well at small sizes.
*/
[data-brand-theme="eames"] {
/* Font families */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
--font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
--font-stencil: "Special Elite", "Courier New", monospace;
/* Type scale tweaks for eames voice */
--t-h1-size: 72px;
--t-h1-weight: 800;
--t-h1-line: 0.95;
--t-h1-tracking: -0.035em;
--t-h1-transform: none;
--t-h1-opsz: 96;
--t-h2-size: 44px;
--t-h2-weight: 700;
--t-h2-line: 1.0;
--t-h2-tracking: -0.025em;
--t-h2-transform: none;
--t-h2-opsz: 48;
--t-h3-size: 28px;
--t-h3-weight: 700;
--t-h3-line: 1.05;
--t-h3-tracking: -0.02em;
--t-h3-transform: none;
--t-h3-opsz: 32;
--t-body-size: 15px;
--t-body-weight: 400;
--t-body-line: 1.55;
--t-meta-size: 11px;
--t-meta-tracking: 0.04em;
--t-meta-transform: uppercase;
--t-eyebrow-size: 11px;
--t-eyebrow-tracking: 0.16em;
--t-eyebrow-transform: uppercase;
font-family: var(--font-sans);
}
[data-brand-theme="eames"] h1,
[data-brand-theme="eames"] .h1 {
font-family: var(--font-display);
font-weight: var(--t-h1-weight);
font-size: var(--t-h1-size);
line-height: var(--t-h1-line);
letter-spacing: var(--t-h1-tracking);
text-transform: var(--t-h1-transform);
font-variation-settings: "opsz" var(--t-h1-opsz);
color: var(--ac-midnight);
margin: 0;
}
[data-brand-theme="eames"] h1 i,
[data-brand-theme="eames"] .h1 i {
font-style: italic;
color: var(--accent);
font-weight: 600;
}
[data-brand-theme="eames"] h2,
[data-brand-theme="eames"] .h2 {
font-family: var(--font-display);
font-weight: var(--t-h2-weight);
font-size: var(--t-h2-size);
line-height: var(--t-h2-line);
letter-spacing: var(--t-h2-tracking);
text-transform: var(--t-h2-transform);
font-variation-settings: "opsz" var(--t-h2-opsz);
color: var(--ac-midnight);
margin: 0;
}
[data-brand-theme="eames"] h3,
[data-brand-theme="eames"] .h3 {
font-family: var(--font-display);
font-weight: var(--t-h3-weight);
font-size: var(--t-h3-size);
line-height: var(--t-h3-line);
letter-spacing: var(--t-h3-tracking);
text-transform: var(--t-h3-transform);
font-variation-settings: "opsz" var(--t-h3-opsz);
color: var(--ac-midnight);
}
[data-brand-theme="eames"] p,
[data-brand-theme="eames"] .body {
font-family: var(--font-sans);
font-size: var(--t-body-size);
font-weight: var(--t-body-weight);
line-height: var(--t-body-line);
color: var(--fg);
}
[data-brand-theme="eames"] .meta {
font-family: var(--font-mono);
font-size: var(--t-meta-size);
letter-spacing: var(--t-meta-tracking);
text-transform: var(--t-meta-transform);
color: var(--fg-muted);
}
[data-brand-theme="eames"] .eyebrow {
font-family: var(--font-mono);
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-tracking);
text-transform: var(--t-eyebrow-transform);
color: var(--accent);
font-weight: 500;
}
/* Big numeric callouts — eames keeps them in display family but mixed-case */
[data-brand-theme="eames"] .num,
[data-brand-theme="eames"] .stat-num {
font-family: var(--font-display);
font-weight: 800;
font-size: 80px;
line-height: 0.9;
letter-spacing: -0.04em;
font-variation-settings: "opsz" 96;
color: var(--accent);
font-feature-settings: "lnum";
}