/* ============================================================
tokens.css — RGV AI Coding Bootcamp design tokens
============================================================
Import before any stylesheet.
All values are CSS custom properties on :root.
============================================================ */
:root {
/* ── Color: Ink (text) ─────────────────────────────────────
--ink Primary text. Headings, body, nav. Dark warm tone.
--ink-2 Secondary text. Descriptions, labels, meta.
--ink-3 Muted text. Eyebrows, timestamps, placeholders.
*/
--ink: oklch(18% 0.035 82);
--ink-2: oklch(32% 0.045 80);
--ink-3: oklch(54% 0.04 80);
/* ── Color: Surfaces ───────────────────────────────────────
--paper Default page background. Warm paper.
--paper-2 Raised / tinted band. Slightly lifted.
--paper-soft Alias for --paper-2.
--paper-deep Deepest warm surface. Cards, FAQ band, tinted sections.
--line Border / divider color.
--night Dark section background. Manifesto, footer. Dark teal-black.
*/
--paper: oklch(94% 0.035 78);
--paper-2: oklch(91% 0.045 78);
--paper-soft: oklch(91% 0.045 78);
--paper-deep: oklch(84% 0.06 73);
--line: oklch(73% 0.055 77);
--night: oklch(17% 0.035 185);
/* ── Color: Brand Accents ──────────────────────────────────
--accent Primary CTA, highlights, links. Gold.
--accent-deep Hover states, pressed CTA.
--river Secondary accent — use sparingly.
One or two touches only (footer coord, etc).
*/
--accent: oklch(68% 0.145 74);
--accent-deep: oklch(76% 0.165 80);
--river: oklch(64% 0.19 43);
/* ── Typography ────────────────────────────────────────────
--font-display Headings, brand wordmark, large UI labels.
Mechanical geometric — Chakra Petch.
--font-body Body copy, nav, buttons, form inputs.
Neutral readable — Inter.
--font-mono Eyebrows, section indices, coordinate labels,
technical meta strips — Azeret Mono.
--font-serif Figcaptions, pull-quotes, editorial accents.
Warm brush — Zen Old Mincho.
Google Fonts link (add to before stylesheet):
*/
--font-display: 'Chakra Petch', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', monospace;
--font-serif: 'Zen Old Mincho', serif;
/* ── Type Scale ────────────────────────────────────────────
Hero headline: clamp(48px, 8.5vw, 104px) / weight 700 / tracking -0.04em
Section title: clamp(32px, 4vw, 46px) / weight 700
Statement: clamp(26px, 3vw, 36px) / weight 600
Card title: 28px / weight 700
Body large: 18–19px / weight 400
Body base: 15.5–16px / weight 400
Body small: 14–14.5px / weight 400
Mono label: 11–12px / weight 400–500 / tracking 0.1–0.14em / uppercase
*/
/* ── Spacing ───────────────────────────────────────────────
Section vertical padding: 96px (band), 72px (band-sm)
Max content width: 1120px
Content horizontal gutter: 48px (desktop) / 32px (tablet) / 24px (mobile)
Card gap: 20px
Card padding: 36px
*/
/* ── Border Radius ─────────────────────────────────────────
Buttons (pill): 999px
Icon badges: 8px
Brand mark: 7px
*/
/* ── Shadows ───────────────────────────────────────────────
CTA button: 0 4px 16px oklch(68% 0.145 74 / .3)
CTA hover: 0 8px 24px oklch(68% 0.145 74 / .38)
Ambient: 0 28px 90px oklch(24% 0.05 75 / .22)
*/
--shadow: oklch(24% 0.05 75 / 0.22);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
/* ── Breakpoints ───────────────────────────────────────────
Tablet: max-width 1024px
Mobile: max-width 720px
*/
}