/* ─────────────────────────────────────────────────────────────────────────
Realokate — Design Tokens (canonical)
Single source of truth for colors, type, space, radii, shadows, motion.
Imported by:
• website/index.html ←
• website/demo.html ←
• src/main.jsx ← import './tokens.css'
(Copies live at website/tokens.css and src/tokens.css. The canonical is
this file at repo root; sync copies when editing.)
This file uses the existing legacy token names (--coral, --teal, --yellow,
--ink, --bg, --s0..--s3, --t0..--t3, --fd, --fb, --r, --rl, --shadow, etc.)
so it's a drop-in replacement for the inline :root blocks being removed.
───────────────────────────────────────────────────────────────────────── */
:root {
/* ── Brand palette ── */
--coral: #E86B50; /* "Real", paw print, primary action, danger */
--teal: #3ECFB2; /* "Kate", AI, success */
--yellow: #F5C438; /* cube, airplane, warnings */
--ink: #1A1823; /* outlines, primary text, stamp shadow */
/* ── Tinted surfaces ── */
--coral-bg: #FEF0ED;
--teal-bg: #EAF9F5;
--yellow-bg: #FEF8E3;
--yellow-dk: #9A7200; /* readable text on yellow */
/* ── Alpha accents (from App.jsx) ── */
--g: var(--coral);
--g2: rgba(232, 107, 80, 0.12);
--g3: rgba(232, 107, 80, 0.06);
--b: var(--teal);
--b2: rgba( 62, 207, 178, 0.12);
--am: var(--yellow);
--am2: rgba(245, 196, 56, 0.14);
--re: var(--coral);
--re2: rgba(232, 107, 80, 0.12);
/* ── Surfaces ── */
--bg: #FAFAF8;
--s0: #FFFFFF;
--s1: #F5F3F0;
--s2: #EDE9E4;
--s3: #E0DBD4;
--card: var(--s0);
--bd: #C0BAD0;
--bd2: #A8A0BC;
--border: 2px solid var(--ink);
/* ── Text hierarchy ── */
--t0: #1A1823;
--t1: #3D3848;
--t2: #7C7591;
--t3: #C0BAD0;
/* ── Fonts ── */
--fd: 'Fredoka One', 'Nunito', system-ui, sans-serif;
--fb: 'Inter', system-ui, -apple-system, sans-serif;
--fc: ui-monospace, 'SF Mono', Menlo, monospace;
/* ── Radii ── */
--r: 12px;
--rl: 18px;
--rx: 24px;
--pill: 9999px;
/* ── Shadows — stamp shadow is the brand signature ── */
--shadow-sm: 2px 2px 0 var(--ink);
--shadow: 3px 3px 0 var(--ink);
--shadow-lg: 5px 5px 0 var(--ink);
--shadow-xl: 8px 8px 0 var(--ink);
--shadow-color: 3px 3px 0; /* demo.html appends color */
/* ── Space (4px base grid) ── */
--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;
--space-20: 80px;
--space-24: 96px;
/* ── Fluid type scale ── */
--type-xs: clamp(12px, 0.75rem + 0.1vw, 13px);
--type-sm: clamp(14px, 0.875rem + 0.1vw, 15px);
--type-md: 16px;
--type-lg: clamp(18px, 1.125rem + 0.2vw, 20px);
--type-xl: clamp(22px, 1.25rem + 0.4vw, 28px);
--type-2xl: clamp(28px, 1.5rem + 0.8vw, 36px);
--type-3xl: clamp(36px, 2rem + 1.5vw, 56px);
--type-4xl: clamp(48px, 2.5rem + 2.5vw, 80px);
/* ── Motion ── */
--dur-fast: 120ms;
--dur-med: 200ms;
--dur-slow: 360ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* ── Z-index scale ── */
--z-base: 1;
--z-sticky: 100;
--z-overlay: 500;
--z-modal: 1000;
--z-toast: 2000;
}
/* ─────────────────────────────────────────────────────────────────────────
Dark mode — apply class="dark" on or .
───────────────────────────────────────────────────────────────────────── */
.dark {
--bg: #121018;
--s0: #1C1828;
--s1: #241F32;
--s2: #2C273C;
--s3: #342F48;
--card: var(--s0);
--bd: #3D3858;
--bd2: #4A4568;
--t0: #F5F3F0;
--t1: #C0BAD0;
--t2: #7C7591;
--t3: #4A4568;
--coral: #FF8A6E; /* boosted for contrast */
--teal: #4FDFC4;
--yellow: #F5C438;
--shadow-sm: 2px 2px 0 #000;
--shadow: 3px 3px 0 #000;
--shadow-lg: 5px 5px 0 #000;
--shadow-xl: 8px 8px 0 #000;
}