/* ══════════════════════════════════════════════════════════════════════
ARAYA BRAND TOKENS — the canonical palette. One source, every page.
══════════════════════════════════════════════════════════════════════
Derived from Commander's own work: the Preble Painting van wrap —
GRAPHITE body + a bluish-TEAL hero + grass-GREEN accent + white. ARAYA OS
doesn't replace that brand, it carries it forward. Every rebuilt page pulls
these vars; NEVER hardcode hex (that's how Pulse drifted purple, cr-bar
amber, the old tokens one gold, the brand doc another). Change a value here
→ every surface repaints. This is the CSS-var contract the page rebuild
stands on. Skin system (future) resolves ON TOP of these defaults.
Usage: (or @import)
Built: 2026-07-13 · Session 346 · palette locked from the van (darker teal).
S348 (2026-07-14, Commander-APPROVED): typography locked — display = Space
Grotesk, body = Inter. Logo locked — Monogram "A" (teal A + green wave),
final vectors at /images/logos/araya-mark.svg + /images/logos/araya-horizontal.svg
(canonical source: Desktop/BRAND_LOGOS/FINAL/ — deploy copies live in /images/logos/).
PERF NOTE: for faster first paint, pages may skip this @import and instead put
in :
The @import below is the safety net so ANY page linking this file gets the fonts.
══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
/* ── TYPOGRAPHY — locked S348 ── */
--font-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* headings, nav wordmark, buttons, stat numbers */
--font-body: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* body copy, captions, forms */
/* ── LOGO — Monogram "A" (locked S348) ──
mark: /images/logos/araya-mark.svg (square, favicon/avatar)
horizontal: /images/logos/araya-horizontal.svg (lockup w/ wordmark)
Use as or inline the SVG; var below for CSS backgrounds. */
--brand-logo: url('/images/logos/araya-mark.svg');
--brand-logo-horizontal: url('/images/logos/araya-horizontal.svg');
/* ── GRAPHITE — the base (~60%) ── */
--araya-graphite: #0d0f13; /* app/page background */
--araya-surface: #12141a; /* cards, sheets */
--araya-surface-hi: #1a1c24; /* raised surface */
--araya-line: rgba(255,255,255,.08); /* hairline borders */
/* ── TEAL — the hero (~30%) — ARAYA's identity color ── */
--araya-teal: #0e7d90; /* primary: headings punch, active state, her listening */
--araya-teal-hi: #14a0b8; /* hover / glow-bright */
--araya-teal-lo: #0a5c6b; /* pressed / gradient-dark */
--araya-teal-glow: rgba(14,125,144,.55);
/* ── GREEN — the accent (~10%) + ARAYA's "alive / online / speaking" ── */
--araya-green: #7ac043; /* van green: CTAs highlight, checkmarks, her speaking */
--araya-green-hi: #8fd257;
--araya-green-glow: rgba(122,192,67,.5);
/* ── secondary blue (van electric) — sparing use only ── */
--araya-blue: #1f9be6;
/* ── ink & signal ── */
--araya-text: #eef1f6; /* body copy */
--araya-dim: #9aa3b2; /* sub-text, captions */
--araya-danger: #e74c3c; /* errors only */
/* ── back-compat aliases so existing components can migrate gradually ── */
--accent: var(--araya-teal);
--bg: var(--araya-graphite);
--text: var(--araya-text);
--dim: var(--araya-dim);
}