/* ── DESIGN TOKENS — Casa Arias 1911 ────────────────────────────
   Paleta Belle Époque oscura inspirada en los interiores reales:
   madera lacada del Porfiriato, oro colonial, verde menta del
   cielo de medallones ovalados, pergamino envejecido.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Colores principales (sobreescritos en runtime por config-loader.js) */
  --color-primary:       #8A3324;   /* cantera / terracotta */
  --color-primary-light: #A84030;
  --color-accent:        #C9A265;   /* oro colonial */
  --color-bg:            #0F0A04;   /* madera lacada oscura */
  --color-text:          #F0E8D8;   /* pergamino envejecido */

  /* Tonos de superficie — escala oscura */
  --color-surface:       #1A1108;   /* nogal oscuro */
  --color-surface-alt:   #211709;   /* ligeramente más claro */
  --color-surface-card:  #2A1F0E;   /* tarjetas */
  --color-surface-light: #362810;   /* hover / selección */

  /* Acento verde — color del cielo de medallones ovalados */
  --color-mint:          #7A9B8A;
  --color-mint-dim:      rgba(122,155,138,0.18);

  /* Acento dorado con opacidades */
  --color-accent-dim:    rgba(201,162,101,0.55);
  --color-accent-glow:   rgba(201,162,101,0.12);

  /* Texto */
  --color-text-muted:    #A89070;
  --color-text-light:    #6E5840;
  --color-text-inv:      #1A1108;

  /* Bordes dorados */
  --color-border:        rgba(201,162,101,0.18);
  --color-border-light:  rgba(201,162,101,0.10);
  --color-border-strong: rgba(201,162,101,0.38);

  /* Sistema */
  --color-success:       #5D8A6A;
  --color-error:         #A83030;
  --color-blocked:       #A83030;
  --color-available:     #5D8A6A;
  --color-overlay:       rgba(8,4,1,0.82);

  /* ── Tipografía ──────────────────────────────────────────────── */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Great Vibes', 'Dancing Script', cursive;
  --font-body:    'EB Garamond', Georgia, serif;

  --font-size-xs:  0.75rem;    /* 12px */
  --font-size-sm:  0.875rem;   /* 14px */
  --font-size-md:  1.0625rem;  /* 17px — EB Garamond lee bien a 17px */
  --font-size-lg:  1.1875rem;  /* 19px */
  --font-size-xl:  1.4rem;     /* ~22px */
  --font-size-2xl: 1.875rem;   /* 30px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3.25rem;    /* 52px */

  /* ── Espaciado ────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Bordes redondeados ──────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Sombras — más profundas para el tema oscuro ──────────── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.45);
  --shadow-md:   0 4px 18px rgba(0,0,0,0.55);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.65);
  --shadow-xl:   0 20px 64px rgba(0,0,0,0.75);
  --shadow-gold: 0 4px 24px rgba(201,162,101,0.18);
  --shadow-inset: inset 0 1px 0 rgba(201,162,101,0.08);

  /* ── Transiciones ────────────────────────────────────────── */
  --transition-fast:   0.18s ease;
  --transition:        0.3s ease;
  --transition-slow:   0.55s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-reveal: 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --header-height:  76px;
  --max-width:      1160px;
  --max-width-text: 700px;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-fab:      400;
  --z-toast:    500;

  /* ── Medallón — patrón SVG del cielo de Casa Arias ─────────
     Reproducción del motivo oval+retícula que se ve en la
     fachada, el pasillo central y sobre la araña de cristal.
     Se usa como background-image en secciones decorativas.    */
  --pattern-medallion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='none'/%3E%3Crect x='0' y='0' width='80' height='80' fill='none' stroke='%23C9A265' stroke-width='0.4' stroke-opacity='0.12'/%3E%3Cellipse cx='40' cy='40' rx='26' ry='18' fill='none' stroke='%23C9A265' stroke-width='0.6' stroke-opacity='0.18'/%3E%3Cellipse cx='40' cy='40' rx='22' ry='14' fill='none' stroke='%23C9A265' stroke-width='0.3' stroke-opacity='0.10'/%3E%3Ccircle cx='40' cy='40' r='3' fill='none' stroke='%23C9A265' stroke-width='0.5' stroke-opacity='0.15'/%3E%3Ccircle cx='0' cy='0' r='3' fill='none' stroke='%23C9A265' stroke-width='0.5' stroke-opacity='0.12'/%3E%3Ccircle cx='80' cy='0' r='3' fill='none' stroke='%23C9A265' stroke-width='0.5' stroke-opacity='0.12'/%3E%3Ccircle cx='0' cy='80' r='3' fill='none' stroke='%23C9A265' stroke-width='0.5' stroke-opacity='0.12'/%3E%3Ccircle cx='80' cy='80' r='3' fill='none' stroke='%23C9A265' stroke-width='0.5' stroke-opacity='0.12'/%3E%3C/svg%3E");
}