/* ============================================================= THE VACATION CODE — SHARED DESIGN TOKENS Single source of truth for primitives shared across: - assets/css/admin.css (dark admin panel) - assets/css/app.css (light public site) - mobile app (Flutter ThemeData) HOW TO USE Import this file before admin.css or app.css: Flutter mapping lives in: mobile/lib/theme/tokens.dart ============================================================= */ :root { /* ── Semantic status colors ───────────────────────────────── Shared between admin and public contexts. admin.css re-aliases to --admin-green / --admin-red etc. app.css uses --pos / --neg / --warn directly. */ --token-success: #3FA56B; --token-success-soft: rgba(63, 165, 107, 0.12); --token-warning: #f59e0b; --token-warning-soft: rgba(245, 158, 11, 0.12); --token-danger: #f43f5e; --token-danger-soft: rgba(244, 63, 94, 0.12); --token-info: #E5A93C; --token-info-soft: rgba(229, 169, 60, 0.12); /* ── Spacing scale ────────────────────────────────────────── 4px base unit. sp-N = N × 4px. Single definition here — admin.css and app.css no longer re-define these, eliminating the three-way duplication. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Type scale ───────────────────────────────────────────── Derived from the literal sizes in admin.css / app.css. Use --text-* instead of hardcoded font-size values. Flutter equivalent: TextTheme entries in tokens.dart. */ --text-2xs: 10px; /* badges, table headers, kicker labels */ --text-xs: 12px; /* supporting text, small metadata */ --text-sm: 13px; /* table body, secondary content */ --text-base: 15px; /* admin inputs, nav items */ --text-md: 16px; /* page body baseline */ --text-lg: 18px; /* sub-headings, dialog titles */ --text-xl: 20px; /* section headers */ --text-2xl: 24px; /* page titles */ --text-3xl: 28px; /* KPI stat values */ /* ── Border radius ────────────────────────────────────────── Unified 6-step scale for both surfaces. admin.css (--admin-radius-*) and app.css (--radius-*) now alias these tokens — no more drift between surfaces. */ --token-radius-sm: 8px; /* small inputs, tight chips */ --token-radius-md: 12px; /* admin base card radius */ --token-radius-lg: 16px; /* admin large; public base */ --token-radius-xl: 20px; /* admin dialog; large panel */ --token-radius-2xl: 24px; /* public large cards */ --token-radius-pill: 99px; /* tags, badges, toggles */ /* ── Motion — durations ───────────────────────────────────── Flutter: Duration(milliseconds: N) */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ── Motion — easing curves ───────────────────────────────── Promoted from comments to live CSS custom properties. Usage: transition: transform var(--duration-base) var(--ease-spring) Flutter: Curves.elasticOut / Curves.easeOutExpo / Curves.easeInOut */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy micro-interactions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* page transitions */ --ease-in-out: cubic-bezier(0.25, 0.8, 0.25, 1); /* layout shifts, sidebar */ /* ── Z-index scale ────────────────────────────────────────── Prevents z-index wars. Use these named layers everywhere. */ --z-base: 1; --z-dropdown: 100; --z-sticky: 110; --z-topbar: 120; --z-sidebar: 200; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; } /* ── Zone Color Map (admin navigation) ───────────────────────── Defines the 7 admin navigation zones. Each zone token block is set on the [data-zone="N"] element so descendants can use var(--zone-color), var(--zone-dark), etc. without repeating hex. Zone 1 · Home · Indigo #E5A93C Zone 2 · Pipeline · Orange #2E8553 Zone 3 · Catalog · Emerald #3FA56B Zone 4 · Revenue · Violet #8b5cf6 Zone 5 · People · Rose #f43f5e Zone 6 · Content · Flame #22c55e Zone 7 · System · Sky #8A9A86 */ /* ============================================================= WANDER — public storefront design system (conversion-first) Single namespace for ALL public-page styling. Added Phase 1. Rules: · --w-brand appears ONLY on actionable elements (CTA/links). · 3 radii, 3 shadows — nothing else on public pages. · New public CSS must use --w-* vars, never raw hex. ============================================================= */ :root { /* Brand & accents */ --w-brand: #2E8553; /* Primary Color: #2E8553 */ --w-brand-hover: #256E44; --w-brand-soft: rgba(46, 133, 83, 0.10); --w-secondary: #3FA56B; /* Secondary Color: #3FA56B */ --w-sun: #F97316; /* Accent Color: #F97316 */ --w-sun-soft: rgba(249, 115, 22, 0.14); /* Ink (text hierarchy) */ --w-ink: #0F172A; /* Primary Text: #0F172A */ --w-ink-2: #64748B; /* Secondary Text: #64748B */ --w-ink-3: #94A3B8; /* Surfaces */ --w-bg: #F8FAFC; /* Background: #F8FAFC */ --w-surface: #FFFFFF; --w-line: #E2E8F0; /* Border: #E2E8F0 */ /* Status (alias shared tokens) */ --w-ok: #10B981; /* Success: #10B981 */ --w-warn: #F97316; --w-danger: #EF4444; /* Shape */ --w-r-btn: 14px; /* Button radius: 14px */ --w-r-card: 20px; /* Card radius: 20px */ --w-r-input: 12px; /* Form radius: 12px */ --w-r-pill: 999px; /* Elevation */ --w-shadow-rest: 0 1px 3px rgba(15, 23, 42, 0.04); --w-shadow-raised: 0 8px 24px rgba(15, 23, 42, 0.08); --w-shadow-overlay: 0 16px 48px rgba(15, 23, 42, 0.16); /* Type */ --w-font: 'Inter', system-ui, -apple-system, sans-serif; --w-font-head: 'Outfit', sans-serif; --font-head: 'Outfit', sans-serif; --font-display: 'Outfit', sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; }