/* ================================================================
   variables.css — Sistema de Diseño zucupon
   Todos los tokens de diseño como CSS Custom Properties.
   Los colores pueden ser sobreescritos dinámicamente por PHP
   desde configuracion_empresa (ver partials/head.php).
   ================================================================ */

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

:root {
  /* ── Colores Primarios (Logo Zucupon) ────────────────────── */
  --color-primary:            #F68221;
  --color-primary-dark:       #d3640e;
  --color-primary-light:      #ffa052;
  --color-primary-container:  #F68221;
  --color-on-primary:         #ffffff;
  --color-on-primary-container: #3d1d03;

  /* ── Colores Secundarios (Crimson/Dark Accents) ───────────── */
  --color-secondary:           #b31010;
  --color-secondary-container: #fdf5ea;
  --color-on-secondary:        #ffffff;
  --color-on-secondary-container: #330404;

  /* ── Superficies y Fondos (Warm Light Mode) ───────────────── */
  --color-surface:                #ffffff;
  --color-surface-container:      #fdf6ed;
  --color-surface-container-low:  #fefbf6;
  --color-surface-container-high: #fadbb6;
  --color-surface-variant:        #f5eae0;
  --color-background:             #FAF4EE;

  /* ── Textos ──────────────────────────────────────────────── */
  --color-on-surface:         #2E221E;
  --color-on-surface-variant: #6B5C55;
  --color-on-background:      #2E221E;
  --color-outline:            #E9DCD0;
  --color-outline-variant:    #F3E8DF;

  /* ── Terciario (éxito, QR, fidelización) ─────────────────── */
  --color-tertiary:           #00677e;
  --color-tertiary-dark:      #004d5f;
  --color-tertiary-container: #00a7cb;
  --color-on-tertiary:        #ffffff;
  --color-on-tertiary-container: #001f27;

  /* ── Semánticos ──────────────────────────────────────────── */
  --color-success:  #27ae60;
  --color-warning:  #f1c40f;
  --color-danger:   #e74c3c;
  --color-info:     #3498db;

  /* ── Botones (alias configurables) ──────────────────────── */
  --color-boton:       var(--color-primary-container);
  --color-boton-texto: #ffffff;
  --color-acento:      var(--color-tertiary-container);

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display:  'Montserrat', system-ui, sans-serif;
  --font-ui:       'Inter',      system-ui, sans-serif;
  --font-mono:     'Courier New', monospace;

  /* ── Tamaños de Fuente ───────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  /* ── Pesos de fuente ─────────────────────────────────────── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ── Espaciado ───────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Bordes y Radios (Bordes más grandes y curvos estilo iOS/sugerido) ──── */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1.25rem;   /* 20px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-3xl:  2.5rem;    /* 40px */
  --radius-full: 9999px;

  /* ── Sombras Antigravity & Glassmorphism (Basadas en sombras difusas) ──── */
  --shadow-sm:  0 2px 8px rgba(89, 43, 11, 0.04);
  --shadow-md:  0 10px 30px rgba(89, 43, 11, 0.06), 0 4px 10px rgba(89, 43, 11, 0.03);
  --shadow-lg:  0 20px 45px rgba(89, 43, 11, 0.10), 0 8px 20px rgba(89, 43, 11, 0.05);
  --shadow-xl:  0 35px 70px rgba(89, 43, 11, 0.15), 0 15px 30px rgba(89, 43, 11, 0.08);
  --shadow-primary: 0 12px 30px rgba(246, 130, 33, 0.25);
  --shadow-glow:    0 0 25px rgba(246, 130, 33, 0.15);
  --glass-bg:       rgba(255, 255, 255, 0.85);
  --glass-border:   rgba(255, 255, 255, 0.5);
  --glass-blur:     blur(20px);

  /* ── Transiciones ────────────────────────────────────────── */
  --transition-fast:   0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-base:   0.3s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow:   0.6s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:      1280px;
  --container-px:   1rem;
  --header-height:  64px;
  --bottom-nav-h:   72px;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-header:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Modo oscuro (preparado, no activo por defecto) ────────── */
@media (prefers-color-scheme: dark) {
  /* Se puede activar en el futuro */
}