/* ── DESIGN TOKENS ─────────────────────────────────────────────────
   Floresta Jardín · Ciudad Obregón, Sonora
   Paleta inspirada en el logo: verde follaje + dorado + azul alberca
   Algunos valores son sobreescritos en runtime por config-loader.js
   ──────────────────────────────────────────────────────────────── */
:root {
  /* ─── COLORES PRINCIPALES (sobreescritos por config-loader.js) ── */
  --color-primary:       #345E37;   /* Verde follaje – logo */
  --color-primary-light: #4A7D4E;   /* Verde claro */
  --color-accent:        #5DADE2;   /* Azul alberca */
  --color-bg:            #FDFEFE;   /* Blanco jardín */
  --color-text:          #1A2E1B;   /* Verde-negro profundo */

  /* ─── DORADO DEL LOGO (fijo) ─────────────────────────────────── */
  --color-gold:          #C9A54A;   /* Dorado del logotipo */
  --color-gold-light:    #DEC07A;   /* Dorado suave */
  --color-gold-dark:     #9C7A28;   /* Dorado profundo */
  --color-gold-glow:     rgba(201, 165, 74, 0.25);

  /* ─── FONDO OSCURO – JARDÍN NOCTURNO (fijo) ─────────────────── */
  --color-dark:          #081209;   /* Noche de jardín */
  --color-dark-mid:      #0F2010;   /* Verde-oscuro medio */
  --color-dark-warm:     #122214;   /* Verde oscuro cálido */

  /* ─── SUPERFICIES ────────────────────────────────────────────── */
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #EFF7F0;   /* Verde muy suave */
  --color-surface-card:  #F7FCF8;   /* Tarjeta suave */

  /* ─── TEXTO ─────────────────────────────────────────────────── */
  --color-text-muted:    #476A4E;
  --color-text-light:    #789B7F;
  --color-text-inv:      rgba(255, 255, 255, 0.94);
  --color-text-inv-mid:  rgba(255, 255, 255, 0.72);
  --color-text-inv-dim:  rgba(255, 255, 255, 0.50);

  /* ─── BORDES ─────────────────────────────────────────────────── */
  --color-border:        #BDD8C0;
  --color-border-light:  #D8EED9;
  --color-border-dark:   rgba(255, 255, 255, 0.09);

  /* ─── ESTADO ─────────────────────────────────────────────────── */
  --color-success:       #2E7D32;
  --color-error:         #C62828;
  --color-available:     #2E7D32;
  --color-blocked:       #C62828;
  --color-overlay:       rgba(4, 14, 5, 0.75);

  /* ─── TIPOGRAFÍA ─────────────────────────────────────────────── */
  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
  --font-script:  'Great Vibes', cursive;
  --font-body:    'Jost', 'Segoe UI', system-ui, sans-serif;

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

  /* ─── 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;
  --space-32: 8rem;

  /* ─── BORDES REDONDEADOS ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* ─── SOMBRAS ────────────────────────────────────────────────── */
  --shadow-sm:     0 1px 4px  rgba(16, 40, 18, 0.08);
  --shadow-md:     0 4px 16px rgba(16, 40, 18, 0.12);
  --shadow-lg:     0 8px 40px rgba(16, 40, 18, 0.16);
  --shadow-xl:     0 16px 64px rgba(16, 40, 18, 0.22);
  --shadow-glow:   0 0 40px rgba(93, 173, 226, 0.18);
  --shadow-gold:   0 4px 24px rgba(201, 165, 74, 0.28);
  --shadow-green:  0 4px 24px rgba(52, 94, 55, 0.20);

  /* ─── TRANSICIONES ──────────────────────────────────────────── */
  --transition-fast:  0.15s ease;
  --transition:       0.30s ease;
  --transition-slow:  0.50s ease;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --header-height:  76px;
  --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;
}