/* ============================================================
Julian Waters-Lynch — Mothership Tokens
colors_and_type.css · v0.2 (reconciled brief, May 2026)
------------------------------------------------------------
Paper-and-ink scholar-builder identity. Six-color palette:
paper · ink · forest · bronze · oxblood · olive · graphite
Replaces the earlier sky-blue iteration. Restraint over
ornament; British spelling; sentence-case.
Import order:
============================================================ */
:root {
/* ── Paper · the warm off-white substrate ─────────────────── */
--paper: #f4efe4; /* page · warm cream */
--paper-2: #ede6d4; /* shelf · slightly deeper */
--paper-3: #e6dcc4; /* deepest paper */
--card: #fbf7ec; /* card / surface */
--card-2: #ffffff; /* over-paper white */
/* ── Ink · brown-black, never cool grey ───────────────────── */
--ink: #1b1612; /* primary text */
--ink-2: #3d352c; /* secondary text */
--ink-3: #72665a; /* tertiary / metadata */
--ink-soft: #a89e89; /* muted / placeholder */
/* ── Rules · paper-toned, never blue ──────────────────────── */
--rule: #2a2320; /* hairline · heavy */
--rule-1: #cbbfa6; /* hairline · regular */
--rule-2: #ddd2b8; /* hairline · soft */
/* ── Forest · the primary brand accent (was evergreen) ────── */
--forest: #2f5d4a; /* primary */
--forest-deep: #1f4435; /* hover / pressed */
--forest-2: #3d6b58; /* secondary tint */
--forest-pale: #d8e3dc; /* fill / chip bg */
--forest-wash: #e8f0eb; /* lightest wash */
/* ── Bronze · warmth; replaces ochre/sky ──────────────────── */
--bronze: #8a5a1c; /* primary */
--bronze-deep: #6b4414; /* hover */
--bronze-2: #a87539; /* secondary tint */
--bronze-pale: #ead9b8; /* chip bg */
--bronze-wash: #f2e7cd; /* lightest wash */
/* ── Oxblood · editorial signal (JIA-aligned) ─────────────── */
--oxblood: #8a2b1f; /* primary signal */
--oxblood-deep: #6b1f15;
--oxblood-2: #b24230; /* secondary tint */
--oxblood-pale: #f4dfd5; /* chip bg */
/* ── Olive · alt secondary; calmer than bronze ────────────── */
--olive: #5a6b2a; /* primary */
--olive-deep: #404e1c;
--olive-pale: #e3e6cd;
/* ── Graphite · cool dark; for code & structural marks ────── */
--graphite: #2c3338;
--graphite-2: #4a5158;
--graphite-pale:#dde2e5;
/* ── Semantic state ───────────────────────────────────────── */
--ok: var(--forest);
--ok-bg: var(--forest-wash);
--warn: var(--bronze-deep);
--warn-bg: var(--bronze-wash);
--danger: var(--oxblood);
--danger-bg: var(--oxblood-pale);
--info: var(--graphite);
--info-bg: var(--graphite-pale);
/* ── Product accent assignments ───────────────────────────── */
--p-arca: var(--bronze); /* deep work — bronze/parchment */
--p-jia: var(--oxblood); /* editorial red */
--p-fieldwork: var(--olive); /* qualitative — olive on graphite */
--p-compact: var(--graphite); /* founder charters — civic graphite */
--p-compact-2: var(--bronze); /* charter accent */
--p-diwan: var(--graphite-2); /* strategy — restrained */
--p-fatoorafi: #2a5a8a; /* market-facing; held separate */
/* ── Typography — families ────────────────────────────────── */
--font-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", "Charter", Georgia, serif;
--font-sans: "Inter", "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
/* ── Type scale — editorial-first ─────────────────────────── */
--fs-xs: 0.68rem;
--fs-sm: 0.74rem;
--fs-base: 0.86rem;
--fs-md: 0.94rem;
--fs-lg: 1.04rem;
--fs-h3: 1.32rem;
--fs-h2: 1.78rem;
--fs-h1: 2.6rem;
--fs-display: clamp(2.6rem, 5.2vw, 4.6rem);
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-tight: 1.05;
--lh-display: 1.1;
--lh-snug: 1.35;
--lh-body: 1.6;
--lh-relaxed: 1.7;
--ls-display: -0.022em;
--ls-heading: -0.014em;
--ls-eyebrow: 0.18em;
--ls-mono: 0.06em;
--ls-wordmark: 0.32em;
/* ── Spacing · 4-based ────────────────────────────────────── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
--sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 128px;
/* ── Radii · restrained ───────────────────────────────────── */
--r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-pill: 999px;
/* ── Elevation · flat by default ──────────────────────────── */
--shadow-none: none;
--shadow-card: 0 1px 0 var(--rule-2);
--shadow-lift: 0 1px 0 var(--rule-2), 0 18px 36px rgba(27,22,18,0.06);
/* ── Motion ───────────────────────────────────────────────── */
--ease-std: cubic-bezier(.4,0,.2,1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* ── Hero wash · paper with forest+bronze tint ────────────── */
--wash-hero:
radial-gradient(900px 500px at 8% -20%, var(--forest-wash) 0%, transparent 62%),
radial-gradient(800px 460px at 105% 10%, var(--bronze-wash) 0%, transparent 60%),
var(--paper);
}
/* ============================================================
Base typography
============================================================ */
html { font-size: 15.5px; }
body {
font-family: var(--font-serif);
color: var(--ink);
background: var(--paper);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.sans { font-family: var(--font-sans); }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-mono); }
.t-eyebrow, .eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
color: var(--ink-3);
}
.t-eyebrow.signal, .eyebrow.signal { color: var(--oxblood); }
.t-wordmark {
font-family: var(--font-serif);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wordmark);
text-transform: uppercase;
font-feature-settings: "smcp", "c2sc";
}
h1, .t-h1 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-display); margin: 0; }
h2, .t-h2 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h2); letter-spacing: var(--ls-heading); line-height: 1.18; margin: 0; }
h3, .t-h3 { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h3); letter-spacing: var(--ls-heading); margin: 0; }
.t-display { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-display); letter-spacing: var(--ls-display); line-height: var(--lh-display); }
p, .t-p { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--ink); margin: 0; }
.t-lead { font-size: 1.18rem; line-height: 1.65; color: var(--ink-2); font-style: italic; }
.t-label, .field-label {
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: var(--fw-medium);
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-3);
}
.t-caption { font-size: var(--fs-sm); color: var(--ink-3); }
.t-rule { border-top: 1px solid var(--rule-1); }
.t-rule-strong { border-top: 1px solid var(--rule); }
.t-rule-double { border-top: 3px double var(--rule); }
/* Inline ink-marks · sparing oxblood for marginalia and signal */
.marginalia {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--fs-base);
color: var(--oxblood);
}
.folio {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-3);
}