/* ── DESIGN TOKENS ─────────────────────────────────────────────
   Estética: Templo griego clásico — Oro · Piedra · Mármol
   Paleta inspirada en el logo: templo dorado sobre fondo blanco.
   Sobreescritos en runtime por config-loader.js / config/client.js
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Colores principales (sobreescritos por config/client.js) */
  --color-primary:       #2C2920;   /* piedra cálida oscura */
  --color-primary-light: #3D3828;   /* piedra media */
  --color-accent:        #D4AF37;   /* oro del logo */

  /* Piedra / oscuro */
  --color-stone-dark:    #1A1813;   /* fondo secciones oscuras */
  --color-stone-mid:     #2C2920;   /* piedra media */
  --color-stone-warm:    #3D3828;   /* piedra cálida */

  /* Oro */
  --color-gold:          #D4AF37;   /* oro exacto del logo */
  --color-gold-light:    #E8C94A;   /* oro hover */
  --color-gold-dim:      #B8952E;   /* oro pressed */
  --color-gold-muted:    rgba(212, 175, 55, 0.15);

  /* Mármol / claro */
  --color-marble:        #F5F1E8;   /* fondo secciones claras */
  --color-marble-alt:    #EDE8D8;   /* fondo alternativo */
  --color-marble-deep:   #DDD7C4;   /* bordes y separadores */

  /* Alias legacy (usados en layout.css / components.css) */
  --color-burgundy-dark: #1C1A16;   /* antes borgoña oscuro */
  --color-burgundy-deep: #0E0D0A;   /* antes borgoña profundo */
  --color-bg:            #F5F1E8;   /* mármol (reemplaza crema) */
  --color-text:          #1C1A14;   /* casi negro cálido */

  /* Colores fijos de sistema */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EDE8D8;
  --color-text-muted:    #6B6456;
  --color-text-light:    #9B9080;
  --color-border:        #D8D0BE;
  --color-border-light:  #E8E1D0;
  --color-success:       #2E7D32;
  --color-error:         #C62828;
  --color-blocked:       #C62828;
  --color-available:     #2E7D32;
  --color-overlay:       rgba(10, 9, 6, 0.65);

  /* ── Tipografía ────────────────────────────────────────────── */
  --font-display:  'Cinzel Decorative', 'Cinzel', serif;   /* hero h1, page-hero */
  --font-heading:  'Cinzel', 'Playfair Display', serif;    /* h2–h4, nav, labels */
  --font-subhead:  'Cormorant Garamond', 'Playfair Display', serif; /* subtítulos */
  --font-body:     'Playfair Display', Georgia, serif;     /* cuerpo de texto */
  --font-ui:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script:   'Cormorant Garamond', Georgia, serif;   /* antes Great Vibes */

  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-md:  1rem;      /* 16px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.375rem;  /* 22px */
  --font-size-2xl: 1.75rem;   /* 28px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */

  /* Tracking (letter-spacing) */
  --tracking-normal: 0;
  --tracking-wide:   0.1em;
  --tracking-wider:  0.15em;

  /* ── 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 ────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Sombras ───────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.16);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.24);

  /* ── Transiciones ──────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition:        0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Layout ────────────────────────────────────────────────── */
  --header-height:  72px;
  --max-width:      1200px;
  --max-width-text: 720px;

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