/* ============================================================
WARM SCHOLAR — colors_and_type.css
Source of truth for color + type tokens.
A warm-editorial system: warm neutrals, two earth accents
(terracotta + olive), one action per view, hairline borders
over shadows. Independent identity (not UGA-branded).
============================================================ */
/* ---- Font loading (Google Fonts) ----
Add to :
Newsreader alternate: swap the Fraunces query for
family=Newsreader:opsz,wght@6..72,400;6..72,500 and update --font-display.
*/
:root {
/* ---------- COLOR · warm neutrals (the base) ---------- */
--paper:#FBF4E7; /* page background (web/app) */
--surface:#FFFDF7; /* cards, panels, projector-safe slide bg */
--surface-raised:#FBF7EE; /* code blocks, nested panels */
--line:#EDE2CE; /* hairline borders, dividers */
--border-strong:#DDCBB2; /* emphasis borders, ghost buttons */
--ink:#29201A; /* primary text, headlines */
--body:#6E6051; /* secondary / paragraph text */
--muted:#9C8C74; /* metadata, captions, placeholders */
/* ---------- COLOR · earth accents ---------- */
--accent:#B66A47; /* terracotta — decorative only, small doses */
--accent-deep:#8A3F22; /* sienna — buttons, links, accent text (workhorse) */
--accent-tint:#F4E6DB; /* terracotta-tint fill for badges */
--secondary:#5A6B47; /* olive — tags, secondary highlights */
--secondary-dark:#3B4A2C; /* text on olive tint */
--secondary-tint:#ECEEE0; /* olive-tint fill */
/* ---------- COLOR · semantic (app states) ---------- */
--success:#5A6B47; --success-tint:#ECEEE0;
--warning:#9A6A14; --warning-tint:#F6EAD2;
--danger:#9E2B2B; --danger-tint:#F6E0DD;
--info:#3C6478; --info-tint:#E2EAEE;
/* ---------- TYPE · families ---------- */
--font-display:"Fraunces", Georgia, serif; /* headlines only */
--font-sans:"IBM Plex Sans", system-ui, sans-serif; /* body, UI, labels */
--font-mono:"IBM Plex Mono", ui-monospace, monospace;
/* ---------- TYPE · web/app scale (16px base) ---------- */
--fs-display:40px; --lh-display:1.1; /* hero */
--fs-h1:32px; --lh-h1:1.15;
--fs-h2:24px; --lh-h2:1.2;
--fs-h3:19px; --lh-h3:1.3; /* editorial */
--fs-label:14px; --lh-label:1.3; /* section label (UI) */
--fs-body-lg:18px; --lh-body:1.6;
--fs-body:16px;
--fs-body-sm:14px; --lh-body-sm:1.5;
--fs-caption:12.5px;--lh-caption:1.4;
--fs-eyebrow:11.5px;
--fs-code:13px; --lh-code:1.6;
--tracking-eyebrow:0.06em;
/* ---------- SPACING (4px base) ---------- */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
/* ---------- RADIUS ---------- */
--radius-sm:6px; /* badges, tags */
--radius-md:8px; /* controls, inputs */
--radius-lg:12px; /* cards */
--radius-xl:16px; /* large panels */
/* ---------- ELEVATION (reserve for menus/modals only) ---------- */
--shadow-menu:0 4px 16px rgba(41,32,26,0.08);
/* ---------- BORDERS ---------- */
--border:1px solid var(--line);
--border-emphasis:1px solid var(--border-strong);
}
[data-theme="dark"] {
--paper:#1E1813; --surface:#28201A; --surface-raised:#2F2620;
--line:#3D332A; --border-strong:#4D4035;
--ink:#F3EADB; --body:#C8B9A6; --muted:#998A76;
--accent:#D08A5F; --accent-deep:#C97A4E; --accent-tint:#3A2A20;
--secondary:#97A877; --secondary-dark:#B6C49A; --secondary-tint:#2E3623;
--success:#97A877; --success-tint:#2E3623;
--warning:#D9A445; --warning-tint:#3A2E14;
--danger:#E07A6E; --danger-tint:#3A2120;
--info:#7FAEC0; --info-tint:#23323A;
--shadow-menu:0 4px 16px rgba(0,0,0,0.4);
}
/* ============================================================
SEMANTIC ELEMENT DEFAULTS
Opt in by using these classes/elements; or copy into your base.
============================================================ */
body {
background: var(--paper);
color: var(--body);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 500; /* 400/500 only — never 600/700 */
color: var(--ink);
letter-spacing: -0.01em;
text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-display); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
p { text-wrap: pretty; }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.label {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-label);
line-height: var(--lh-label);
color: var(--ink);
}
.eyebrow {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-eyebrow);
letter-spacing: var(--tracking-eyebrow);
text-transform: none; /* sentence case — never all caps */
color: var(--accent-deep);
}
code, pre, .mono {
font-family: var(--font-mono);
font-size: var(--fs-code);
line-height: var(--lh-code);
}
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }