/** * Great Food Trail — Design Tokens * Single source of truth for all brand colors, semantic tokens, shadows, * spacing, and radii used throughout the application. * * EDITING GUIDE * ───────────── * 1. Change a brand palette value under "BRAND PALETTE" to update it everywhere. * 2. Change a semantic token under "SEMANTIC TOKENS" to shift the role it plays * without touching the raw palette. * 3. Do NOT put color values directly in styles.css — use var(--token-name) instead. * 4. Legacy aliases at the bottom preserve backward compatibility with older * var() references still present in styles.css. Remove them as those old * names are cleaned up over time. * * AESTHETIC GOAL * ────────────── * Modern interpretation of a 1950s roadside ice cream stand. * Warm · Nostalgic · Handcrafted · Premium but approachable · Mobile-first. * Dominant identity: Raspberry Red + Trail Teal on a Warm Cream base. */ :root { /* ══════════════════════════════════════════════ BRAND PALETTE Raw color constants. Reference via semantic tokens below — avoid using --brand-* directly in component styles. ══════════════════════════════════════════════ */ --brand-raspberry: #D8394D; /* Primary brand color */ --brand-teal: #189F99; /* Secondary brand color */ --brand-aqua: #82D5D0; /* Vintage Aqua — light teal highlight */ --brand-gold: #E4B289; /* Waffle Gold — badges, ratings, accents */ --brand-green: #839324; /* Market Green — success, check-ins */ --brand-evergreen: #135E3A; /* Evergreen — premium, nature, deep success */ --brand-brown: #71352B; /* Vintage Brown — shadow undertones, borders */ --brand-cream: #FDF5E9; /* Warm Cream — page background */ --brand-charcoal: #1E2322; /* Soft Charcoal — primary text */ /* ══════════════════════════════════════════════ SEMANTIC TOKENS — BACKGROUNDS ══════════════════════════════════════════════ */ --color-bg: #FDF5E9; /* Warm Cream — page, shell, section backgrounds */ --color-surface: #FFFDF8; /* Slightly elevated cream — cards */ --color-surface-soft: #FAF6EE; /* Even softer — nested cards, inset sections */ --color-surface-warm: rgba(253,245,233,0.85); /* Semi-transparent warm overlay */ --color-hero-bg: #FAF6EE; /* Hero / feature sections */ /* ══════════════════════════════════════════════ SEMANTIC TOKENS — TEXT ══════════════════════════════════════════════ */ --color-text: #1E2322; /* Soft Charcoal — headings, body, nav, buttons */ --color-text-muted: #5C534A; /* Warm mid-tone — supporting text, metadata */ --color-text-light: #8A7E74; /* Light muted — hints, placeholders, timestamps */ --color-heading: #1E2322; /* Same as text; separate token for intentional overrides */ /* ══════════════════════════════════════════════ SEMANTIC TOKENS — PRIMARY (Raspberry Red) Use for: Check In, Save, Redeem, Sign Up, Claim Stand, primary CTAs ══════════════════════════════════════════════ */ --color-primary: #D8394D; --color-primary-hover: #C02B3E; --color-primary-dark: #A82335; --color-primary-subtle: rgba(216,57,77,0.10); --color-primary-border: rgba(216,57,77,0.25); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — SECONDARY (Trail Teal) Use for: Learn More, View Details, Manage Listing, owner actions, links ══════════════════════════════════════════════ */ --color-secondary: #189F99; --color-secondary-hover: #127E79; --color-secondary-dark: #0E6460; --color-secondary-subtle: rgba(24,159,153,0.10); --color-secondary-border: rgba(24,159,153,0.25); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — ACCENT (Waffle Gold) Use for: ratings, badges, reward indicators, featured stands, loyalty accents. Use sparingly — not for large surfaces. ══════════════════════════════════════════════ */ --color-accent: #E4B289; --color-accent-hover: #D4996E; --color-accent-subtle: rgba(228,178,137,0.18); --color-accent-border: rgba(228,178,137,0.35); --color-accent-text: #7A4E1E; /* Dark gold — readable text on light backgrounds */ /* ══════════════════════════════════════════════ SEMANTIC TOKENS — SUCCESS (Market Green) Use for: successful check-ins, completed actions, earned rewards, verified status ══════════════════════════════════════════════ */ --color-success: #839324; --color-success-hover: #6B7A1C; --color-success-dark: #135E3A; /* Evergreen for deep/premium success states */ --color-success-subtle: rgba(131,147,36,0.12); --color-success-text: #5A6618; --color-success-border: rgba(131,147,36,0.28); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — WARNING Gold doubles as warning — keeps palette cohesive ══════════════════════════════════════════════ */ --color-warning: #E4B289; --color-warning-subtle: rgba(228,178,137,0.15); --color-warning-text: #7A4E1E; --color-warning-border: rgba(228,178,137,0.30); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — DANGER / ERROR Raspberry doubles as danger — intentional: the primary brand color carries urgency well. ══════════════════════════════════════════════ */ --color-danger: #D8394D; --color-danger-subtle: rgba(216,57,77,0.10); --color-danger-text: #A82335; --color-danger-border: rgba(216,57,77,0.22); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — EVERGREEN Use for: local farm references, sustainability indicators, premium regional badges ══════════════════════════════════════════════ */ --color-evergreen: #135E3A; --color-evergreen-subtle: rgba(19,94,58,0.10); --color-evergreen-text: #0E4A2D; /* ══════════════════════════════════════════════ SEMANTIC TOKENS — VINTAGE AQUA Use for: light teal highlights, progress bars, secondary decorative accents ══════════════════════════════════════════════ */ --color-aqua: #82D5D0; --color-aqua-subtle: rgba(130,213,208,0.18); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — BORDERS All borders carry a Vintage Brown undertone (#71352B) for warmth. Never cold grey. ══════════════════════════════════════════════ */ --color-border: rgba(113,53,43,0.14); --color-border-soft: rgba(113,53,43,0.10); --color-border-strong: rgba(113,53,43,0.22); --color-border-subtle: rgba(113,53,43,0.07); /* ══════════════════════════════════════════════ SEMANTIC TOKENS — OVERLAYS ══════════════════════════════════════════════ */ --color-overlay: rgba(30,35,34,0.18); --color-overlay-strong: rgba(30,35,34,0.55); /* ══════════════════════════════════════════════ SHADOWS Warm, dimensional — Vintage Brown undertone. Avoids cold-tech corporate drop shadows. ══════════════════════════════════════════════ */ --shadow-sm: 0 2px 6px rgba(113,53,43,0.08); --shadow-card: 0 4px 14px rgba(113,53,43,0.10); --shadow-card-soft: 0 2px 8px rgba(113,53,43,0.07); --shadow-card-strong: 0 8px 24px rgba(113,53,43,0.14); --shadow-inset-soft: inset 0 1px 0 rgba(255,255,255,0.65); --shadow-field-inset: inset 0 1px 2px rgba(113,53,43,0.06); --shadow-button: 0 2px 6px rgba(113,53,43,0.18); --shadow-modal: 0 16px 48px rgba(30,35,34,0.22); /* ══════════════════════════════════════════════ FOCUS RING Teal — visible, brand-consistent, accessible ══════════════════════════════════════════════ */ --focus-ring: 0 0 0 3px rgba(24,159,153,0.22); /* ══════════════════════════════════════════════ MAP PINS Tokens for future dynamic pin rendering. Current cone SVG in app.js uses these values. ══════════════════════════════════════════════ */ --pin-default: #189F99; /* Trail Teal — unvisited stand */ --pin-selected: #D8394D; /* Raspberry Red — active/selected stand */ --pin-visited: #839324; /* Market Green — visited stand */ --pin-featured: #E4B289; /* Waffle Gold — featured/promoted stand */ /* ══════════════════════════════════════════════ SPACING & RADII Structural tokens — do not change without reviewing every component that uses them. ══════════════════════════════════════════════ */ --radius-card: 24px; --radius-card-large: 28px; --radius-card-medium: 20px; --radius-card-small: 14px; --radius-button: 999px; /* Full pill shape */ --space-card-gap: 24px; --space-card-gap-tight: 16px; /* ══════════════════════════════════════════════ LEGACY ALIASES These map old token names to new equivalents so that existing var() references in styles.css continue to resolve correctly. Remove each alias as its old name is cleaned up in styles.css. ══════════════════════════════════════════════ */ --color-page-bg: var(--color-bg); --color-card-bg: var(--color-surface); --color-card-bg-strong: #FFFEF5; --color-card-bg-soft: var(--color-surface-soft); --color-text-primary: var(--color-text); --color-terracotta: var(--color-primary); --color-terracotta-dark: var(--color-primary-hover); --color-olive: var(--color-success); --color-olive-dark: var(--color-success-hover); --color-gold: var(--color-accent); --color-border-subtle-ui: var(--color-border-subtle); --color-app-bg: var(--color-bg); --color-card: var(--color-surface); --color-surface-strong: #FFFEF5; --color-success-bg: var(--color-success-subtle); --color-warning-bg: var(--color-warning-subtle); --color-danger-bg: var(--color-danger-subtle); --color-accent-gold: var(--color-accent); --color-accent-green: var(--color-success); --color-accent-blue: var(--color-secondary); --color-secondary-bg: var(--color-secondary-subtle); --color-primary-bg: var(--color-primary-subtle); --bg: var(--color-bg); --panel: var(--color-surface); --panel-strong: var(--color-card-bg-strong); --ink: var(--color-text); --muted: var(--color-text-muted); --pink: var(--color-accent-subtle); --pink-deep: var(--color-primary); --mint: var(--color-aqua-subtle); --mint-deep: var(--color-success); --cream: var(--color-surface-soft); --gold: var(--color-accent); --line: var(--color-border); --shadow: var(--shadow-card); --shadow-soft: var(--shadow-card); --accent: var(--color-primary); --berry: var(--color-primary); --radius-lg: var(--radius-card-large); --radius-md: var(--radius-card-medium); --radius-sm: var(--radius-card-small); }