/**
 * FUSE — Brand Design Tokens & Visual Guidelines
 * Version 1.1 — 2026-06-18
 *
 * This file defines the FUSE visual identity as CSS custom properties.
 * All product CSS should import or reference these tokens.
 *
 * Philosophy: Urban energy meets warm human connection. Dark, not cold.
 * The brand feels like a city at night — alive, textured, electric but intimate.
 *
 * Mobile-first: all interactive elements ≥44×44px touch target.
 * Form inputs: font-size 16px to prevent iOS auto-zoom on focus.
 * Display text: clamp() only, never fixed rem values.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   COLOR PALETTE
   ───────────────────────────────────────────────────────────────────────────── */

/* Primary: Fire — the brand's heartbeat. Use for CTAs, highlights, active states */
--fire:       #FF3D2E;   /* Primary accent. Saturated, not pastel. */
--fire-glow:  rgba(255, 61, 46, 0.12);
--fire-dim:   rgba(255, 61, 46, 0.25);
--fire-deep:  rgba(255, 61, 46, 0.5);

/* Secondary: Ember — warmth, energy, secondary CTAs, venue/check-in accents */
--ember:      #FF8A00;
--ember-glow: rgba(255, 138, 0, 0.12);
--ember-dim:  rgba(255, 138, 0, 0.3);

/* Tertiary: Gold — premium moments, celebration, match states */
--gold:       #F5C842;
--gold-glow:  rgba(245, 200, 66, 0.1);

/* Backgrounds — always dark. Night is the canvas. */
--night:      #0A0A0F;   /* Primary background. Near-black with a blue undertone. */
--deep:       #12121A;   /* Secondary background, sections, cards */
--card:       #1A1A26;   /* Elevated surfaces — inputs, panels, modals */

/* Neutrals */
--muted:      #2E2E42;   /* Borders, dividers, disabled states */
--soft:       #9D9BB0;   /* Secondary text, placeholder, meta */

/* Text */
--text:       #F0EDE8;   /* Primary text. Warm white, not pure #fff */
--text-dim:   rgba(240, 237, 232, 0.6);
--text-ghost: rgba(240, 237, 232, 0.25);

/* Status colors — use sparingly */
--success:    #00C853;
--success-glow: rgba(0, 200, 83, 0.15);
--error:      #FF3D2E;   /* Same as fire — consistent */
--warning:    #FF8A00;   /* Same as ember */

/* Gradient: Fire spectrum — use for hero moments, match celebrations */
--gradient-fire: linear-gradient(90deg, var(--fire) 0%, var(--ember) 55%, var(--gold) 100%);
--gradient-card: linear-gradient(135deg, var(--card) 0%, var(--deep) 100%);


/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

/* Display / Hero — Bebas Neue
   - Use for: Hero headlines, section titles, logo
   - Character: Bold, urban, commanding. Compressed letterforms.
   - DO NOT use below 1.2rem */
--font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;

/* Body — DM Sans
   - Use for: UI text, body copy, form labels, captions
   - Character: Neutral, readable, modern without being generic
   - DO NOT use for display headlines */
--font-body: 'DM Sans', 'Helvetica Neue', sans-serif;

/* Accent / Editorial — Playfair Display
   - Use for: Taglines, quotes, emphasis, brand voice moments
   - Character: Serif warmth. Human, editorial, not stiff
   - Use sparingly — italic only, never bold
   - DO NOT use for long-form body text */
--font-accent: 'Playfair Display', 'Georgia', serif;


/* ─────────────────────────────────────────────────────────────────────────────
   TYPE SCALE
   ───────────────────────────────────────────────────────────────────────────── */

/* Hero — Bebas Neue only. Large, no mercy. */
--text-hero:  clamp(3.8rem, 8.5vw, 7rem);
--text-display: clamp(2.4rem, 5vw, 4rem);
--text-title: clamp(2rem, 4vw, 3.2rem);
--text-heading: 1.4rem;  /* Bebas Neue */
--text-subheading: 1.1rem; /* DM Sans, medium */
--text-body: 0.95rem;   /* DM Sans, regular */
--text-caption: 0.82rem;
--text-micro: 0.72rem;
--text-label: 0.68rem; /* Uppercase labels only */


/* ─────────────────────────────────────────────────────────────────────────────
   SPACING & LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

/* Base unit: 8px. All spacing in multiples of 8. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 80px;
--space-10: 120px;
--space-11: 140px;

/* Content width */
--content-max: 900px;
--content-narrow: 640px;

/* Page margins */
--page-margin: 48px; /* desktop */
--page-margin-mobile: 24px;


/* ─────────────────────────────────────────────────────────────────────────────
   BORDERS & RADIUS
   ───────────────────────────────────────────────────────────────────────────── */

/* Sharp: Inputs, buttons, cards */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;  /* Cards, modals */
--radius-pill: 40px; /* Badges, tags */

/* No radius: Dividers, borders on dark bg */
--radius-none: 0;


/* ─────────────────────────────────────────────────────────────────────────────
   SHADOWS & GLOWS
   ───────────────────────────────────────────────────────────────────────────── */

/* Fire glow — use for hover states on cards, buttons, active elements */
--glow-fire: 0 0 20px rgba(255, 61, 46, 0.2), 0 0 40px rgba(255, 61, 46, 0.08);
--glow-ember: 0 0 20px rgba(255, 138, 0, 0.2), 0 0 40px rgba(255, 138, 0, 0.08);
--glow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
--glow-elevated: 0 8px 40px rgba(0, 0, 0, 0.6);


/* ─────────────────────────────────────────────────────────────────────────────
   MOTION & ANIMATION
   ───────────────────────────────────────────────────────────────────────────── */

/* Durations */
--duration-fast: 0.15s;
--duration-base: 0.25s;
--duration-slow: 0.4s;
--duration-entrance: 0.7s;

/* Easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);    /* Natural deceleration */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);  /* Material standard */

/* Animation patterns */
--anim-fade-up: fadeUp var(--duration-entrance) var(--ease-out) both;
--anim-fade-in: fadeIn var(--duration-base) var(--ease-out) both;
--anim-blur-pulse: blink 1.6s ease-in-out infinite;

/* Keyframes (define in theme.css or base stylesheet) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(20px, -15px); }
  66%       { transform: translate(-10px, 10px); }
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.08; }
  50%       { opacity: 0.18; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   ICONOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

/* FUSE uses three icon sources, in priority order:
 * 1. Inline SVG — for brand-critical icons (logo, match heart, send arrow)
 * 2. Emoji — for contextual UI (📍 location, 🔭 empty state, ♡ no matches)
 * 3. Unicode symbols — for UI controls (‹ back, ✕ close, › chevron)
 *
 * DO NOT introduce a third-party icon library (Font Awesome, Heroicons, etc.)
 * without discussion. Iconography should be minimal and intentional.
 * Emojis and inline SVG are the brand standard. */


/* ─────────────────────────────────────────────────────────────────────────────
   BRAND USAGE RULES
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * DO:
 *   ✓ Use fire (#FF3D2E) for primary CTAs, active states, important highlights
 *   ✓ Use ember (#FF8A00) for check-in accents, venue-related UI, neighborhood signals
 *   ✓ Use Bebas Neue for any headline or display text — large, confident
 *   ✓ Use Playfair Display italic for brand voice moments: taglines, quotes, celebration copy
 *   ✓ Keep backgrounds dark (#0A0A0F, #12121A). Light = wrong.
 *   ✓ Use gradient-fire for hero moments and match celebrations only
 *   ✓ Add atmospheric glow orbs and grid textures for visual depth
 *   ✓ Apply 16px font-size to all form inputs (prevents iOS zoom on focus)
 *   ✓ Ensure all interactive elements have ≥44×44px touch target
 *
 * DON'T:
 *   ✗ Use blue/purple for primary accents
 *   ✗ Use white (#fff) for text — use --text (#F0EDE8) instead
 *   ✗ Use Inter, Roboto, Arial, or system-ui for any text
 *   ✗ Center everything — asymmetry is intentional
 *   ✗ Flat backgrounds — always add depth (glows, gradients, grid textures)
 *   ✗ Rounded everything — sharp radius for UI, pill for badges only
 *   ✗ Generic card grids — FUSE is not a SaaS dashboard
 *   ✗ Fixed rem values on display or body copy — use clamp() only
 *   ✗ Clinical crosshairs/map aesthetic — FUSE is about belonging, not coordinates
 */


/* ─────────────────────────────────────────────────────────────────────────────
   NEIGHBORHOOD SIGNALS
   Ember (#FF8A00) is the color of place. Use it to communicate:
   - The user's current neighborhood in the feed
   - Venue check-in badges and location UI
   - Neighborhood name chips on profile cards
   - "Same block" or "Same hood" proximity indicators

   Patterns:
   - Neighborhood pill: --ember badge, small icon, DM Sans 0.75rem
   - Venue check-in badge: ember glow background, location emoji
   - "Walkable" indicator: small ember dot + "X min walk" label
   ───────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE-FIRST INTERACTION
   ───────────────────────────────────────────────────────────────────────────── */

/* All interactive elements: minimum 44×44px touch target */
--touch-min: 44px;

/* Form inputs: 16px minimum to prevent iOS zoom on focus */
--input-font-size: 16px;