/*!
 * ComprasGuate Design System — Tokens (v1.0)
 *
 * Fuente única de verdad para colores, spacing, radius, sombras y tipografía.
 * Cualquier estilo en theme o plugin que necesite valores visuales DEBE consumir
 * estos tokens vía var(--cg-*) en vez de hardcodear hex / px.
 *
 * Cargado lo más temprano posible (en functions.php antes que cualquier otro
 * stylesheet) para que las CSS vars estén disponibles globalmente.
 *
 * @package ComprasGuate
 * @since   theme v1.41.0
 */

:root {

  /* ============================================================
   * COLORS — Brand
   * ============================================================ */
  --cg-color-primary:        #1E73BE;
  --cg-color-primary-dark:   #155490;
  --cg-color-primary-light:  #DBEAFE;
  --cg-color-primary-bg:     #EFF6FF;

  /* ============================================================
   * COLORS — Semantic
   * Para estados de UI: éxito, advertencia, error, info.
   * ============================================================ */
  --cg-color-success:        #16A34A;
  --cg-color-success-light:  #D1FAE5;
  --cg-color-success-bg:     #ECFDF5;
  --cg-color-warning:        #F59E0B;
  --cg-color-warning-light:  #FEF3C7;
  --cg-color-warning-bg:     #FFFBEB;
  --cg-color-danger:         #DC2626;
  --cg-color-danger-light:   #FEE2E2;
  --cg-color-danger-bg:      #FEF2F2;
  --cg-color-info:           #0EA5E9;
  --cg-color-info-light:     #E0F2FE;

  /* ============================================================
   * COLORS — Accents
   * Para momentos específicos del producto, no general.
   * ============================================================ */
  --cg-color-accent-rose:        #FB7185;   /* Favoritos / wishlist */
  --cg-color-accent-rose-bg:     #FFF1F2;
  --cg-color-accent-gold:        #EAB308;   /* Premium / Verificada Plus */

  /* Quetzal — verde esmeralda brillante del ave nacional de Guatemala.
   * Identidad chapina del marketplace. Reservado para: "Hecho en Guatemala",
   * vendedores guatemaltecos verificados, productos locales, certificaciones
   * especiales, hitos del marketplace. NO reemplaza al primary; lo complementa. */
  --cg-color-accent-quetzal:      #14B881;
  --cg-color-accent-quetzal-dark: #047857;
  --cg-color-accent-quetzal-light:#A7F3D0;
  --cg-color-accent-quetzal-bg:   #ECFDF5;

  /* ============================================================
   * COLORS — Neutrals
   * Surface, background, borders, text en distintos pesos.
   * ============================================================ */
  --cg-color-surface:        #FFFFFF;
  --cg-color-bg:             #F9FAFB;
  --cg-color-bg-soft:        #F1F5F9;
  --cg-color-border:         #E2E8F0;
  --cg-color-border-soft:    #F1F5F9;
  --cg-color-text:           #0F172A;
  --cg-color-text-muted:     #64748B;
  --cg-color-text-soft:      #94A3B8;
  --cg-color-text-faint:     #CBD5E1;
  --cg-color-text-inverse:   #FFFFFF;

  /* ============================================================
   * SPACING — Escala de 4px
   * Cualquier padding/margin/gap en CG debe caer en uno de estos.
   * No más "16.5px" o "23px" sueltos.
   * ============================================================ */
  --cg-space-xs:  4px;
  --cg-space-sm:  8px;
  --cg-space-md:  16px;
  --cg-space-lg:  24px;
  --cg-space-xl:  32px;
  --cg-space-2xl: 48px;
  --cg-space-3xl: 64px;

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */
  --cg-radius-sm:   6px;    /* Inputs, badges */
  --cg-radius-md:   10px;   /* Buttons, small cards */
  --cg-radius-lg:   14px;   /* Cards, modals */
  --cg-radius-xl:   18px;   /* Large modals, hero cards */
  --cg-radius-full: 9999px; /* Chips, avatars, pills */

  /* ============================================================
   * SHADOWS — 4 niveles de elevación
   * ============================================================ */
  --cg-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --cg-shadow-md: 0 6px 20px rgba(0,0,0,.06);
  --cg-shadow-lg: 0 12px 30px rgba(0,0,0,.08);
  --cg-shadow-xl: 0 24px 50px rgba(0,0,0,.12);

  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */
  --cg-font:       -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Oxygen, sans-serif;
  --cg-font-mono:  ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Source Code Pro", monospace;

  --cg-text-xs:   11px;     /* Helper, captions */
  --cg-text-sm:   12.5px;   /* Subtítulos, meta */
  --cg-text-md:   14px;     /* Body por default */
  --cg-text-lg:   16px;     /* Botón grande, intro */
  --cg-text-xl:   18px;     /* H3 / sección */
  --cg-text-2xl:  22px;     /* H2 / título de página */
  --cg-text-3xl:  28px;     /* H1 / hero */
  --cg-text-4xl:  36px;     /* Display */

  --cg-weight-regular:  400;
  --cg-weight-medium:   500;
  --cg-weight-semibold: 600;
  --cg-weight-bold:     700;
  --cg-weight-extra:    800;

  --cg-leading-tight:  1.2;
  --cg-leading-normal: 1.5;
  --cg-leading-relaxed:1.6;

  /* ============================================================
   * LAYOUT
   * ============================================================ */
  --cg-container-max: 1820px;
  --cg-container-gutter: 16px;

  /* ============================================================
   * TRANSITIONS / MOTION
   * ============================================================ */
  --cg-transition-fast: .12s ease-out;
  --cg-transition-base: .18s ease-out;
  --cg-transition-slow: .3s ease-out;

  /* ============================================================
   * Z-INDEX SCALE
   * ============================================================ */
  --cg-z-dropdown:   100;
  --cg-z-sticky:     500;
  --cg-z-modal-back: 900;
  --cg-z-modal:      950;
  --cg-z-toast:      9999;
}