/* ─────────────────────────────────────────────────────────────
* Nous — Design Tokens
* The single source of truth for the Nous visual language.
*
* Every HTML page in this system must this file.
* :root must not be redeclared anywhere else.
*
* Fonts are loaded via in each HTML ,
* not @import'd here — @import inside CSS blocks parallel fetches.
*
* Edition I · Of Light & Stone
* ───────────────────────────────────────────────────────────── */
:root {
/* ── Light: Marble & Limestone ──────────────────────── */
--nous-paper: #fdfcf9; /* limestone, a whisper of warmth */
--nous-paper-2: #f6f4ee; /* soft marble */
--nous-paper-3: #ece9e0; /* deeper sandstone */
--nous-ink: #1a1814; /* carbon black, barely warm */
--nous-ink-2: #3a362e; /* secondary text */
--nous-ink-3: #6f6b62; /* muted text */
--nous-ink-4: #a4a198; /* faint, metadata */
--nous-rule: #dedacd; /* hairline */
--nous-rule-soft: #ece9dd;
/* ── Accents, drawn from the Aegean and the agora ───── */
--nous-aegean: #3d6a7a; /* deep sea-cliff blue */
--nous-aegean-2: #6a91a0; /* sun-bleached blue */
--nous-terracotta: #a8553a; /* red-figure pottery */
--nous-olive: #6e7542; /* olive branch */
--nous-ochre: #b5893b; /* saffron / ochre */
--nous-wine: #6e2f3a; /* Homeric wine-dark */
/* ── Syntax (light) ─────────────────────────────────── */
--syn-bg: #f8f6ee;
--syn-fg: #2a2620;
--syn-comment: #9a9081;
--syn-keyword: #6e2f3a;
--syn-string: #6e7542;
--syn-number: #a8553a;
--syn-func: #3d6a7a;
--syn-punct: #6b6254;
/* ── Fonts ──────────────────────────────────────────── *
* Loaded via in HTML . CJK fallbacks included. */
--ff-serif: 'EB Garamond', 'Source Han Serif SC', 'Noto Serif SC', 'Noto Serif CJK SC', 'Songti SC', '宋体-简', SimSun, Georgia, serif;
--ff-display: 'Cormorant Garamond', 'EB Garamond', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', Georgia, serif;
--ff-sc: 'Cormorant SC', 'Cormorant Garamond', 'Source Han Serif SC', serif;
--ff-greek: 'GFS Didot', 'EB Garamond', 'Source Han Serif SC', serif;
--ff-mono: 'JetBrains Mono', 'SF Mono', Menlo, 'Source Han Mono SC', monospace;
--ff-cjk: 'Noto Serif SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Songti SC', '宋体-简', SimSun, serif;
--ff-cjk-sans: 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', '苹方-简', 'Microsoft YaHei', sans-serif;
/* ── Type scale ─────────────────────────────────────── */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 18px;
--fs-md: 20px;
--fs-lg: 24px;
--fs-xl: 32px;
--fs-2xl: 44px;
--fs-3xl: 64px;
--fs-4xl: 96px;
--fs-5xl: 144px;
--lh-tight: 1.18;
--lh-body: 1.62;
--lh-loose: 1.85;
/* ── Measure (reading width) ────────────────────────── */
--measure: 64ch;
--measure-wide: 78ch;
/* ── Space scale ────────────────────────────────────── */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 144px;
/* ── Motion (reading, not performance) ──────────────── *
* Durations tuned for editorial calm, not SaaS urgency. */
--dur-fast: 140ms; /* hover states, link underlines */
--dur-base: 240ms; /* page-to-page transitions, theme swap */
--dur-slow: 400ms; /* footnote popover, dialog fade */
--ease-out: cubic-bezier(0.2, 0, 0, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* ── Breakpoints ────────────────────────────────────── *
* Use in @media queries; CSS custom properties don't work in
* media conditions directly, so these are documentation-first. */
--bp-narrow: 640px; /* phone */
--bp-wide: 1024px; /* tablet / narrow laptop */
--bp-full: 1280px; /* comfortable desktop */
}
/* ── Dark: Amphora, lamplight ─────────────────────────── */
[data-mode="dark"] {
--nous-paper: #15140f; /* soot, lamp-darkened */
--nous-paper-2: #1d1c16;
--nous-paper-3: #272519;
--nous-ink: #ece3cf; /* candle-warm off-white */
--nous-ink-2: #cfc4ab;
--nous-ink-3: #948b73;
--nous-ink-4: #5e5844;
--nous-rule: #3a362a;
--nous-rule-soft: #282518;
--nous-aegean: #8fb4c2;
--nous-aegean-2: #6a91a0;
--nous-terracotta: #d07e62;
--nous-olive: #a5ae74;
--nous-ochre: #dcac58;
--nous-wine: #c08b97;
--syn-bg: #1a1912;
--syn-fg: #ece3cf;
--syn-comment: #6b6452;
--syn-keyword: #c08b97;
--syn-string: #a5ae74;
--syn-number: #d07e62;
--syn-func: #8fb4c2;
--syn-punct: #948b73;
}
/* ── Reduced motion ───────────────────────────────────── *
* Honor prefers-reduced-motion by collapsing durations. */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
}
}
/* ── Base reset ───────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--nous-paper);
color: var(--nous-ink);
font-family: var(--ff-serif);
font-size: var(--fs-base);
line-height: var(--lh-body);
font-feature-settings: "kern", "liga", "onum";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ── Paper texture (subtle, subtler in light) ─────────── */
.paper {
background:
radial-gradient(ellipse at 15% 10%, rgba(120,100,60,0.018), transparent 50%),
radial-gradient(ellipse at 85% 80%, rgba(60,80,100,0.014), transparent 55%),
var(--nous-paper);
}
[data-mode="dark"] .paper {
background:
radial-gradient(ellipse at 15% 10%, rgba(220,180,100,0.03), transparent 50%),
radial-gradient(ellipse at 85% 80%, rgba(160,200,220,0.02), transparent 55%),
var(--nous-paper);
}