/* =========================================================
Theme variants — soula.ge
Each theme redefines tokens only; layout and structure stay in
styles.css. `data-theme` lives on , set before first paint by
the inline script in index.html so there is no flash of the default.
No theme attribute = the original cream/terracotta monograph.
========================================================= */
/* ---------------------------------------------------------
Graphite — cool near-white paper, graphite ink, ultramarine
Fraunces × Newsreader × IBM Plex Mono
--------------------------------------------------------- */
[data-theme="graphite"] {
--paper: oklch(0.972 0.002 265);
--paper-2: oklch(0.948 0.003 265);
--paper-3: oklch(0.920 0.004 265);
--ink: oklch(0.200 0.014 265);
--ink-2: oklch(0.440 0.012 265);
--muted: oklch(0.600 0.010 265);
--faint: oklch(0.740 0.008 265);
--hairline: oklch(0.875 0.006 265);
--hairline-strong: oklch(0.790 0.008 265);
--accent: oklch(0.450 0.155 265);
--accent-2: oklch(0.570 0.155 265);
--accent-soft: oklch(0.450 0.155 265 / 0.08);
--display: 'Fraunces', 'Instrument Serif', Georgia, serif;
--body: 'Newsreader', 'Source Serif 4', Georgia, serif;
--mono: 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;
/* Fraunces runs wider than Instrument Serif — pull the display sizes
back a notch and tighten tracking so the big lines still hold */
--fs-hero: clamp(58px, 9vw, 118px);
--fs-contact: clamp(48px, 7.4vw, 118px);
--fs-section: clamp(34px, 4.6vw, 58px);
--fs-case: clamp(30px, 3.7vw, 44px);
--fs-lede: clamp(21px, 2.4vw, 30px);
--fs-curr-lede: clamp(19px, 2vw, 24px);
--fs-practice-lede: clamp(21px, 2.2vw, 26px);
--fs-principle: clamp(23px, 2.2vw, 28px);
--fs-role-now: 26px;
--fs-log-role: 21px;
--fs-practice-name: 24px;
/* Newsreader sets a touch smaller than Source Serif at the same px */
--fs-body: 17.5px;
--ls-hero: -0.032em;
--ls-display: -0.022em;
}
[data-theme="graphite"] body { font-optical-sizing: auto; }
/* ---------------------------------------------------------
Bone — neutral bone paper, near-black ink, deep forest
Bodoni Moda × Spectral × IBM Plex Mono
--------------------------------------------------------- */
[data-theme="bone"] {
--paper: oklch(0.963 0.004 120);
--paper-2: oklch(0.941 0.005 120);
--paper-3: oklch(0.915 0.006 120);
--ink: oklch(0.175 0.014 150);
--ink-2: oklch(0.420 0.014 150);
--muted: oklch(0.585 0.010 150);
--faint: oklch(0.730 0.008 150);
--hairline: oklch(0.865 0.008 140);
--hairline-strong: oklch(0.780 0.010 140);
--accent: oklch(0.420 0.085 155);
--accent-2: oklch(0.530 0.095 155);
--accent-soft: oklch(0.420 0.085 155 / 0.09);
--display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
--body: 'Spectral', 'Source Serif 4', Georgia, serif;
--mono: 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;
/* a small-x-height didone: more size, and weight 500 below ~50px so
the thin strokes survive on screen */
--fs-hero: clamp(64px, 10vw, 136px);
--fs-contact: clamp(52px, 8vw, 136px);
--fs-section: clamp(38px, 5.2vw, 66px);
--fs-case: clamp(32px, 3.9vw, 46px);
--fs-lede: clamp(22px, 2.3vw, 30px);
--fs-practice-lede: clamp(23px, 2.5vw, 29px);
--fs-principle: clamp(25px, 2.5vw, 31px);
--fs-role-now: 29px;
--fs-log-role: 23px;
--fs-practice-name: 27px;
--fs-ko: 34px;
--fs-pull: 23px;
--wt-hero: 500;
--wt-display: 500;
--ls-hero: -0.018em;
--ls-display: -0.012em;
}
[data-theme="bone"] body { font-optical-sizing: auto; }
[data-theme="bone"] .opening-lede { line-height: 1.3; }
/* ---------------------------------------------------------
Slate — light slate paper, blue-black ink, oxblood
Instrument Sans (display) × Literata (body) × IBM Plex Mono
--------------------------------------------------------- */
[data-theme="slate"] {
--paper: oklch(0.966 0.004 250);
--paper-2: oklch(0.942 0.005 250);
--paper-3: oklch(0.915 0.006 250);
--ink: oklch(0.185 0.018 265);
--ink-2: oklch(0.430 0.014 265);
--muted: oklch(0.590 0.010 265);
--faint: oklch(0.735 0.008 265);
--hairline: oklch(0.870 0.007 265);
--hairline-strong: oklch(0.785 0.009 265);
--accent: oklch(0.420 0.140 20);
--accent-2: oklch(0.530 0.160 20);
--accent-soft: oklch(0.420 0.140 20 / 0.08);
--display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
--body: 'Literata', 'Source Serif 4', Georgia, serif;
--mono: 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;
/* a grotesque needs weight and tight tracking to carry display sizes */
--fs-hero: clamp(58px, 9vw, 120px);
--fs-contact: clamp(48px, 7.4vw, 120px);
--fs-section: clamp(34px, 4.6vw, 58px);
--fs-case: clamp(30px, 3.7vw, 44px);
--fs-lede: clamp(21px, 2.4vw, 29px);
--fs-curr-lede: clamp(19px, 2vw, 24px);
--fs-practice-lede: clamp(20px, 2.1vw, 25px);
--fs-principle: clamp(22px, 2.2vw, 27px);
--fs-role-now: 25px;
--fs-log-role: 20px;
--fs-practice-name: 23px;
/* Literata sets large; ease the body copy down a hair */
--fs-body: 16.5px;
--fs-principle-body: 15.5px;
--wt-hero: 600;
--wt-display: 500;
--ls-hero: -0.045em;
--ls-display: -0.035em;
}
[data-theme="slate"] body { font-optical-sizing: auto; }
[data-theme="slate"] .opening-name,
[data-theme="slate"] .contact-headline { line-height: 0.92; }
[data-theme="slate"] .opening-lede { line-height: 1.3; letter-spacing: -0.022em; }
/* Italic accents stay serif — an oblique grotesque reads as a glitch,
and the serif/sans contrast is the point of this theme. */
[data-theme="slate"] .opening-name em,
[data-theme="slate"] .contact-headline em,
[data-theme="slate"] .section-title em,
[data-theme="slate"] .case-title em,
[data-theme="slate"] .opening-lede em,
[data-theme="slate"] .practice-lede em,
[data-theme="slate"] .principle h3 em,
[data-theme="slate"] .curr-body p:first-child em,
[data-theme="slate"] .curr-outcomes .ko,
[data-theme="slate"] .case-body .pull,
[data-theme="slate"] .colophon em {
font-family: var(--body);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
/* ---------------------------------------------------------
Paper grain retint — the base grain is warm; the cool themes
need a neutral one or the tint fights the palette
--------------------------------------------------------- */
[data-theme="graphite"] .paper-grain,
[data-theme="slate"] .paper-grain {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.45;
}
[data-theme="bone"] .paper-grain {
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.42;
}