/* ============================================================
   Design Tokens — Bailante
   CSS Custom Properties: typography, color, spacing, radius, shadow
   Locked tokens — every emit references these by name.

   Brand palette (extracted from bailante-web/assets/newDesign/css/landing.css):
   - Primary:        #1C51CD (Bailante blue)
   - Primary dark:   #163FA0
   - Primary light:  #4A75DD
   - Pink accent:    #E91E63 (matches dancer silhouette in logo)
   - Pink light:     #CC75CF
   - Cyan accent:    #1DFFEB
   - WhatsApp green: #25D366
   - Neutrals: warm grays (paper feel, matches logo background)

   Typography:
   - Display: Poppins (700) — geometric, friendly, dance-energy
   - Body:    Poppins (400, 500) — same family for tight rhythm
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* ── Typography ─────────────────────────────────────── */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  /* ── Brand primary (Bailante blue, from landing.css) ── */
  --brand-primary:       #1C51CD;
  --brand-primary-dark:  #163FA0;
  --brand-primary-light: #4A75DD;

  /* ── Brand accents ───────────────────────────────────── */
  --brand-pink:      #E91E63;
  --brand-pink-soft: #CC75CF;
  --brand-cyan:      #1DFFEB;
  --brand-whatsapp:  #25D366;   /* WhatsApp CTA / success */

  /* ── Neutral scale (paper warm grays) ──────────────── */
  --neutral-50:  #FAF8F5;
  --neutral-100: #F2EFEA;
  --neutral-200: #E5E1D9;
  --neutral-300: #C8C2B5;
  --neutral-400: #9A9384;
  --neutral-500: #6F695B;
  --neutral-600: #4F4A3F;
  --neutral-700: #363128;
  --neutral-800: #232019;
  --neutral-900: #14110B;

  /* ── Per-flow accent (per service type) ───────────── */
  --accent-boda:   var(--brand-primary);   /* blue — wedding */
  --accent-quince: var(--brand-pink);      /* pink — quinceañera */
  --accent-clases: var(--brand-cyan);      /* cyan — dance classes */
  --accent-show:   #C71F8D;                /* magenta — shows (kept from brand landing) */

  /* ── Semantic tokens ───────────────────────────────── */
  --color-primary:        var(--brand-primary);
  --color-primary-dark:   var(--brand-primary-dark);
  --color-text:           var(--neutral-800);
  --color-text-soft:      var(--neutral-600);
  --color-text-muted:     var(--neutral-500);
  --color-bg:             var(--neutral-50);
  --color-bg-warm:        #F7F3EA;
  --color-surface:        #FFFFFF;
  --color-border:         var(--neutral-200);
  --color-border-soft:    var(--neutral-100);
  --color-error:          #B91C1C;
  --color-error-bg:       #FEF2F2;
  --color-success:        var(--brand-whatsapp);
  --color-success-bg:     #F0FDF4;

  /* ── Spacing scale (4 px base) ──────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* ── Border radius ────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(20 17 11 / 0.04);
  --shadow-sm: 0 2px 4px -1px rgb(20 17 11 / 0.06), 0 1px 2px -1px rgb(20 17 11 / 0.04);
  --shadow-md: 0 6px 12px -2px rgb(20 17 11 / 0.08), 0 3px 6px -3px rgb(20 17 11 / 0.05);
  --shadow-lg: 0 16px 32px -4px rgb(20 17 11 / 0.10), 0 6px 12px -6px rgb(20 17 11 / 0.06);

  /* ── Motion ───────────────────────────────────────── */
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition-base: 200ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 320ms cubic-bezier(0.2, 0, 0, 1);

  /* ── Layout ───────────────────────────────────────── */
  --container-narrow: 560px;
  --container:        720px;
  --container-wide:    960px;
}

/* Per-flow accent applied at runtime via body[data-flow="..."] */
body[data-flow="quince"] { --color-primary: var(--accent-quince); --color-primary-dark: #5B21B6; }
body[data-flow="clases"] { --color-primary: var(--accent-clases); --color-primary-dark: #005F87; }
body[data-flow="show"]   { --color-primary: var(--accent-show);   --color-primary-dark: #9D1972; }