/* =============================================================================
EARTHSEED — Design Tokens (v2.0 · Recalibrated · June 2026)
=============================================================================
A corrective pass on Forge. Light in spirit, not just luminance.
- One confident accent (cobalt) + one quiet family member (teal).
- Text lifted off near-black toward readable graphite.
- Tinted surfaces reserved for emphasis, not used as a default texture.
Family resemblance to Lazana OS / Aqualith — the public front porch of that house.
Import fonts in your HTML :
Type roles:
- Sentient — PRIMARY. Display & body, the system voice. Light 300 → Bold 700.
- Erode — ALTERNATIVE. Print materials (extra texture reads well on paper).
- Quilon — EMPHASIS. Call-outs, marketing, slide headlines (held in reserve).
- DM Mono — SYSTEM. Labels, captions, tags, code, the Process Log.
============================================================================= */
:root {
/* ─── Backgrounds ─────────────────────────────────────────────────── */
--color-bg: #F4F1EC; /* warm white page */
--color-surface: #FFFFFF; /* cards, modals, panels */
--color-surface-2: #FAF8F4; /* subtle raised / nested */
/* ─── Text (lifted off Forge's #140806) ──────────────────────────── */
--color-text: #181C1F; /* graphite — body & headings */
--color-sub: #555D65; /* secondary copy */
--color-muted: #8A949E; /* labels, captions, placeholders */
--color-disabled: #B4BCC4; /* disabled */
--color-inverse: #FFFFFF; /* on accent fills */
/* ─── Accent — one confident hue (Lazana cobalt) ──────────────────── */
--color-accent: #0369A1; /* primary brand accent */
--color-accent-dim: #025682; /* hover / pressed */
--color-accent-glow: rgba(3, 105, 161, 0.16);
--color-accent-soft: rgba(3, 105, 161, 0.07); /* emphasis surface ONLY */
/* ─── Supporting accent — quiet family member ─────────────────────── */
--color-teal: #237870;
--color-teal-dim: #1A5E58;
--color-teal-soft: rgba(35, 120, 112, 0.09); /* emphasis surface ONLY */
/* ─── Semantic — desaturated, quiet supporting tones ──────────────── */
--color-success: #2E7D5B; /* muted green */
--color-warning: #B07A2E; /* muted copper-amber */
--color-error: #B4453C; /* muted brick */
/* ─── Borders ─────────────────────────────────────────────────────── */
--color-border: rgba(24, 28, 31, 0.10); /* hairline */
--color-border-strong: rgba(24, 28, 31, 0.16); /* inputs, dividers */
--color-border-focus: #0369A1;
/* ─── Typography ──────────────────────────────────────────────────── */
--font-display: 'Sentient', serif; /* primary — display & body */
--font-print: 'Erode', serif; /* alternative — print materials */
--font-emphasis: 'Quilon', sans-serif; /* emphasis — marketing & slides */
--font-mono: 'DM Mono', ui-monospace, monospace; /* system — labels & code */
/* ─── Type scale ───────────────────────────────────────────────────── */
--text-xs: 10px;
--text-sm: 12px;
--text-base: 14px;
--text-md: 16px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
/* ─── Spacing ─────────────────────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ─── Radius ──────────────────────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-pill: 100px;
/* ─── Shadows ─────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 3px rgba(24,28,31,0.05), 0 1px 2px rgba(24,28,31,0.04);
--shadow-md: 0 2px 8px rgba(24,28,31,0.06), 0 8px 24px rgba(24,28,31,0.05);
--shadow-lg: 0 4px 16px rgba(24,28,31,0.08), 0 16px 48px rgba(24,28,31,0.06);
/* ─── Layout ──────────────────────────────────────────────────────── */
--max-width: 1080px;
--content-width: 720px;
--padding-page: clamp(24px, 5vw, 40px);
}