/* ============================================================
   WEDDINGFLOW — BRAND TOKENS (Single Source of Truth)
   ============================================================
   This file is THE brand definition. All subprojects sync from here:
     bash ~/.claude/brands/weddingflow/sync.sh

   To change anything brand-related (colors, fonts, radii, shadows):
   1. Edit this file.
   2. Run sync.sh.
   3. Rebuild each subproject (npm run build).

   Never hardcode brand values elsewhere. Always reference via var(--name).

   Updated: 2026-06-04 (Brand Rosé, pastel status)
   Doc: ~/.claude/brands/weddingflow/design-system.md
   Live styleguide: ~/claude-system/styleguide/weddingflow.html
   ============================================================ */

:root {
  /* ── Brand — Rosé Family ───────────────────────────────── */
  --primary:        #C4727F;         /* Brand Rosé — logo accent, focus rings, primary CTAs accent */
  --primary-dark:   #A85563;         /* Hover/active state, gradient endpoint */
  --primary-text:   #7A3B45;         /* Deep Rosé for active text on light surfaces */
  --primary-rgb:    196, 114, 127;   /* rgba(var(--primary-rgb), .15) for soft accents */

  /* ── Ink (Logo "Wedding" + dark UI) ────────────────────── */
  --ink:            #444444;

  /* ── Text ──────────────────────────────────────────────── */
  --text:           #1d1d1f;
  --text-muted:     #6e6e73;
  --text-subtle:    #86868b;

  /* ── Surfaces ──────────────────────────────────────────── */
  --bg:             #FAF8F5;         /* Warm surface — global background */
  --bg-white:       #ffffff;
  --bg-dark:        #1d1d1f;
  --bg-card-glass:  rgba(255, 255, 255, 0.65);

  /* ── Borders ───────────────────────────────────────────── */
  --border:         #E0E0E0;
  --border-light:   #E5E5E7;

  /* ── Status (PASTEL — brand-warm, NOT Material grell) ──── */
  --success:        #A9C2A3;         /* Soft Sage Pastel */
  --warning:        #E6C28A;         /* Warm Honey Pastel */
  --danger:         #D89096;         /* Pastel Dusty Rose */

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:   'Playfair Display', serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-poetic:    'Amatic SC', cursive;
  --font-script:    'Dancing Script', cursive;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-xs:      4px;
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;             /* Default cards */
  --radius-xl:      14px;
  --radius-2xl:     16px;             /* Modals */
  --radius-3xl:     24px;
  --radius-pill:    980px;            /* SIGNATURE pill buttons */
  --radius-full:    9999px;

  /* ── Shadows (multi-layer, soft) ───────────────────────── */
  --shadow-card:    0 2px 16px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
  --shadow-warm:    0 4px 24px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.8);
  --shadow-lift:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-modal:   0 16px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
  --shadow-floating:0 24px 80px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08);
  --shadow-focus:   0 0 0 3px rgba(var(--primary-rgb), 0.15);  /* Rosé glow */

  /* ── Motion ────────────────────────────────────────────── */
  --duration-fast:    0.15s;
  --duration-normal:  0.25s;
  --duration-slow:    0.4s;
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);   /* signature easing */
  --ease-default:     ease;
  --transition-default: all var(--duration-normal) var(--ease-out);
  --transition-fast:    all var(--duration-fast) var(--ease-out);
}