/* ═══════════════════════════════════════════════════════════════════════
   Florencia — Design tokens
   Basado en el design system "Organic" con override de paleta a
   fucsia + salvia. Todos los tokens se pueden sobreescribir en runtime
   desde /js/theme.js leyendo la tabla theme_config de Supabase.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Colores principales (editables desde el CMS) ─────────────── */
  --color-bg:        #f5eef1;   /* fondo global del sitio */
  --color-surface:   #fdf3f7;   /* superficies elevadas / inputs */
  --color-text:      #1a1416;
  --color-accent:    #d6236a;   /* fucsia — marca Florencia */
  --color-accent-2:  #7a8a5e;   /* salvia — acento secundario */
  --color-divider:   color-mix(in srgb, #1a1416 12%, transparent);

  /* ── Rampa neutral ────────────────────────────────────────────── */
  --color-neutral-100: #fbf7f9;
  --color-neutral-200: #f2ecef;
  --color-neutral-300: #e3d9df;
  --color-neutral-400: #c4b6bd;
  --color-neutral-500: #9d8f96;
  --color-neutral-600: #7a6d74;
  --color-neutral-700: #574c52;
  --color-neutral-800: #3a3237;
  --color-neutral-900: #1f1a1d;

  /* ── Rampa fucsia (accent) ───────────────────────────────────── */
  --color-accent-100: #ffe6f0;
  --color-accent-200: #ffc9dd;
  --color-accent-300: #ff9ec2;
  --color-accent-400: #f56ba1;
  --color-accent-500: #d6236a;
  --color-accent-600: #b41355;
  --color-accent-700: #8f0842;
  --color-accent-800: #66042f;
  --color-accent-900: #40021d;

  /* ── Rampa salvia (accent-2) ─────────────────────────────────── */
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* ── Tipografía ──────────────────────────────────────────────── */
  --font-heading: "Caprasimo", "Playfair Display", Georgia, serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  /* ── Espaciado (escala Organic 1.10×) ────────────────────────── */
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  /* ── Radios ──────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* ── Sombras ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}